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:

vue-cli3和vue-cli4:

• 项目启动
  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

而后, 在执行

3、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

看到下面的页面就成功了

四. vue脚手架安装时的含义及项目结构

as