Vue自学:路1——Vue3.x+Webpack5.x的徒手搭建项目

mole

2024-07-02 帮助1人

本系列文章详细阐述基于Vue 3.X Webpack 5.X，从徒手搭建项目开始到各个常用插件的配置和应用，目的是让学习者能快速掌握项目结构及vue的开发要领。

1. 概述

本文章详细阐述基于Vue 3.X Webpack 5.X 徒手搭建项目的过程，通过搭建过程，全面了解基本配置项及插件安装。

文件底部有所有插件的清单及其版本号，如果你根据下述命令安装的版本与之不一致，并且产生版本冲突等不可解决的问题时，建议在安装插件时强制指定版本，避免学习初期陷入版本冲突的解决过程。

安装插件时在插件名称后面用 @version 的格式指定版本号，如下示例：

npm install vue@3.2.31 -S

2. 安装nodejs

官方下载链接，点击下方红色的链接，选择 64-bit 的可执行安装文件，下载后安装。

学新通

3. 初始化项目

3.1 创建项目目录 vue-ui，启动 visual studio code，使用“打开文件夹”方式，打开该目录。

3.2 点击菜单：终端 => 新建终端，打开终端窗口

3.3 在终端窗口中执行 npm init -y 命令，如下所示：

PS D:\Project\Vue-UI> npm init -y
Wrote to D:\Project\Vue-UI\package.json:
{
"name": "vue-ui", // 项目名称
"version": "1.0.0", // 项目版本
"description": "", // 项目描述
"main": "index.js", // 项目打包主入口
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" // webpack的test脚本
},
"keywords": [], // 项目的关键字
"author": "", // 作者
"license": "ISC" // 许可证
}

上面的注解是我加的。scripts 里除了 test 外，以后还可以添加 dev、build 等，示例如下。

"dev": "webpack serve --progress --config build/webpack.dev.conf.js"

在后续每次启动开发环境项目自测时，就需要执行 npm run dev，此时，实际调用的就是 scripts 里的 dev 指定的脚本。

3.4 执行如下命令，安装 webpack 及相关插件：

PS D:\Project\Vue-UI> npm install webpack webpack-cli --save-dev
added 329 packages in 21s

执行完上述命令后，可以打开 package.json 文件，看到多了 devDependencies节点，且该节点中包含了刚才安装的四个插件及其版本号。

"devDependencies": {
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
}

3.5 手动添加 webpack.config.js、index.html、src/main.js 三个文件，目录结构如下图：

学新通

其中，webpack.config.js 是 webpack 的配置文件，index.html 是网站入口 html 文件的模板，main.js 是打包入口文件。

webpack.config.js文件中添加如下代码：

'use strict'
const path = require('path')
module.exports = {
mode: 'development', // 环境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的静态资源文件名
}
}

package.json 文件的 scripts 节点中增加如下脚本：

"dev": "webpack --config ./webpack.config.js"

index.html文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
html,body,#app{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>

main.js文件内容如下：

import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式
import App from './App' // 引入 APP.vue
const app = createApp(App) // 初始化应用
app.mount('#app') // 将 App 中模板内容挂载到 app 节点

3.6 执行 npm run dev 命令

执行命令后，可以看到如下输出，表示编译成功：

PS D:\Project\Vue-UI> npm run dev
> vue-ui@1.0.0 dev
> webpack --config ./webpack.config.js
asset static/js/main.js 1.17 KiB [emitted] (name: main)
./src/main.js 1 bytes [built] [code generated]
webpack 5.70.0 compiled successfully in 108 ms

同时，自动在根目录下创建了 dist 目录，并创建了 main.js 文件，目录结构如下：

学新通

可以看出，编译过程没有将 html 文件打包输出，下一节介绍 html 打包插件

4. html 文件打包

4.1 执行下列脚本添加 html 文件打包插件

npm install html-webpack-plugin -D

命令参数 -D 是指定插件为开发环境用插件，在 package.json 中配置在 devDependencies 节点； -S是指定插件为生产环境用插件，在package.json 中配置在 dependencies 节点。

4.2 设置 webpack.config.js 文件

添加如下代码

const HtmlWebpackPlugin = require('html-webpack-plugin')
// 在module.exports添加如下配置项
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 打包的 html 模板
filename: 'index.html', // 打包输出的文件名
title: '应用平台' // html 文件内可以通过 <%= htmlWebpackPlugin.options.title %> 引用
})
]

webpack.config.js完整的文档如下：

