本文共 671 字，大约阅读时间需要 2 分钟。

0.查看环境

0.1 node -v

0.2 npm -v

0.3 使用淘宝镜像

npm install -g cnpm –registry=https://registry.npm.taobao.org

0.4 cnpm -v

0.5 全局安装vue-cli

npm install --global vue-cli

1.创建项目

1.1 以管理身份打开cmd，进入项目将要放置的路径

1.2 创建 vue init webpack 项目名称

创建完成之后的目录

1.3 将项目在WebStorm中打开并启动

2 父子页面

2.1APP.vue与HelloWorld关联

APP.vue是helloWorld的父页面，在index.js中设置 APP.vue: 页面路由 HelloWorld页面 index.js： 运行：

2.2 APP.vue与hello2关联，在index.js中设置

hello2页面：

index.js: 运行：http://localhost:8080/#/

运行：http://localhost:8080/#/hello

2.3 APP.vue与index关联

3.vue-rouyer配置子路由

3.1 导航

index.vue:

路径根据index.js配置为准 index,js: 运行： 点击触发：

3.2 将hi1和hi2加入到hi模板中,单页面中的2个子页面

1.创建hi,Hi1和Hi2页面

hi页面： hi1页面： hi2页面： 配置：

运行：

点击去hi1页面： 点击去hi2页面：

转载地址：http://acezi.baihongyu.com/