13. Vue CLI脚手架
一. Vue CLI 介绍
1. 什么是Vue CLI?
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。
- CLI的全拼是Command-Line Interface, 命令行界面, 俗称脚手架
- 它是一个专门为单页面应用快速搭建繁杂的脚手架,可以轻松的创建新的应用程序,而且可用于自动生成vue和webpack的项目模板。
- 如果开发大型项目, 我们必然需要使用Vue CLI
- Vue CLI为我们提供了清晰的代码目录结构, 项目结构、部署， 热加载，单元测试等功能。可以提高开发者的工作效率。
2. Vue CLI依赖的环境
-
依赖NodeJS和NPM：
- 安装nodeJS, 默认会安装NPM, NodeJs的版本通常要在8.9以上。
- NPM的全称是： Node Package manager 。node包的管理和分发工具
- 国内npm有时很慢， 可以安装cpnm镜像， 这是一个淘宝npm镜像。
使用淘宝定制的cnpm命令行工具替代默认的npm工具 npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用cnpm来安装模块了
使用淘宝定制的cnpm命令行工具替代默认的npm工具 npm install -g cnpm --registry=https://registry.npm.taobao.org -
依赖webpack
- Vue.js官方脚手架工具使用了webpack模板， 对所有资源进行了压缩优化，在开发过程中提供了一套完整的功能， 提高开发效率
- webpack的全局安装
npm install webpack -g- 详细了解webpack可以参考文章----vue之webpack打包原理和用法详解
二. Vue CLI 脚手架安装
第一步： 安装NodeJs
官网下载nodejs: https://nodejs.org/en/
然后解压安装, 查看nodejs的版本
node -v
第二步： 安装全局webpack
webpack有全局安装和局部安装. 全局安装是所有服务共有. 局部安装是对某个项目单独安装webpack的版本. 全局webpaack和局部webpack版本可以不一样
npm install webpack -g
第三步： 安装局部本地webpack
安装局部webpack
npm install webpack --save-dev
第四步：安装Vue Cli 脚手架
这里需要说名Vue CLI版本的问题. 现在在用的Vue CLI的版本有2, 3, 4. 他们到底有什么区别呢?
vue2和vue3的差别很大, vue3和vue4的差别较小.下面详细说说他们的区别
1. vue2, vue3, vue4的区别
-
安装, 卸载
vue-cli2
全局安装：npm install -g vue-cli 或 cnpm install -g vue-cli
卸载：npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli
vue-cli3 和vue-cli4
全局安装：npm install -g @vue/cli@版本号 或 cnpm install -g @vue/cli@版本号
卸载：npm uninstall -g @vue/cli@版本号 或 cnpm uninstall -g @vue/cli@版本号
可以使用@指定版本号, 如果不指定版本号, 默认下载的是4的版本
-
项目创建
vue-cli2：
vue init webpack demo
vue-cli3和vue-cli4
vue create demo
-
项目结构
vue-cli2:
image
vue-cli3和vue-cli4:
image
-
项目启动
vue-cli2:
npm run dev
vue-cli3和vue-cli4
npm run serve
以上区别都是宏观表现上的不同, 具体到代码级别, 我们会后面继续说
因为现在vue2,3,4都有使用, 所以, 我们学的时候都会学习.
2 安装vue脚手架
vue-cli官网: https://cli.vuejs.org/,
执行安装命令:
npm install -g @vue/cli
查看安装的版本
vue -V 或者 vue --version
b)安装旧版本的vue
使用旧版本的 vue init 功能, 可以全局安装一个桥接工具
npm install -g @vue/cli-init
然后, 在执行
三、Vue CLI脚手架搭建项目
我们安装的时候, 安装vue4, 但我们的项目可能是老版本的项目. 或者我们想要创建老版本的项目. 我们可以在安装一个vue的桥接工具.
1. 搭建vue2的项目.
下面, 我们想要创建一个vue2的项目,
首先: 安装vue的桥接工具.
npm install -g @vue/cli-init
现在就可以创建vue2的项目了.
接下来创建项目
vue init webpack my-project
首次创建项目, 会去下载component组件. 这个下载过程很慢, 我们可以采用离线下载cli-component的方式.
2. 离线安装vue-cli
通过vue-cli工具命令vue init webpack vuedemo创建vue项目的时候报错，提示连接超时
vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443
解决办法有两个
a. 使用cnpm. 安装一个淘宝镜像
b. 下载离线组件包, 然后离线安装
这里重点说一下第二个方案:
第一步: github下载vue-cli component
https://github.com/vuejs-templates/webpack
如果打开github很慢, 可以试用github加速器打开
https://toolwa.com/github/
第二步: 下载之后的压缩包为webpack-版本号.zip，我们解压之后，需要更改目录名为webpack
然后在用户目录下创建一个文件夹: .vue-templates, 注意ve-templates前面的点(.)
我们再进行vue init webpack vuedemo命令的时候，需要带上参数--offline表示离线初始化
vue init webpack vuecli2 --offline
然后会提示有很多选项, 根据需要选择.
第三步: 然后运行命令启动项目即可.
npm run dev
看到下面的页面就成功了
image
四. vue脚手架安装时的含义及项目结构
as
