Hi ! 这里是JustHappy的技术分享博客，上次我们给旧的项目集成了webpack，但是感觉还是不能够愉快的进行开发,这次我们来集成大家喜闻乐见的Vue，希望本篇可以带你从另一个角度看Vue
这篇文章将带您改造一个集成webpack的原生项目，参考本人之前做过的一些老项目升级Vue的经验，力求最简单，如有错误，欢迎评论区指正
看完这篇文章您将获得以下技能 🚀🚀以实现较为完整的Vue开发体验
- webpack-dev-server插件集成，实现模块热替换（HMR）
- 原生项目支持Vue3.0模板语法、响应式系统、组件式开发
- 集成vue-router实现页面路由
此篇项目的源码已开源 ➡️ 点我去
老规矩，我们还是从官网开始 👀
个人觉得这是个比较好的方式去开始用一个开源项目，一个优秀的开源项目往往在官网有着详细的文档，可能是目前网络上视频资源太多了，使得很多人忽略了这一点。
我们来看看首页...🍚🍚
渐进式（Progressive Framework）🤔🤔
似乎目前我只碰到Vue在首页的Slogan中去强调这一概念，但在开源世界，Vue在渐进式这一理念中的践行无疑是优秀的。
回到最开始的“Vue初体验”➡️点我去官方文档
相信很多朋友最开始使用Vue是在HTML文件中通过CDN的方式引入来进行开发的（记忆中黑某程序员和尚某谷的课程最开始都是这样教学的），当然这种方式是没有代码高亮和代码提示等等等等许多功能等，要使用完整的Vue还得在项目中安装，所以我们这次不用这种方式集成。
为什么不用脚手架？
众所周知当前主流的Vue脚手架有Vue CLI和create-vue两种，相信大家也都使用过，但是都是在项目最开始构建的时候使用，当我们要给之前未使用Vue的加入Vue支持的时候就显得不那么适用，而且官网也没有提供相应的文档
所以不废话了，我们直接开始吧
其实给项目提供Vue支持并不难，无非就是安装几个npm包，再调整调整项目的一些结构和代码罢了，所以我们开始吧！同样，集成webpack的
我们需要安装什么？
我们最终要实现在我们的项目中解析Vue独有的.vue文件，并支持基本的组件式开发、热更新开发模式，那么就得在项目中集成以下npm包
1.webpack-dev-server
npm install -D webpack-dev-server
2.vue
很显然我们需要Vue.js的核心包
npm install vue
3.vue-loader
vue-loader 是一个 webpack 的 loader，也就是一个webpack的插件，可以将编写的 Vue 组件转换为 JavaScript 模块
4.vue-template-compiler
此包可用于将 Vue2.0 模板预编译为渲染函数,你应该将 vue-loader 和 vue-template-compiler 一起安装。
npm install -D vue-loader vue-template-compiler
如何修改webpack配置文件？这点在Vue-loader文档中也有相对应的介绍 ➡️点我去
5.vue-router
npm install vue-router
file-loader
此处用于解决图片文件不适配的问题
npm install -D file-loader
项目结构调整及配置文件调整
我们得将项目结构改造成适应Vue开发模式的样子
在src目录下创建main.js作为入口文件
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
在src目录下创建App.vue作为Vue的根组件
<template>
<router-view></router-view>
</template>
<script></script>
<style>
#app {
height: 100%;
width: 100%;
}
</style>
在src目录下创建public文件夹，并在文件夹中创建index.html用于挂载实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
在src目录下创建router.js作为vue-router的配置文件
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "./pages/index.vue";
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/",
redirect: "/home",
},
{
path: "/home",
name: "Home",
component: Home,
},
],
});
export default router;
在src目录下创建pages文件夹用于存放页面文件
将原本HTML文件中的内容搬运进.vue文件要注意以下几点
- 将
<body>标签及其里面的内容粘贴至template标签下，要注意将<body>标签用<div>替换 - 注意文件中的其他文件的引用路径，注意图片、CSS、JS等
在src目录下创建components用于存放组件代码
略过，详细可以查看项目源代码 ➡️ 点我去
修改webpack.config.js
代码如下
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");
const config = {
mode: "development",
entry: path.resolve(__dirname, "./src/main.js"),
output: {
filename: "js/[name].js",
path: path.resolve(__dirname, "./dist"),
},
devServer: {
static: {
directory: path.join(__dirname, "./public"), // 这里指定了服务的根目录
},
compress: true,
port: 9000,
hot: true, // 启用模块热替换
open: true, // 启动时自动打开浏览器
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.(webp|jpg|jpeg|png)$/,
use: {
loader: "file-loader",
options: {
outputPath: "images/", // 指定输出的文件夹
name: "[name].[hash:8].[ext]", // 保持文件名和扩展名，添加哈希值以避免缓存问题
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/public/index.html",
chunks: ["main"],
}),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "./src/images"),
to: path.resolve(__dirname, "./dist/images"),
},
],
}),
new VueLoaderPlugin(),
],
};
module.exports = config;
修改packag.json添加脚本命令
"scripts": {
"build": "webpack --config webpack.config.js",
"serve": "webpack-dev-server --config webpack.config.js"
},
ok！如果到这一步没有出现什么问题的话我们将会得到下面这个样子的目录结构
让我们来试试吧！
在项目终端运行npm run serve
可以看到我们成功运行了，我们点开看看
没有什么bug，完美！我的完成了，该到你啦！！
