项目脚手架VueCLI2&3

项目脚手架VueCLI2&3

VueCLI简介

VueCLI官方文档地址：https://cli.vuejs.org/zh/

VueCLI（Vue Command-Line Interface ）致力于快速构建基于webpack的vue初始化项目。Vue CLI具有以下核心功能

• Vue CLI封装了了完整的静态资源模块化打包方案

• Vue CLI提供了本地的热加载调试服务

• Vue CLI还提供了预处理，文件转译，自动化测试和静态检测等功能

• Vue CLI提供了快速开始零配置的原型开发

VueCLI与webpack之间的关系

• Vue CLI是基于webpack配置实现，所以Vue CLI依赖于webpack

• webpack依赖于NodeJS，所以使用Vue CLI之前要先安装好NodeJS（包含npm包管理工具）

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

VueCLI的核心封装内容都是使用webpack来实现的。很多朋友说：Vue并不难学，难学的是Webpack。我改进一下说法：Vue并不难学，webpack也不难学，难学的是前端工程化的思想和前端工程化的实践！而Vue CLI就是前端工程化的思想的集中体现。

VueCLI版本

VueCLI有多个版本，Vue-CLI2.X、Vue-CLI3.X、VUE-CLI4.X、VUE-CLI5.X。其中VUE-CL2.X推出后，对于初学者难点在于：webpack配置管理，对前端工程化理解不深入，难于配置。然后就推出了VUE-CLI3.X主要做了以下改进：

• 隐藏webpack配置，因为webpack配置绝大部分都是模板配置，每个项目的配置方法都差不多。在此基础上，提供了个性化修改入口。从而简化了项目目录结构，使配置文件更加清晰。

• 提供UI界面化配置的服务，使Vue-CLI3上手更加容易。

• Vue-CLI4.5以下对应的是VUE2

• Vue CLI 4.5以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2

VueCLI2快速搭建项目

要使用VUE-CLI2搭建项目，需要有如下配置：

• 需要安装NodeJS、版本大于等于8.9

• 安装NodeJS的包管理工具NPM

• VUE-CLI脚手架默认webpack作为模块化资源打包工具，因此需要安装

NodeJS安装教程这里不过多做介绍，webpack安装命令如下：

npm install webpack -g

安装Vue CLI2

全局安装VUE CLI2，打开命令行工具输入命令：

npm install -g vue-cli

安装完成之后，可以通过vue -V命令查看全局安装的版本

使用Vue CLI2初始化一个项目

在安装完成Vue CLI2及必备的工具包之后，我们就可以使用Vue CLI2初始化一个项目了。使用如下命令

vue init <template_name> <project_name>

• <template_name>表示模板名称

• <project_name>表示项目名称

VUE常用模板就是webpack，其他模板可自行创建学习。所以我们最终的项目初始化命令，如下：

vue init  webpack vuecli2demo

执行vue init命令之后，vue脚手架会让我们做一些填空、选择，根据我们的填写结果，选择初始化的组件及内容。

• Project name：填写项目名称，如果不填默认为命令行project_name

• Project description：填写对项目的描述，会体现在package.json中，后期可以修改

• Author：项目作者及邮箱，会从本机的git配置里面自动读取

• Vue build：Runtime Only或者Runtime+Compiler

• Install vue-router：是否安装vue-router前端路由，我们暂时没学到，不安装No

• Use ESlint to lint your code：是否使用ESlint做编码规范检查，检查不通过则编译不通过。如果你对ESLint编码规范比较熟悉，这里可以选择Yes

• Set up unit tests：是否初始化单元测试，这里暂时没学到，不安装No

• Set up e2e test with NightWatch：是否引入端到端的测试框架NightWatch，不安装No

• Should ……created：包管理工具是使用yarn还是npm？这里我们使用npm，如果你习惯使用yarn可以选择yarn

完成以上的选项之后，会自动为我们创建一个名称为vuecli2demo目录及项目文件（如果你在创建过程中，网络缓慢卡死，请先阅读第五小节）。项目目录结构如下，我们将在下一节内容中，对目录及目录的内容进行详解。

使用命令

 cd vuecli2demo
 npm run dev

访问http://localhost:8080，可以看到如下的界面，表示项目初始化成功

如何解决创建过程缓慢卡死的问题

由于众所周知的原因，可能在下载远程模板的时候出现缓慢、甚至卡死的情况。我们可以将npm包管理工具的下载源更换到国内的服务。先用npm get registry命令查看一下当前的源

npm get registry

将上面的源地址，替换为国内阿里npm源地址，如下：

npm config set registry http://registry.npmmirror.com

此时再用npm get registry命令查看一下当前的源，就是修改之后的国内的源地址了，下载更为的快速

VueCLI2目录文件详解

Vuecli2目录如下：

• build:build文件夹内文件是webpack资源模块化打包核心配置文件，包括生产环境资源打包、测试环境资源更新服务、npm和nodejs版本检查文件、vue文件处理等配置。

• config:config文件夹主要包含一些：生产和测试环境常用环境变量相关配置，比如静态资源打包路径、测试环境服务端口、host等信息。

