一、组件化开发

(一)组件命名方式

短横线分隔符:'my-component-name'
驼峰标识符:'MyComponentName'
 

(二)注册全局组件

使用 app.component() 方法注册全局组件
 

二、webpack 基础

(一)安装方式

全局安装webpack:npm install webpack webpack-cli -g 局部安装webpack:npm init 👉 npm install webpack --save-dev
--save-dev 缩写为 -D,意思是开发依赖、不加 -D 即生产依赖;
 
⚠️ 打包时使用局部webpack
1️⃣ npx webpack --entry ./src/main.js --output-path ./build
2️⃣ 在package.json 中 scripts属性下加入 "build": "webpack --config main.js" (然后具体配置如下webpack.config.js) ✅
 
 

(二)常用资源

1. CSS loader和其他样式

npm install css-loader -D
使用方式:
1、内联方式:import "css-loader!+路径" ❌不建议
2、模块配置:webpack.config.js中加入module模块 ✅
 
 

2. PostCSS(不同浏览器适应)【独立工具】

npm install postcss postcss-cli postcss-loader-D
npm install autoprefixer -D
目前通常由 postcss-preset-env 取代 autoprefixer ⭕
npx postcss --use autoprefixer -o end.css【输出文件名】  ./src/css/style.css【输入文件名】
 

3. file-loader × url-loader

🔻 file-loader
🛩️
备注:图片资源需要用import导入。例如:import zzhnImage form '../img/zznh.png'
 
🔻 url-loader
将较小的文件转化成base64URI(对高并发性能优化)
安装:npm install url-loader -D
 

4. asset module type(Webpack 5)

webpack5中用以 代替 上述file-loader 和 url-loader
notion image
 

5. 字体打包

 

6. 插件Plugin

6.1 每次打包删除dist文件插件
安装npm install clean-webpack-plugin -D
使用
6.2 对 HTML进行打包
安装npm install html-webpack-plugin -D
使用
 
6.3 CopyWebpackPlugin
在vue的打包过程中,如果我们将一些文件放到public的目录下,那么这个目录会被复制到dist文件夹中。这个复制的功能,我们可以使用CopyWebpackPlugin来完成
安装npm install copy-webpack-plugin -D
使用
 

7. Babel【独立工具】

Babel可以视为编译器,例如将ES6代码转换为ES5
notion image
notion image
安装npm install @babel/cli @babel/core -D
使用
npx babel xxx.js --out-dir 文件夹名
npx babel xxx.js --out-file 文件名
 
通常而言,一个babal不同语法的转换需要不同的插件,所以当转换内容过多,推介使用预设,其 安装 如下:npm install @babel/present-env -D
使用npx babel xxx.js --out-file xxx.js --presets=@babel/preset-env
 
Webpack中使用
而且,可以将babel抽取到一个文件夹中babel.config.js
 

8. vue相关插件单独安装

安装:
 
vue版本分为两类:其一runtime+compiler;其二runtime-only(默认)
notion image
notion image
 
备注含有runtime则不包含compiler,不能对template解析;含有prod是生产版本,代码有压缩
编译时需要安装以下插件:npm install @vue/compiler-sfc -D
使用:Webpack.config.js
 
Bundler Build Feature Flags
其中有两个可选属性:
1️⃣ __VUE_OPTIONS_API__:对Vue2适配(默认是true),例如 setup(){ ... },而且当设置为false时,可以tree shaking减少部分代码
2️⃣ __VUE_PROD_DEVTOOLS__:Vue调试工具是否在生产环境生效(默认是false)
⭐ 这两个属性在DefinePlugin中配置:
 
所以,综上所述:如果是完全使用.vue文件(sfc文件)开发,则不需要使用:
import { createApp } from 'vue/dist/vue.esm-bundler'
可以直接写成,因为这些文件都交由vue-loader中的compiler-sfc解析:
import { createApp } from 'vue'
 

(三)Webpack搭建本地服务

通产来说,运行代码需要以下两个步骤:
1️⃣ npm run build
2️⃣ live server / 浏览器
但是为了提高效率,需要自动完成编译和展示,而webpack给我们提供以几种方式:

1. watch

在package.json中修改
或者在webpack.config.js中修改
 

2. dev-serve

webpack自带的live reloading(实时重新加载),其实质上时调用memfs库,在编译后不会写入到任何输出文件,而是将bundle文件保留在内存中,安装如下:
npm install webpack-dev-server -D
配置如下:在package.json插入如下代码:
 
详细配置信息:
 

(四)模块热替换(HMR)

HMR的全称是Hot Module Replacement,翻译为模块热替换; 模块热替换是指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个页面
 
原理
webpack-dev-server会创建两个服务:提供静态资源的服务(express)和Socket服务(net.Socket
1️⃣ express server 负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析);
2️⃣ HMR Socket Server,是一个socket的长连接:
  • 长连接有一个最好的好处是建立连接后双方可以通信(服务器可以直接发送文件到客户端);
  • 当服务器监听到对应的模块发生变化时,会生成两个文件.json(manifest文件)和.js文件(update  chunk)通过长连接,可以直接将这两个文件主动发送给客户端(浏览器)
  • 浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新
notion image
 

(五)项目网络设置hotOnly、host

notion image
 
具体设置:
 

(六)Proxy

proxy主要用于解决跨域问题;
首先需要安装axios库 npm install axios
使用
 

(七)resolve

resolve用于设置模块如何被解析:
在开发中我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库;
resolve可以帮助webpack从每个require / import 语句中,找到需要引入到合适的模块代码;
webpack 使用 enhanced-resolve 来解析文件路径;
匹配/解析顺序
notion image
 
相关配置
 

(八)dev和build模式配置分离

创建config文件夹分别是公共文件夹 webpack.comm.config.js,生产文件夹 webpack.dev.config.js,发布文件夹 webpack.prod.config.js;
 
 
然后我们需要将comm.js合并到不同两个环境中,需要安装以下插件 npm install webpack-merge -D
单独配置文件如下:
 
 
 
notion image
Vue3入门VueCLI × Vite
Loading...
😈Zabanya
😈Zabanya
一名喜欢瞎折腾选手
公告
 
部分教程类文章篇幅过大,可能会导致加载时间稍微偏长,非常感谢您的耐心等待 ~ 🎉