新手vue构建单页面应用实例代码

新手vue构建单页面应用实例代码

本文介绍了新手vue构建单页面应用实例代码，分享给大家，具体如下

步骤：

1.使用vue-cli创建项目

2.使用vue-router实现单页路由

3.用vuex管理我们的数据流

4.使用vue-resource请求我们的node服务端

5.使用.vue文件进行组件化的开发

一、目录结构：

二、搭建项目

先安装 vue-cli： sudo npm install -g vue-cli

使用vue-cli构建初始化项目：vue init webpack project（创建webpack项目并下载依赖）

输入命令进入项目： cd my-project

安装依赖： npm install

npm i

开始运行： npm run dev (或输入http://localhost:8080)，在热加载中运行我们的应用

它会去找到package.json的scripts对象，执行node bulid/dev-server.js

在这文件里，配置了Webpack，会让它去编译项目文件，并且运http://行服务器。

这些都准备好后，我们需要为我们的路由、XHR请求、数据管理下载三个库，我们可以从vue的官网中找到他们。另外我们使用bootstrap作为我的UI库：

npm i vue-resource vue-router vuex bootstrap --save

三、项目开始

初始化项目（main.js）

查看我们的应用文件，我们可以在src目录下找到App.vue和main.js文件中，我们引入Vue和App，且创建了一个vue的实例（因为在router这行引入了App组件router.start(App,'#app')）

import Vue from 'vue'

import App from './App'

import router from './router'

import VueResource from 'vue-resource'

Vue.use(VueResource)

Vue.config.productionTip = false

new Vue({

el: '#app',

router,

template: '',

components: { App }

})

index.html

App.vue

Home

About

Contact

src/components/Home.vue 作为我们的首页

This is the tutorial about Contact.

src/components/About.vue

This is the tutorial about vue-router.

src/components/Contact.vue

This is the tutorial about Contact.

export default {

'/contact': 'cDQFYdswcKontact'

}

src/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '@/components/Hello'

import Home from '@/components/Home'

import About from '@/components/About'

import Contact from '@/components/Contact'

import 'bootstrap/dist/css/bootstrap.css'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'Hello',

component: Hello

},

{

path: '/home',

name: 'Home',

component: Home

},

{

path: '/about',

name: 'About',

component: About

},

{

path: '/contact',

name: '/Contact',

component: Contact

}

]

})

spa地址：https://github.com/cinderellastory415/vue-demo/tree/master/spa

详细操作：

git clone https://github.com/cinderellastory415/vue-demo/tree/master/spa

npm install

npm run dev

输入以上命令，即可查看效果。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。