• src:src文件夹主要存放资源代码文件，比如js文件、vue文件。src/assets用于存放静态资源文件，比如：css文件、图片文件等等。这是开发人员的核心目录

• static:static文件夹是webpack默认存放静态资源(css、image)的文件加，和src/assets不同的是：static文件夹内容在打包时会直接复制一个同名文件夹到dist文件夹中，不会参与webpack编译过程。

• dist:dist文件夹，图中是没有的，是资源模块化打包结果文件夹。在资源打包后自动创建、生产环境上线发布就是这个文件夹的内容

• node_modules:node_modules文件夹是第三方类库安装目录，通常不需要开发人员手动修改

• .babelrc：.babelrc是js文件编译兼容性配置文件

• package.json：package.json是前端项目配置文件，比如一些项目启动、打包脚本，第三方依赖库版本信息等都是在这个文件中。package.json.lock是npm安装具体第三方类库版本锁定信息，只查看不修改。

构建过程调用关系说明

build文件夹下面的文件主要是webpack相关的环境配置文件，和webpack打包、编译相关的配置选项及相关文件。

生产环境打包文件调用逻辑

• 运行npm run build命令调用build.js进行生产环境模块化资源文件打包

• build.js引用生产环境的变量配置文件中的变量-config/index.js和prod.env.js

• build.js根据webpack.prod.js文件以及生产环境config变量配置，进行生产环境模块化资源打包

• webpack.prod.conf.js整合webpack.base.js基础webapck配置，及vue-loader.conf.js处理.vue文件

测试环境服务启动及调试过程及逻辑

• 运行npm run dev命令调用webpack-dev-server命令(package.json脚本配置)，以webpack.dev.conf.js作为入口配置文件进行测试服务启动

• webpack.dev.conf.js引用测试环境的变量配置文件中的变量-config/index.js和dev.env.js

• webpack.dev.conf.js整合webpack.base.js基础webapck配置，及vue-loader.conf.js处理.vue文件

• utils.js主要在构建过程中的工具函数文件，主要的工具函数都是完成css文件的处理工作

src文件夹说明

• assets文件：用于存放静态资源，如css文件、image文件

• components文件夹：用来存放 .vue 单文件组件

• router文件夹：用来存放前端页面路由配置信息文件

• App.vue：项目的主组件，所有的vue组件都是该组件的子组件或后代组件

• main.js：项目全局文件入口

Vue CLI3.x的安装

同样安装Vue CLI3之前，我们需要安装好NodeJS，8.9或更高版本(推荐8.11.0+)。Vue CommandLine Interface在3.0版本改名为@vue/cli，所以我们全局安装命令，如下（可以在任意目录下面执行）：

npm install -g @vue/cli@3.9.3

查看vue版本

vue -V

使用Vue CLI3.X创建项目

---

这里将不再使用2.0版本的vue init命令，而是使用vue create命令，格式如下：

格式：vue create <project-name>
实例：vue create vuecli3-demo

创建一个叫做vuecli3-demo的项目,有两种方式

1. 选择default默认项目功能特性，还是手动选择个性化项目功能特性。默认的项目特性，会帮我们安装babel语法兼容和eslint语法检查功能。

2. 选择个性化功能特性，按down键并回车。进入到具体特性功能选择界面：

vue create vuecli3-manually-select

在这个界面，我们可以按Up、Down键上下移动，按空格键选择选项，选中之后，具体的功能特性前方会有星号标识。

• Babel 支持使用babel做转义。这个通常来说是必选的。

• TypeScript 支持使用 TypeScript 书写源码。如果使用到就选上。

• Progressive Web App (PWA) Support PWA 支持。我们还没学到，暂时不选。

• Router 支持 vue-router 。前端路由，我们还没学到，暂时不选。

• Vuex 支持 vuex 。我们还没学到，暂时不选。

• CSS Pre-processors 支持 CSS 预处理器。这个通常来说是必选项目。

• Linter / Formatter 支持代码风格检查和格式化。觉得语法检查过于严格，影响开发效率的可以不选。

• Unit Testing 支持单元测试。暂时不选。

• E2E Testing 支持 端到端测试。暂时不选。

选择完成之后回车，因为我们选择了CSS预处理器，所以需要具体告知。你习惯使用哪种CSS预处理器就选择哪一种。

这里的意思是选择一种格式化代码方式：我一般选择 ESLint + Prettier

这里的意思是问你什么时候进行代码规则检测，我一般会选择保存就检测，也就是Lint on Save

回车出现以下界面这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个

最后，CLI3.0会询问我们是否将当前配置保存，下次可以直接使用，而不是再次选择填写。

Vue CLI2.0与3.0目录差异

---

• 3.0版本没有static文件夹，取而代之的是public文件夹用于公开的静态资源访问。

• 3.0版本将index.html移动到public文件夹里面了

• 3.0版本将build和config文件夹配置移除了，实际相关的配置仍然存在，只不过隐藏起来了。被内置到@vue/cli-service

项目服务启动

使用npm run serve命令启动项目（注意这里不再使用2.0版本的vue run dev命令），访问图中的http地址

在浏览器中看到如下内容表示vue CLI3项目创建成功