* vue开发环境搭建

* 项目入口文件 ./src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})

入口文件不需要改动　　

* 项目路由文件 ./src/router/index.js

指定url对应哪些组件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// add router
import cnblog from '@/components/cnblog'
import person from '@/components/person'

Vue.use(Router)

// configure router
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/cnblog',
name: 'cnblog',
component: cnblog
},
{
path: '/person',
name: 'person',
component: person
}
]
})

* 项目入口模板./src/App.vue

路由的模板页面都在 中，这个文件也不需要改动

* 创建一个组件模板文件 ./src/components/cnblog.vue

组件都放在./src/components/路径下

注意

** 整个模板文件只能是一个根dom节点

** 文件结尾需要一个空行

** 

　　Run:

npm run dev

* 再创建一个组件person

先添加路由 ./router/index.js

import person from '@/components/person'
Vue.use(Router)

export default new Router({
routes: [
// …
{
path: '/person',
name: 'person',
component: person
}
]
})

创建模板./components/person.vue

　　

一些分享的教程

Angular5.X+Ionic3.X仿京东商城项目实战视频教程免费下载地址：http://pan.baidu.com/s/1skETGa5

Angular5完整版地址：https://www.itying.com/goods-232.html

Ionic3仿京东商城项目实战完整版地址：https://www.itying.com/goods-460.html

Angular5 Koa2无人点餐无人收银项目实战视频教程免费下载地址：https://pan.baidu.com/s/1Hn-iHvDaRxqjmOZCEIrZZQ

2018年6月最新Mpvue视频教程免费下载地址：
https://www.itying.com/goods-897.html

最新Node.js基础视频教程完整版及Koa2入门实战视频教程免费下载地址：https://www.itying.com/goods-240.html

2018年最新Vue入门实战视频教程免费下载地址：
https://www.itying.com/goods-864.html