一、搭建vue脚手架
1、安装vue-cli:npm install -g vue-cli
2、初始化项目:vue init webpack 项目名
3、安装依赖:npm install
(npm 版本需要注意:npm: 2.14.20 should be >= 3.0.0,可以事先升级 node 为最新版本,直接下载 dmg 进行安装替换即可)
4、运行:npm run dev
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-cli</title> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> </body> </html>
main.js
import Vue from 'vue' import Router from './Router'//引入Router.js
Router.js
/** * Created by Amy on 2017/12/13. */ import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 主路由 var first = {template:'<div>first内容</div>'} var second = {template:'<div>second 内容</div>'} var Home = {template:'<div>Home 内容</div>'} 子路由 var firstFirst = {template:'<div>firstFirst 内容</div>'} var firstSencond = {template:'<div>firstSecond 内容</div>'} 子路由模板 var asdf = { template:` <div class="asdf"> <h2>组件</h2> <router-view class="adsf"></router-view> </div> ` } var router = new VueRouter({ mode:'history', base: __dirname, routes:[ {path:'/',component:Home}, {path:'/first',component:asdf, children:[ {path:'/',component:first}, {path:'first',component:firstFirst}, {path:'second',component:firstSencond}, ] }, {path:'/second',component:second}, ] }) new Vue({ router, template:` <div id="r"> <h1>导航</h1> <ol> <li><router-link to="/">Go to /</router-link></li> <li><router-link to="/first">Go to first</router-link></li> <ol> <li><router-link to="/first/first">firstFirst</router-link></li> <li><router-link to="/first/second">firstSencond</router-link></li> </ol> <li><router-link to="/second">Go to second</router-link></li> </ol> <router-view class="asdf"></router-view> </div> ` }).$mount('#app')