使用Vue-cli搭建项目与目录详解
1、介绍
vue-cli这个构建工具大大降低了webpack的使用难度，支持热重载，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。
2、全局安装vue-cli
npm install vue-cli -g
验证是否安装成功
vue -V3
3、初始化项目，生成项目模板
（1）查看帮助
$ vue --help Usage: vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: init generate a new project from a template list list available official templates build prototype a new project create (for v3 warning only) help [cmd] display help for [cmd]
（2）查看官方提供模板
vue-cli提供了几个模板给开发者用于不同类型的项目
$ vue list Available official templates: ★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ★ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ★ pwa - PWA template for vue-cli based on the webpack template ★ simple - The simplest possible Vue setup in a single HTML file ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
★browserify ★ browserify-simple这两个模板已过时，
★pwa主要是做移动端
一般我们用★webpack和★webpack-simple的比较多
（3）vue-cil构建项目
vue init webpack your-project
? Project description 输入项目描述
? Author 作者
? Vue build 打包方式，回车就好了
? Install vue-router? 选择 Y 使用 vue-router，输入 N 不使用
? Use ESLint to lint your code? 代码规范，推荐 N
? Setup unit tests with Karma + Mocha? 单元测试，推荐 N
? Setup e2e tests with Nightwatch? E2E测试，N
（4）框架目录结构
├── README.md // 项目说明文档 ├── node_modules // 依赖包目录 ├── build // webpack相关配置文件（都已配置好，一般无需再配置） │ ├── build.js //生成环境构建 │ ├── check-versions.js //版本检查（node，npm） │ ├── dev-client.js //开发服务器热重载 （实现页面的自动刷新） │ ├── dev-server.js //构建本地服务器（npm run dev） │ ├── utils.js // 构建相关工具 │ ├── vue-loader.conf.js //csss 加载器配置 │ ├── webpack.base.conf.js //webpack基础配置 │ ├── webpack.dev.conf.js // webpack开发环境配置 │ └── webpack.prod.conf.js //webpack生产环境配置 ├── config // vue基本配置文件（可配置监听端口，打包输出等） │ ├── dev.env.js // 项目开发环境配置 │ ├── index.js // 项目主要配置（包括监听端口、打包路径等） │ └── prod.env.js // 生产环境配置 ├── index.html // 项目入口文件 ├── package-lock.json // npm5 新增文件，优化性能 ├── package.json // 项目依赖包配置文件
├── src // 项目核心文件（存放我们编写的源码文件） │ ├── App.vue // 根组件
│ ├── assets // 静态资源（样式类文件、如css，less，和一些外部的js文件） │ │ └── css //样式
│ │ └── font //字体
│ │ └── images //图片
│ ├── components // 组件目录 │ │ └── Hello.vue // 测试组件 │ ├── main.js // 入口js文件 │ └── router // 路由配置文件夹 │ └── index.js // 路由配置文件 └── static // 静态资源目录（一般存放图片类）
assets和static文件夹的区别
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 <img src="./logo.png">
和 background: url(./logo.png)中，"./logo.png" 是相对的资源路径，将由Webpack解析为模块依赖。
static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。
任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。
在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。
