一、Vue CLI脚手架

(一)简介

脚手架其实是建筑工程中的一个概念,在我们软件工程中也会将一些帮助我们 搭建项目的工具 称之为脚手架
  • CLI是Command-Line Interface,翻译为命令行界面;
  • 我们可以通过CLI选择项目的配置和创建出我们的项目;
  • Vue CLI已经内置了webpack相关的配置,我们不需要从零来配置;
 

(二)相关操作

全局安装:npm install @vue/cli -g
升级Vue CLI:npm update @vue/cli -g
通过Vue的命令来创建项目:vue create projectName
 
手动创建项目时备注:
Progressive Web App(PWA)Support:该选项是渐进式Web开发,用于缓存
 

(三)Vue CLI原理

 
notion image
 

1. 命令运行实现

package.json 中的 scripts 中的命令 serve 或 build 中我们可以看到如下vue-cli-service
notion image
 
该命令对应 node_modules 中的 .bin 中的 vue-cli-service,该文件中可见
notion image
根据蓝色框中的路径我们可以找到 vue-cli-serve.js,从该代码中从 Service.js 中主要执行两个关键步骤,1️⃣ Service constructor,2️⃣ run方法。
 
其中,run方法中name参数是命令,即serve / build;然后通过 let command = this.commands[name] 获取命令相关代码。然后通过 const { fn } = command 解构 command对象 里面的fn函数,并执行。
 
⭐ command对象详解
实际上,一开始command对象是空的,但是会从构造器中调用 resolvePlugins 方法
 
此外,在 run 函数中有一行初始化代码,用于加载环境变量
 
以serve命令为例,我们在./build下可以看到文件 serve.js
notion image
而且PluginAPI源自于PluginAPI.js,且其中包含registerCommand函数,其设置如下图所示
notion image
 
回到Service.js中的run函数,在该函数最后代码,fn实际上即所选命令所对应的函数,见上图 async function serve(args)
 

2. Vue CLI实现Webpack配置

大致流程如下
resolveWebpackConfig 来源于 PluginAPI.js,而 PluginAPI.js 又源自于 Service.js。
 
个人配置部分
此外,由以下代码可以得知,我们可以从项目根目录新建vue.config.js
 
其他部分配置
notion image
 

二、Vite

注意:Vite本身也是依赖Node的,所以也需要安装好Node环境,并且Vite要求Node版本是大于12版本。其通常用于创建本地服务器Connect,并把代码转化为ES6的js代码。
结构
它主要由两部分组成:
一个开发服务器,它基于原生ES模块提供了丰富的内建功能,HMR的速度非常快速;
一套构建指令,它使用rollup打开我们的代码,并且它是预配置的,可以输出生成环境的优化过的静态资源;
相比于Webpack而言,Vite构建速度快(使用ESBuild)、性能更高,部分功能已经自动实现例如路径自动修正、TS,但是CSS处理中less等仍需要 安装 postCss。
 

(一)CSS配置

npm install postcss postcss-preset-env -D
 

(二)Vue配置

vite对vue提供第一优先级支持:
Vue 3 单文件组件支持:@vitejs/plugin-vue
Vue 3 JSX 支持:@vitejs/plugin-vue-jsx
Vue 2 支持:underfin/vite-plugin-vue2
 
配置如下:
 

(三)Vite相关配置

1. vite预打包

当第一次执行npx vite命令时,在node_module文件夹下,.vite文件夹中会对部分依赖文件进行预打包,提高运行性能。

2. vite打包

npx vite build

3. vite预览

npx vite review

4. 命令行优化

 

(四)vite脚手架

安装命令如下键入:
npm install @vitejs/create-app -gcreate-app
也可以将两步合成一步,但是不建议 npm init @vitejs/app
 
 
notion image

 
WebpackVue3组件化开发
Loading...
😈Zabanya
😈Zabanya
一名喜欢瞎折腾选手
公告
 
部分教程类文章篇幅过大,可能会导致加载时间稍微偏长,非常感谢您的耐心等待 ~ 🎉