前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）

2021-12-01 11:10:10 浏览数 (1)

上一篇文章《前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）》介绍了什么是脚手架，以及Vue-cli 2.x如何创建项目，创建的项目结构。这篇文章介绍 Vue-cli 3.x 如何构建项目？

一、Vue-cli 2 与 Vue-cli 3的区别

  1. vue-cli 3 是基于 webpack 4 打造的，vue-cli 2 还是 webpack 3。
  2. vue-cli 3 的设计原则是 “0配置”，移除 build 和 config 等配置目录。
  3. vue-cli 3 提供了 vue ui 命令，提供可视化配置，更加人性化。
  4. vuc-cli 3 移除 static 文件夹，新增 public 文件夹，index.httml 移入了 public 文件夹。

接下来看看，vue-cli 3 是如何创建项目的，以及可视化配置是怎么样的？

二、Vue CLI 3.x 初始化项目

2.1、新建项目文件夹，打开命令行

代码语言：javascript复制
vue create learn

运行以上命令，创建文件名为learn的vue项目。

运行命令如下图：

方框内提示我们发现有可用新版本脚手架，可以运行下边命令进行更新。

下边有三个选项，分别为：

  • Please pick a preset:(Use arrow keys) - 请选择一个已配置的关键字选项
  • default (babel,eslint) - 默认的，选babel和eslint包
  • Manually select features - 手动选择需要的特性

2.2、选择最后一个手动配置

选择之后，如上图。最前边的括号内有个绿色星号，表示被选中，我们可以使用上下箭头进行切换，点击空格进行选中和取消。

根据需要，选择完成之后，点击回车继续向下。

2.3、选择配置文件类型

In dedicated config files - 独立配置文件

In package.json - 配置信息放入 package.json文件

选择 独立配置文件之后，继续向下。

2.4、是否保存本次创建项目特性作为配置项？

提示后携带(y/n)，输入y表示确定保存配置，n表示取消保存。

我们选择 y 保存之后，以后创建项目就不需要选择这么多了，一键就可以生成项目。

紧接着需要配置键值，下次我们可以通过键值就能看到，比如设置一个前端人的简写：qdr。回车之后项目就开始创建了。

2.5、如何查看之前保存的配置选项，如果不需要了我们如何删除呢？

再次创建项目的时候，第一个选项就多了一项，如图：

第一个 “qdr” 是我们上次创建项目保存的配置信息。如果我们不想要了，或者保存的多了之后，把不常用的就需要删除掉，可以进入：C/user/Administrator 查找 .vuerc 文件。

rc = run command,vuerc也就是vue的运行命令，它的内容如下：

代码语言：javascript复制
{
 "useTaobaoRegistry": true,
 "presets": {
  "qdr": {
   "useConfigFiles": true,
   "plugins": {
    "@vue/cli-plugin-babel": {}
    }
   }
 },
 "latestVersion": "4.5.13",
 "lastChecked": 1630908642473
}

我们只需要删除 presets 中，不想要的配置项就好了，再运行命令，命令中就没有了。

如此，我们的vue-cli 3的项目就创建完成了。

三、Vue-cli 3 项目结构介绍

对新建的项目结构截图，如下图：

它们的文件以及对应的意义如下：

  • node_modules - 项目需要用的node包
  • public - 相当于static 文件夹，原样输出
  • src - 开发资源
  • .browserslistrc - 浏览器相关配置
  • .gitignore - 设置提交 git 的忽略信息
  • babel.config.js - 对 babel 配置信息
  • package-lock.json - 记录依赖包的真实版本
  • package.json - 配置文件
  • README.md - 使用介绍

四、项目运行

打开 package.json 文件，查找 scripts 内运行脚本，我们发现 server 。

代码语言：javascript复制
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

4.1、启动服务

代码语言：javascript复制
npm run serve

4.2、main.js 内容改变了

代码语言：javascript复制
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

我们发现之前的 el:'#app' 丢失了，而后边又多了 $mount("#app")。

el: "#app" , 是挂载实例的

$mount("#app") 功能是一样的，所以替换下与之前的vue-cli使用runtime-only是一致的。

运行，打包配置与之前都是差不多，最重要的是vue-cli 3多了一个图形化界面管理工具，具体看看如何使用。

五、图形化界面管理工具

使用命令，启动我们的图形化界面管理服务，使用：

代码语言：javascript复制
vue ui

启动之后，提示我们服务地址为：http://localhost:8000/

第一次进入之后，没有选择的项目，所以提示我们先导入项目。

5.1、启动项目、打包

选择一个项目，进行导入之后，界面自动切换

选择任务 -> serve -> 点击开始运行，就可以看到项目的具体运行情况，文件大小、包的依赖、运行时间，服务地址等等。

build 是进行打包的。

5.2、项目配置

之前修改配置信息的时候，我们需要在代码的配置文件中修改，vue-cli 3提供的图形化界面管理工具，可以直接在页面上修改配置信息。

配置信息分别如下图：

特殊说明下：启动运行时编译

我们上篇文章介绍 Runtime compiler 与 Runtime-only区别，启动运行时编译 其实就是选择Runtime-only 模式。

5.3、依赖包安装

我们选择依赖选项，就会展示项目当前的运行依赖和开发依赖。如图所示：

之前我们需要安装依赖的时候，运行命令去安装，如：我们需要安装vue-router的时候，需要使用命令：

代码语言：javascript复制
npm install vue-router --save-dev

但是现在就不需要了，只需要点击 “安装依赖”，搜索 vue-router，选择运行依赖或开发依赖，然后点击安装就可以了，不需要我们记住命令。

5.4、安装插件

插件与依赖包有些类型，直接点击添加，安装就可以了。

图形化界面管理工具使用起来还是很方便的，推荐使用哦！小编今日分享就要介绍了，喜欢的可以点赞关注不迷路，感谢支持！

vue.js javascript babel.js

0 人点赞