了解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快速构建
- 安装Node.js
- 下载服务器框架
- 实现一个静态服务器
项目结构
项目名称 | 作用 |
---|---|
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配置文件的基本内容。