Vue CLI 的使用过程
什么是Vue CLI
- 如果你只是简单写几个 Vue 的
Demo程序，那么你不需要Vue CLI。
- 如果在
开发大型项目，那么就需要并且必然需要使用Vue CLI。
- 使用 Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
- 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
- CLI是什么意思？
- CLI 是
Command-Line Interface，翻译为命令行界面，但是俗称脚手架。 - Vue CLI 是一个官方发布 vue.js 项目脚手架。
- 使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。
- 脚手架长什么样子？
Vue CLI 使用前提
node
- Vue CLI 的使用前提是 Node 。
- 安装NodeJS
- 可以直接在官方网站中下载安装。
- 网址：nodejs.cn/download/
- 检测安装的版本
- 默认情况下自动安装 Node 和 NPM
- Node 环境要求
8.9以上或者更高版本。
- 什么是 NPM 呢？
- NPM 的全称是
Node Package Manager。 - 是一个 NodeJS包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。
- 后续会使用 NPM 来安装一些开发过程中依赖包。
cnpm 安装
- 由于国内直接使用 npm 的官方镜像是非常慢的，所以推荐使用淘宝 NPM 镜像。
- 可以使用淘宝定制的 cnpm （gzip 压缩支持）命令行工具代替默认的 npm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
cnpm install [name]
Webpack
- Vue.js 官方脚手架工具就使用了 webpack 模板。
- 对所有的资源会压缩等优化操作。
- 它在开发过程中提供了一套完整的功能，能够使开发过程变得高效。
webpack 的全局安装
npm install webpack -g
Vue CLI 的使用
安装
- 安装 Vue 脚手架
npm install -g @vue/cli。- 也可以使用
yarn global add @vue/cli。 - 一般情况下使用全局安装就可以了。
- 安装完成之后，可以使用
vue --wersion来检查安装的脚手架版本是否正确（3.x）。
- 注意：上面安装的是 Vue CLI3 的版本，如果需要想按照 Vue CLI2 的方式初始化项目是不可以的。
- 拉取 2.x 模板（旧版本）
- Vue CLI3 和旧版使用了相同的
vue命令，所以 Vue CLI2（vue-cli）被覆盖了。如果仍然想要使用旧版本的vue init功能，可以安装一个桥接工具。
npm install -g @vue/cli-init # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
初始化项目
- Vue CLI2 初始化项目
vue init webpack my-project
Vue CLI3 初始化项目
vue creat my-project
配置项目
? Project name // 项目名称 ? Project description // 项目描述 ? Author // 作者 // 选择使用 Runtime + Compiler 还是 Runtime-only ? Vue build (Use arrow keys) Runtime + Compiler ... Runtime-only ...
