一、全局下载vue-cli
npm install vue-cli -g
二、初始化项目 vue init
vue init 模板名称 项目名称
初始化.png
官方提供五种项目名称：
1. webpack 包含了webpack+vue-loader的项目模板，也包括了热加载、测试功能、css扩展等等...
2. webpack-simple 简单的webpack+vue-loader的模板，不包含热加载和其他功能，用于快速搭建vue环境。
3. borwserify 全面的browserify+vueify的模板，包括了热加载、测试功能、css扩展等等...
4. borwserify-simple 简单的browserify+vueify的模板，不包含热加载和其他功能。
5. -simple 最简单的单页面应用模板。
了解.png
所有子路由有引入到App.vue文件中，index.html中实现的都是App.vue===>vue-cli项目中，入口文件是App.vue,项目入口是index.html。
三、启动项目
根据提示，运行项目。
cd testone //进入项目文件夹
npm run dev //运行项目
项目运行.png
端口号被占用会自动分配下一个。
运行结果.png
好啦~基本配置好啦，来玩一下。实现嵌套组件并切换的效果
这样子就不用写很多页面啦。
玩一下.gif
-
先把主页内容都删掉
在app.vue中删掉图标。
删除图标.png -
在helloworld.vue组件中删除template模板中的内容
删除内容.png
- 在components目录中创建两个子组件
子组件.png
组件三部分组成：
- 在主组件中引入两个子组件
引入子组件.png
-
在路由js文件中引入两个自主键并在主路由中注册组件
引入并注册子组件.png
好啦，大功告成。