'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // 环境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的静态资源文件名
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 打包的 html 模板
filename: 'index.html', // 打包输出的文件名
title: '应用平台' // html 文件内可以通过 <%= htmlWebpackPlugin.options.title %> 引用
})
]
}

4.3 添加 index.html 内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>

4.4 添加 main.js 内容

const app = document.getElementById('app')
app.textContent = '你好！'

4.5 编译代码

执行 npm run dev命令，显示如下输出，表示编译成功

PS D:\Project\Vue-UI> npm run dev
> vue-ui@1.0.0 dev
> webpack --config ./webpack.config.js
asset static/js/main.js 1.24 KiB [emitted] (name: main)
asset index.html 280 bytes [compared for emit]
./src/main.js 73 bytes [built] [code generated]
webpack 5.70.0 compiled successfully in 169 ms

完成编译后，你可以看到dist目录下有 index.html 文件输出，其具体内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应用平台</title>
<script defer src="static/js/main.js"></script></head>
<body>
<div id="app"></div>
</body>
</html>

4.6 运行网页

用浏览器打开 dist 目录下的 index.html 文件，即可看到如下的输出：

学新通

5. vue文件打包

5.1 vue 插件安装

npm install vue@next -S

此处需加上 @next 以获取最新的稳定版

5.2 在 src 目录下添加 App.vue 文件

<template>
<div>你好！你核酸了吗？</div>
</template>
<script>
export default {
}
</script>

5.3 修改 main.js 内容为如下内容：

import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式
import App from './App.vue' // 引入 APP.vue
const app = createApp(App) // 初始化应用
app.mount('#app') // 将 App 中模板内容挂载到 app 节点

代码还可以写成如下格式：

import App from './App.vue' // 引入 APP.vue
const app = Vue.createApp(App) // 初始化应用
app.mount('#app') // 将 App 中模板内容挂载到 app 节点

从中可以看出，对于 vue 3.X 来说，Vue已成为全局对象

5.4 代码编译

此时执行 npm run dev，会收到如下报错信息：

modules by path ./src/ 361 bytes
./src/main.js 248 bytes [built] [code generated]
./src/App.vue 113 bytes [built] [code generated] [1 error]
ERROR in ./src/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>你好！你核酸了吗？</div>
| </template>
@ ./src/main.js 2:0-27 4:22-25
webpack 5.70.0 compiled with 1 error in 572 ms

出错提示中告知需要一款合适的加载器处理<template>文件类型，查资料可知，需要安装 vue-loader 插件。

vue-loader 本质上就是一个代码解析器和翻译器，其能够解析和翻译其中的<template>和<script>标签的内容，但是，对于<style>标签，它会提交给其他加载器处理，后续会陆续介绍这部分内容。

5.5 安装 vue-loader 插件

npm install vue-loader@next -D

在 webpack.config.js 中添加如下配置：

// 文件顶部添加如下代码
const VueLoaderPlugin = require('vue-loader')
// 在 plugins 中添加如下代码
new VueLoaderPlugin()
// 在 module.exports 中添加如下代码
module: {
rules: [
{
test: /\.vue$/, // 文件扩展名 .vue 的正则表达式
use: ['vue-loader'] // 使用 vue-loader 加载器
}
]
}

webpack.config.js 完整内容如下：

'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development', // 环境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的静态资源文件名
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 打包的 html 模板
filename: 'index.html', // 打包输出的文件名
title: '应用平台' // html 文件内可以通过 <%= htmlWebpackPlugin.options.title %> 引用
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/, // 文件扩展名 .vue 的正则表达式
use: ['vue-loader'] // 使用 vue-loader 加载器
}
]
}
}

5.6 编译

执行 npm run dev 命令，会报如下错误：

[webpack-cli] Failed to load 'D:\Project\Fairyland\Vue-UI\webpack.config.js' config
[webpack-cli] TypeError: VueLoaderPlugin is not a constructor
at Object.<anonymous> (D:\Project\Fairyland\Vue-UI\webpack.config.js:21:7)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at WebpackCLI.tryRequireThenImport (D:\Project\Fairyland\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:244:16)
at loadConfigByPath (D:\Project\Fairyland\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:1712:30)
at D:\Project\Fairyland\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:1767:11

错误提示：VueLoaderPlugin 不是一个构造函数。这是由于 Vue 3.X 不再支持 2.X 的一些语法导致的，需要在 VueLoaderPlugin 两边加上大括号就行了，如下：

const { VueLoaderPlugin } = require('vue-loader')

5.7 编译并执行

执行 npm run dev 命令，然后用浏览器打开 dist 目录下的 index.html 文件，可以看到如下内容：

学新通

6. CSS 解析

