前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

上一篇文章《前端开发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、新建项目文件夹,打开命令行

vue create learn

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

运行命令如下图:

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

下边有三个选项,分别为:

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

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

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

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

2.3、选择配置文件类型

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

In dedicated config files – 独立配置文件

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

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

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

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

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

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

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

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

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

{
 "useTaobaoRegistry": true,
 "presets": {
  "qdr": {
   "useConfigFiles": true,
   "plugins": {
    "@vue/cli-plugin-babel": {}
    }
   }
 },
 "latestVersion": "4.5.13",
 "lastChecked": 1630908642473
}

 

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

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

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

对新建的项目结构截图,如下图:

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

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

四、项目运行

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

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

 

4.1、启动服务

npm run serve

4.2、main.js 内容改变了

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多了一个图形化界面管理工具,具体看看如何使用。

五、图形化界面管理工具

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

vue ui

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

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

5.1、启动项目、打包

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

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

build 是进行打包的。

5.2、项目配置

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

配置信息分别如下图:

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

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

5.3、依赖包安装

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

前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

 

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

npm install vue-router --save-dev

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

5.4、安装插件

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

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

Tags: