vue搭建脚手架-创建项目

一、全局下载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

好啦，大功告成。