2.1 Vue 初始Vue-cli

了解Vue-cli

• vue-cli是vue.js的脚手架,是一个基于Vue.js进行快速开发的完整系统,用于自动生成vue.js + webpack的项目模板,分为两种:
  • vue init webpack-simple 项目名
  • vue init webpack 项目名
• vue-cli可以快速构建单页应用,但涉及内容很多,如 webpack、npm、nodejs等。

Vue CLI 系统包含的组件：

• CLI 是一个全局安装的npm包,提供了终端里的vue命令
• CLI服务 它是一个npm包,局部安装在每个@vue/cli创建的项目中。
• CLI插件 向你的Vue项目提供可选功能的npm包,例如Babel/TypeScript转译、ESLint集成、单元测试和end-to-end测试等

基于Vue-cli快速构建

1. 安装Node.js
2. 下载服务器框架
3. 实现一个静态服务器

项目结构

项目名称	作用
build	webpack相关配置文件，使用 npm run * 时其实执行的就是这里的文件
config	配置文件，执行文件需要的配置信息
src	资源文件，所有的组件以及资源、页面入口文件等
static	静态文件目录
test	测试文件目录
.babelrc	babel配置文件，比如可以解析高版本的js代码（ES6、ES7、ES8…）
.editorconfig	规定编辑器有哪些要求，比如缩进两个空格还是四个空格
.eslintignore	自动过滤一些不需要代码检测的文件
.eslintrc.js	配置ES语法检测
.gitignore	配置git可忽略的文件
index.html	入口文件
package.json	node配置文件，对项目的描述
README.md	对项目的简单介绍

webpack与Vue-cli

Webpack：前端资源模块化管理和打包工具

• 可以将很多松散的模块,按依赖和规则打包成符合生产环境部署的前端资源;
• 可以将按需加载的模块进行代码分割,等实际需要的时候再异步加载。

Vue-cli：脚手架工具

• 用配置好的模板迅速搭建项目工程,省去自己配置 webpack配置文件的基本内容。