【 Vue全家桶 · Vue CLI（一）】快速入门Vue.js标准开发工具 —— Vue CLI 4.0

一. webpack开发 VS CLI开发

1.1 webpack开发的痛点

webpack无疑是最优秀的项目构建工具，大而全的功能确实能满足我们绝大部分的需求，但它同样存在问题：

• ① 项目整体目录结构仍需要我们手动创建；
  每次项目都需要我们手动创建目录结构，这种简单低级的劳动，完全可以用更高效的模板代替。

• ② 绝大部分loader和plugins都需要安装并配置；
  通常稍复杂一些的项目里配置webpack文件往往就会花费很多时间。对于我们初学者来说高度可配置的webpack可谓是不太友好，很难写出定义良好，性能优化的配置。

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:__dirname + '/src/js/main.js',
    output:{
        path:__dirname + '/dist',
        filename:'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归zevin所有'),
        new HtmlWebpackPlugin({
            template:'index.html'
        })
    ]
}

俗话说的好，写完一个 webpack.config.js 你的项目就做完一半了，哈哈 … 为了解决webpack配置的痛点，各类CLI工具应运而生。

1.2 CLI工具

CLI，全称是Command-Line Interface，即命令行工具，一种通过命令行来交互式的快速搭建项目结构的工具或者应用。 例如Vue CLI、Parcel、create-react-app、dva-cli等都是CLI工具。

通常他们都具有以下功能点：

• 一键生成项目架构模板；
• 提供一套默认的webpack配置；
• 构建打包功能；

目前在网页，APP，游戏，小程序等各类开发中，使用CLI工具已经成为了行业共识。借助CLI工具开发的优势在于：

• 减少了低级重复劳动；
• 提高了开发效率；
• 使开发工作流程（develop workflow）更加规范；

二. Vue.js标准开发工具 —— Vue CLI 4.0

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是我们进行Vue开发的必备工具。

👉 Vue CLI官方文档
👉 Vue源码

Vue CLI 具体由多个独立的部分组成，具体可见源码。这里主要介绍其中四个：

2.1 交互式的项目脚手架（@vue/cli）

CLI (@vue/cli) 是Vue CLI 的主包，需要通过 npm 全局安装：

npm install -g @vue/cli

是我们使用Vue CLI 的基础，它提供了终端里的 vue 命令。上述命令安装完成后，可在终端中输入vue查看可执行的所有命令：

比如我们以后会经常用到的（本处仅罗列，具体后续章节再介绍）：

命令	作用
vue -V	查看Vue CLI 的版本号
vue create	快速搭建一个新项目
vue serve	构建新想法的原型
vue ui	在浏览器打开Vue CLI的图形化界面

2.2 运行时开发环境依赖（@vue/cli-service）

（这一小节内容涉及到Vue项目创建完成之后的内容，小白可 跳过2.2节 ）

CLI 服务 (@vue/cli-service) 是一个运行时的开发环境依赖，当我们使用如下命令：

vue create projectName

创建新的Vue项目时，都会让我们选择需要的插件后继续帮我们下载依赖 —— node_modules文件夹内容。

或者我们在拿到一个Vue项目时（一般是没有依赖文件的），就需要我们自己安装依赖。具体用到的命令为：

npm init

这样会帮你下载安装所有的依赖。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

2.2.1 其它 CLI 插件的核心服务

node_modules文件夹中包含了我们常用的各种依赖，当然也包括我们在创建项目时，选装的其他Vue生态工具（Vue Router / Vuex）或者其他插件依赖。

2.2.2 默认的 webpack 配置方案

Vue CLI 是基于webpack构建的Vue手脚架工具，并且Vue CLI官方给我们提供了一套默认的可满足大众开发需求的webpack配置方案，不再需要我们自己去手动配置。虽然如此，但是我们仍然有途径去修改webpack配置：

在Vue CLI 3.0 之前还可以看到自动生成的webpack.config.js配置文件，此时的配置方法和官方一样。但是到了Vue CLI 3.0及以上版本中，就不再默认生成了。

修改为用户可以选择创建webpack.config.js的拓展文件 —— vue.config.js。而且Vue 还对webpack配置做了自己的定制，增加了一些定制属性，配置的方法跟webpack官方提供的方法有了一些不同。

---

❀ 拓展一下❀

更多有关VueCLI 4.0 中webpack的属性配置问题请看系列：

Vue CLI 4.0 webpack属性讲解以及创建vue.config.js

---

实际上，VueCLI 3.0及以上构建的项目是有webpack.config.js的，只是被Vue隐藏起来了，里面是Vue CLI的默认webpack配置。而vue.config.js是vue 对webpack.config.js的扩展文件。最终编译时，vue.config.js会被合并到webpack.config.js中。

当然我们也能查看当前项目的实际webpack配置，终端命令为：

vue inspect

更推荐大家把webpack配置存储到一个实际的文件中，这样查看的更方便。比如放到myWebpack.js文件中：

vue inspect > myWebpack.js

哇咔咔！足足有1300行配置代码！看来写出一个针对绝大部分应用优化过的内部的 webpack 配置确实很有难度，官方大大辛苦啦 ~ 🐶

2.2.3 项目内部的 vue-cli-service 命令

具体的 vue-cli-service 命令有三个：

• inspect —— 查看当前项目的webpack配置；
• serve —— 启动当前Vue项目；
• build —— 打包当前Vue项目；

第一个inspect命令已经给大家演示过了，就直说后两个啦。他俩实际上定义在项目中的npm配置文件package.json文件中。

执行serve命令就相当于是执行了vue-cli-service serve，build同理。其实我们也可以修改命令的关键字，比如之后使用Vue框架vue-element-admin的时候，对应的启动命令关键字就为dev。

接下来就给大家演示一下这两句命令的终端执行效果：

① build 打包命令：

npm run build

打包出来的文件默认放在dist文件夹下，和原生webpack的操作一致：

② serve 打包命令：

npm run serve

启动成功后，会自动帮我们部署在本地的8080端口；如果配置了线上IP，那么也会同时部署在线上。

可能也会有小伙伴和我一样，本地部署不是8080，而是8081或者8082，这是因为我本地的8080端口被默认自动开启的apache占用了。以此类推，他会部署在你未被其他进程占用的端口。

我们去浏览器打开这个本地端口地址：你会看到这样的Vue默认页面！

2.3 CLI 插件（@vue/cli-plugin）

CLI 插件是Vue 项目中的可选项，通过 npm 局部安装。 Vue中的插件功能特别丰富，对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

插件可以在项目创建过程中选择，或在后期加入到项目中。

2.4 图形化界面（@vue/cli-ui）

图形化界面（@vue/cli-ui）是Vue CLI中的一大特色，让开发者可以通过配套的图形化界面来创建、开发和管理Vue项目。

它的启动命令为：

vue ui

在你需要创建项目的目录下，终端输入该命令，Vue框架就会自动在你的默认浏览器中打开这套 GUI 图形化界面：

---

写在最后

下一篇中将详细介绍使用Vue CLI创建项目的细节，有关GUI 图形化界面的具体操作就放到下下篇吧，加油！👊👊👊

—— zevin 于 2020.9.14 记

每一个不曾起舞的日子,都是对生命的辜负!

—— 尼采

---

兜兜转转，还是放不下你。

【 Vue全家桶 · Vue CLI（二）】使用 Vue CLI 4.0 快速构建你的第一个Vue项目（2020.10最新版）

—— zevin 于 2020.10.13 更新

---