1. Vue CLI脚手架

1.1 介绍

1. Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板，是Vue官方提供的标准化开发工具
2. 全局安装@vue/cli npm install -g @vue/cli
3. 切换到创建项目的目录，使用命令创建项目vue create xxx项目名

1. 1. 如果选择Default则会直接创建项目，创建项目包括babel\eslin这些工具，比如Router/Vuex等其他依赖需要自己手动安装。
   2. 如果选择Manually select features(手动安装)则会进入下一步选项：（这里推荐大家进行手动配置）

1. 1. 1. 根据你的项目需要来选择配置,空格键是选中与取消，A键是全选。
      2. 一般项目开发只需要选择Babel、Router、Vuex就足够了。

1. 选择vue版本

1. 进入项目 cd xxx项目名
2. 启动项目 yarn serve // npm run serve
3. 打包项目 yarn build // npm run build

1.2 脚手架文件结构

.文件目录
├── node_modules: 依赖包
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
|   |—— store: 状态管理
|   |—— views: 路由页面组件
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
|—— .eslintrc.js eslint配置文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

主要文件简介

1. 主页：index.html

1. 1. 主页就是一个简单的html页面，这里id='app'，是为后面的设置vue作用域有关的。index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。

1. 文件࿱