关于Vue-CLI的那些事儿

Vue CLI是基于Vue.js进行快速发展的完整系统，提供了：

• 交互式的项目脚手架
• 实现零配件的原型开发
• 图形化的创建和管理项目的界面

基本框架的构建：

.
├── build/                      # webpack 配置文件
│   └── ...
├── config/
│   ├── index.js                # 项目核心配置
│   └── ...
├── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 模块资源 (会被webpack处理)
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .eslintrc.js                # eslint 配置文件
├── index.html                  # index.html 入口模板文件
└── package.json                # 运行的脚本与相关依赖

一般来说的话，我们在src下写代码，所以主要关注的还是src文件夹

index.html -> 项目的主页，和其他的html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件填充。

main.js -> 入口文件，主要是引入vue框架、根组件及路由设置，并且定义vue实例

App.vue -> 根组件，分为三个模块，一般来说，配置路由引入其他的组件

router -> 路由配置，在路由下面有一个index.js的路由配置文件，负责路由的调用和配置

首先引入vue-router路由依赖(import Router from 'vue-router') 使用路由依赖(Vue.use(Router))

然后引入页面组件，import HelloWorld from '@/components/HelloWorld'

最后就是路由的配置了，主要就是配置组件的路径、名字、和组件的名称。一般来说所有的组件的路由都是在这里配置，包括子组件

HelloWorld.vue -> 页面组件，起初本页面是在components下的，但是建议还是将一般的页面组件放置在一个view的文件下(同时也是src的子文件)

个人理解：就是一个Vue的项目展开之后，首先就是进入入口文件main.js然后呢，加载index.html主页文件，之后就是App.vue组件了，创建了vue实例，然后呢就是vue的生命周期了。

关于Vue-CLI的学习目前就是这些了，到之后技术增长继续吧