6.1 添加 CSS 代码

在 App.vue 文件中添加如下代码

<style>
div {
color: red
}
</style>

6.2 编译

执行 npm run dev 时，会报如下错误信息：

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css (./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[2].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css) 2:8
Module parse failed: Unexpected token (2:8)
File was processed with these loaders:
* ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|
> div {
| color: red
| }
@ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 1:0-151 1:0-151 1:152-292 1:152-292
@ ./src/App.vue 5:0-62
@ ./src/main.js 2:0-27 4:22-25
webpack 5.70.0 compiled with 1 error in 616 ms

出错提示中告知需要一款合适的加载器处理 div 的解析，由于要对 div 解析，首先要解析 <style> 标签，但是，vue-loader 自身不处理 <style> 标签，故需要先加载 vue-style-loader ，然后加载 css-loader 插件。

6.3 插件安装

执行下列命令安装 vue-style-loader、css-loader 插件

npm install vue-style-loader css-loader -D

在 webpack.config.js 中 module-rules 节点中增加如下规则：

{
test: /\.css$/, // 文件扩展名 .css 的正则表达式
use: ['vue-style-loader', 'css-loader'] // 使用 vue-style-loader、css-loader 加载器
}

注意，use 中的两个插件的先后关系不可以写反，先后关系表示处理的前后关系，即先由 vue-style-loader 处理<style>标签，然后调用 css-loader 处理标签里的 css 内容。

如果此处只安装和配置 css-loader 插件，那么编译是通过的，不会报错，但是，css 内容将会丢失。

6.4 编译并执行

执行命令 npm run dev，并用浏览器打开 dist 目录下的 index.html，可以看到如下效果：

学新通

7. 启动Web服务

上述过程中，每次都要打开 index.html 文件才能看到效果，而且随着后续功能的扩展，静态文件无法实现服务器的完整效果，故需要提供自动加载Web服务的功能。

7.1 插件安装

执行下列脚本安装 webpack-dev-server 插件

npm install webpack-dev-server -D

7.2 修改编译脚本

将 package.json 文件的 scripts 节点的 dev 命令脚本，改为如下：

"dev": "webpack serve --progress --config webpack.config.js"

7.3 修改配置文件

将 webpack.config.js 文件的 module.exports 中增加如下配置：

devServer: {
host: 'localhost',
port: 8080,
open: true
},

上面 open 参数改为 false 时，关闭自动打开浏览器效果。

7.4 编译

执行 npm run dev，浏览器上显示如下内容：

学新通

注：360杀毒软件在powershell启动浏览器时，会误报病毒的，忽略即可

8. 偷懒配置

8.1 自动匹配文件扩展名

在 webpack.config.js 的 module.exports 中添加 extensions 配置项：

resolve: {
extensions: ['.js', '.vue', '.json'], // 可以省略的文件扩展名
},

添加上述配置项后，可以在文件路径描述中，省去 .js、.vue、json三种扩展名，例如：

import App from './App.vue'

可以改写为：

import App from './App'

8.2 添加指向 src 目录的匿名

在 webpack.config.js 的 module.exports 中添加 alias 配置项：

resolve: {
alias:{
'@': path.resolve(__dirname, 'src') // 路径中用 @ 表示 src 目录
}
},

添加上述 @ 匿名的配置项后，可以将指向 src 的路径直接用 @ 表示，例如：

import Home from '../src/views/Home'

可以改写成：

import Home from '@/views/Home'

9. 清理dist目录插件

默认情况下，每次编译都不会清空 dist 目录，这将导致会存在一些废旧文件存在于该目录中，故可以引入 clean-webpack-plugin 插件，先清除 dist 目录，然后再编译文件。

9.1 安装插件

npm install clean-webpack-plugin -D

9.2 配置 webpack.config.js

增加如下代码

# 在顶部增加如下代码
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
# 在 plugins 节点中增加如下代码
new CleanWebpackPlugin()

10. 插件版本清单

完成上述过程后，安装的插件清单如下：

"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"vue-style-loader": "^4.1.3",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"vue": "^3.2.31",
"vue-loader": "^17.0.0"
}

这篇好文章是转载于：学新通技术网

Vue自学:路1——Vue3.x+Webpack5.x的徒手搭建项目

1. 概述

2. 安装nodejs

3. 初始化项目

4. html 文件打包

5. vue文件打包

6. CSS 解析

7. 启动Web服务

8. 偷懒配置

9. 清理dist目录插件

10. 插件版本清单

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

微信运动停用后别人还能看到步数吗

excel打印预览压线压字怎么办