前言

若文章有误，欢迎读者留言反馈

之前在vue2搭建项目中，已经提到过一点Vue CLI，而它本身是基于webpack开发的【webpack是基于JavaScript开发的】，这一篇我将更加详细的介绍Vue CLI

Vue CLI脚手架

什么是Vue脚手架?

  • 前面已经学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成所有的webpack配置，这样会让开发的效率会大大的降低;
  • 所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架;
  • 脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架;

Vue的脚手架就是Vue CLI:

  • CLI是Command-Line Interface，翻译为命令行界面;
  • 我们可以通过CLI选择项目的配置和创建出我们的项目;
  • Vue CLI已经内置了webpack相关的配置，我们不需要从零来配置;

Vue CLI安装和使用

以下操作默认你电脑已经有node环境了，因为我们需要使用npm工具，没有安装node环境，可以去安装一下，后面我也会写一篇node安装的文章

  1. 安装Vue CLI(目前最新的版本是v5.0.8):
    • 我们是进行全局安装【在该电脑的任何位置都可以使用vue命令】，这样在任何时候都可以通过vue的命令来创建项目;
      1
      2
      # 打开你的CMD窗口，或者vscode终端输入如下命令
      npm install @vue/cli -g
  2. 升级Vue CLI:
    • 如果是比较旧的版本，可以通过下面的命令来升级
      1
      2
      # 打开你的CMD窗口，或者vscode终端输入如下命令
      npm update @vue/cli -g
  3. 通过Vue的命令来创建项目
    1
    vue create 项目的名称

注意一个细节，我们安装的包是@vue/cli而使用的命令是vue，这两个是没有任何关系的，其实在我们安装@vue/cli的包里面有个package.json，里面有个配置选项bin: { 'vue': 'bin/xxx.js' }，其中配置的是vue所以我们使用的命令名称也就是vue

使用Vue CLI脚手架创建vue项目

这里的话，我先创建一个learn_VueCLI文件夹来存放咱们脚手架创建的项目，然后在它这个目录下打开CMD窗口或者vscode终端，输入如下命令来创建一个项目

1
vue create vuecli_demo

输入后回车，会出现一个选择界面如下图：
10186

  • 第一个选项是它会默认帮你创建一个vue3项目，并且包含babel和eslint
  • 第二个选项是它会默认帮你创建一个vue2项目，并且包含babel和eslint
  • 第三个选项是手动选择特性，哪些需要哪些不需要用户自己选择

按上下方向键可以进行选择，这里我们选择第三个，回车

接着出现如下第二个界面：
10187

这个是让你选择特性了，当然它其中也说了，按住空格是选择【括号内就会带上星号】再按一下就会取消选择，按回车进行下一步

  • 第一个让你选择Babel，让ES6代码转为ES5代码【这个我们需要用，选上】
  • 第二个TypeScript【这个也可以选上】
  • 第三个Progressive Web App (PWA) Support即PWA，主要是给应用程序做很多缓存之类的东西【应用比较少，一般不选上】
  • 第四个Router是路由【开发项目基本要选上，这里我只是创建临时项目，我就不选上了】
  • 第五个Vuex是状态管理【开发项目基本要选上，这里我只是创建临时项目，我就不选上了】
  • 第六个CSS Pre-processors是css预处理器【如果你想要使用less或者sass、stylus，就选上，它会帮你配置好，开发项目基本要选上，这里我只是创建临时项目，我就不选上了】
  • 第七个Linter / Formatter是对代码格式做检测用的【开发项目基本要选上，这里我只是创建临时项目，我就不选上了】
  • 第八个Unit Testing是单元测试【这个根据公司，有些公司可能会让你写测试用例，那么你就选上，这里我只是创建临时项目，我就不选上了】
  • 第九个E2E Testing是端到端测试即end2end【这个测试我们现在基本上也不写这个东西，不用选上】

最后将选择好后，进行回车进入下一步
出现如下第三个选择界面：
10188

这个是让我们选择vue的版本，按住上下方向键可以进行选择，这里我们选择3.x即vue3版本，然后回车
出现如下第四个选择界面：
10189
这个是让我们选择像Babel、ESlint和etc是生成单独、分离的配置文件，还是放到package.json文件里面，放到package.json的话，会让这个文件过大，不方便管理，所以我们一般选择In dedicated config files然后回车

出现如下第五个选择界面：
10190
大概意思是把刚才我们的选择是否保存为预设，下一次选择的时候就不需要刚才这么多步骤了，这个选择就看个人了
这里我们可以试一下它这个保存为预设，输入y，然后回车
它会让我们起一个名字【Save preset as】，随便起一个吧，就叫cake，输完后回车，然后就会帮我们创建了

这里我们来使用一下刚刚保存的那个预设，再开一个终端【注意也是在刚刚那个目录下】，重新创建第二个新项目

1
vue create abc

敲完命令回车，出现如下选择界面：
10191

上面多了一个选项，多的那个就是我们刚刚保存的预设，我们已经创建一个项目了，直接按住CTRL + C把它取消掉

项目的目录结构

这里我放在一张图里面了
10192

关于浏览器适配的这个文件，.browserslistrc文件里的内容一般使用默认的，这里我也解释一下：

1
2
3
4
> 1%
last 2 versions
not dead
not ie 11

  • > 1%是指市场份额
  • last 2 versions是指最新的两个版本
  • not dead是指还在维护
  • not ie 11是指非ie 11浏览器

项目运行

打开package.json文件，我们可以查看其中的脚本，之前学习过webpack这里看一下就能知道运行的命令了

1
2
3
4
5
6
7
8
{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  ...
}

首先在项目根目录打开终端，千万别打开错终端了，然后运行如下命令即可

1
npm run serve

浏览器运行正常，并且包含了热更新

运行一下打包

1
npm run build

打包后这个dist目录结构和我们之前学习webpack打包目录结构非常相似

vue脚手架npm run serve

当我们去执行npm run serve它执行的是vue-cli-service serve

之前学习webpack的时候，执行的是webpack serve命令，它其实会去node_modules/.bin目录下去找webpack，执行的是这个webpack文件里面的代码，而这里是vue-cli-service，所以它也是去node_modules/.bin目录下去找vue-cli-service，执行它里面的代码【它里面有三个这样的文件，没有后缀名的是对应unix，.cmd后缀名的是cmd窗口下的执行脚本命令，.ps后缀名是对应powershell你执行的脚本命令】
这里面的代码有很多符号，比如我打开一个vue-cli-service.cmd文件里面有如下代码

1
"%_prog%"  "%dp0%\..\@vue\cli-service\bin\vue-cli-service.js" %*

其实是个软链接【符号链接，操作系统帮忙做的事】，当准备执行这个文件时候，它会去找到它真实代码所在的位置，然后去执行它的真实代码，上面路径中有个@vue，在node_modules下我们可以找到这个文件夹，它里面有个cli-service，它执行的是这个文件，为什么说执行的是这个文件呢？把它里面package.json文件打开，里面有个"bin": {"vue-cli-service": "bin/vue-cli-service.js"},，所以这个vue-cli-service就是命令名称，相当于执行的是后面那个文件
可能有人会有疑问？
脚手架那个vue命令名称能在终端使用，而这个vue-cli-service却无法在终端直接使用，主要是因为vue-cli-service是局部安装，想要执行它，得用一些让它去node_modules下去找的方法，如npx、package.json里的脚本，Vue CLI是全局安装。