前言：
在上两节中，我们将一个原生项目通过webapck进行了工程化改造，通过导入打包js，css等文件、复用了部分html结构，最后还将打包文件进行了压缩等。
这一章节就将此基础上引入Vue，通过本章的学习，可以熟练的将原生项目快速转化为Vue项目SPA,MPA进行二次开发

无工程化项目地址

https://github.com/NewCoder798/ZBestPC

webpack多配置文件改造
将当前项目的webpack.config.js配置文件单独放在一个文件中便于管理，同时需要在package.json中修改打包命令，注意！需要修改webpack.config.js中的打包路径！

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

从0到1 将静态网页项目进行工程化 - 引入Vue（第三章）

添加Vue

初始化vue3

引入vue库，让vue先跑起来。

下载依赖

npm i -S vue          
npm i -D @vue/compiler-sfc
npm i -D vue-template-compiler
npm i -D vue-loader

初始化vue

在build目录下创建webpack.vue.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 路径别名
const { ProvidePlugin } = require('webpack')
// 拷贝文件
const CopyWebpackPlugin = require('copy-webpack-plugin')
// 将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// js压缩
const TerserPlugin = require('terser-webpack-plugin')
// css压缩
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// vue配置
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development',
// 入口
entry: {
index: path.resolve(__dirname, '../src/main.js'),
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, '../dist'),
},
devServer: {
static: {
directory: path.resolve(__dirname, 'dist'),
},
port: 3000,
// 服务器压缩
compress: true,
// 自动打开浏览器
open: true,
// 开启热更新
hot: true,
},
module: {
rules: [
// 解析vue文件
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
// use: ['style-loader', 'css-loader'],
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
// 打包文件
test: /\.(png|svg|jpg|jpeg|gif)$/i,
// webpack自带
type: 'asset',
// 如果图片小于8kb，就会被转换成base64
parser: {
dataUrlCondition: {
maxSize: 8 * 1024,
},
},
// 大于8kb的图片会被打包到images文件夹下
generator: {
filename: 'images/[name].[hash:6][ext]',
},
},
// ejs 复用模版
{
test: /\.ejs$/,
loader: 'ejs-loader',
options: {
esModule: false,
},
},
],
},
optimization: {
// 是否开启代码压缩
minimize: true,
// 代码优化
minimizer: [
// js 代码压缩
new TerserPlugin({ parallel: true }),
// css代码压缩
new CssMinimizerPlugin(),
],
// 代码分割
splitChunks: {
// 代码最小的分割大小
minSize: 300 * 1024,
// async 异步代码分割 initial 同步代码分割 all 同步异步代码分割都开启
chunks: 'all',
// 名称
name: 'common',
// 这里可以继续打包第三方库
cacheGroups: {
lodash: {
test: /lodash-es/,
name: 'lodash-es',
// 优先级
// priority:10,
chunks: 'all',
},
jquery: {
test: /jquery/,
name: 'jquery',
// priority: 10,
chunks: 'all',
},
},
},
},
plugins: [
new VueLoaderPlugin(),
// 配置首页资源
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../public/index.html'),
chunks: ['index'],
}),
// 从.. 拷贝文件 至..
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, '../src/img'),
to: path.resolve(__dirname, '../dist/img'),
},
],
}),
// css压缩
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[name].chunk.css',
}),
new CleanWebpackPlugin(),
],
}

public/index

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style></style>
</head>
<body>
<div id="app"></div>
</body>
</html>

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

App.vue

<script setup>
import { ref } from 'vue'
const message = ref('工程化 - Vue')
</script>
<template>
<div id="app">{{ message }}</div>
</template>
<style></style>

增加启动命令

"scripts": {
"start": "webpack-dev-server",
"start:vue": "webpack-dev-server --config build/webpack.vue.config.js",
"build": "webpack --config build/webpack.config.js",
"build:vue": "webpack --config build/webpack.vue.config.js"
},

从0到1 将静态网页项目进行工程化 - 引入Vue（第三章）

首页和登录页面移植到Vue – SPA

首页移植

将首页的html复制到Home.vue

注意如何报找不到jquery 说明在webpack中没有设置路径别名。

<script setup>
import './css/index.css'
import './css/public.css'
import 'jquery'
import 'flexslider'
import './js/public'
import './js/nav'
</script>
<template>
<div>
<!------------------------------head------------------------------>
<div class="head">
<div class="wrapper clearfix">
<div class="clearfix" id="top">
<h1 class="fl"><a href="index.html"><img src="img/logo.png" /></a></h1>
<div class="fr clearfix" id="top1">
<p class="fl">
<a href="#" id="login">登录</a>
<a href="#" id="reg">注册</a>
</p>
<form action="#" method="get" class="fl">
<input type="text" placeholder="热门搜索：干花花瓶" />
<input type="button" />
</form>
<div class="btn fl clearfix">
<a href="mygxin.html"><img src="img/grzx.png" /></a>
<a href="#" class="er1"><img src="img/ewm.png" /></a>
<a href="cart.html"><img src="img/gwc.png" /></a>
<p><a href="#"><img src="img/smewm.png" /></a></p>
</div>
</div>
</div>
<ul class="clearfix" id="bott">
<li><a href="index.html">首页</a></li>
<li>
<a href="#">所有商品</a>
<div class="sList">
<div class="wrapper  clearfix">
<a href="paint.html">
<dl>
<dt><img src="img/nav1.jpg" /></dt>
<dd>浓情欧式</dd>
</dl>
</a>
<a href="paint.html">
<dl>
<dt><img src="img/nav2.jpg" /></dt>
<dd>浪漫美式</dd>
</dl>
</a>
<a href="paint.html">
<dl>
<dt><img src="img/nav3.jpg" /></dt>
<dd>雅致中式</dd>
</dl>
</a>
<a href="paint.html">
<dl>
<dt><img src="img/nav6.jpg" /></dt>
<dd>简约现代</dd>
</dl>
</a>
<a href="paint.html">
<dl>
<dt><img src="img/nav7.jpg" /></dt>
<dd>创意装饰</dd>
</dl>
</a>
</div>
</div>
</li>
<li>
<a href="flowerDer.html">装饰摆件</a>
<div class="sList2">
<div class="clearfix">
<a href="proList.html">干花花艺</a>
<a href="vase_proList.html">花瓶花器</a>
</div>
</div>
</li>
<li>
<a href="decoration.html">布艺软饰</a>
<div class="sList2">
<div class="clearfix">
<a href="zbproList.html">桌布罩件</a>
<a href="bzproList.html">抱枕靠垫</a>
</div>
</div>
</li>
<li><a href="paint.html">墙式壁挂</a></li>
<li><a href="perfume.html">蜡艺香薰</a></li>
<li><a href="idea.html">创意家居</a></li>
</ul>
</div>
</div>
<!-------------------------banner--------------------------->
<div class="block_home_slider">
<div id="home_slider" class="flexslider">
<ul class="slides">
<li>
<div class="slide">
<img src="img/banner2.jpg" />
</div>
</li>
<li>
<div class="slide">
<img src="img/banner1.jpg" />
</div>
</li>
</ul>
</div>
</div>
<!------------------------------thImg------------------------------>
<div class="thImg">
<div class="clearfix">
<a href="vase_proList.html"><img src="img/i1.jpg" /></a>
<a href="proList.html"><img src="img/i2.jpg" /></a>
<a href="#2"><img src="img/i3.jpg" /></a>
</div>
</div>
<!------------------------------news------------------------------>
<div class="news">
<div class="wrapper">
<h2><img src="img/ih1.jpg" /></h2>
<div class="top clearfix">
<a href="proDetail.html"><img src="img/n1.jpg" />
<p></p>
</a>
<a href="proDetail.html"><img src="img/n2.jpg" />
<p></p>
</a>
<a href="proDetail.html"><img src="img/n3.jpg" />
<p></p>
</a>
</div>
<div class="bott clearfix">
<a href="proDetail.html"><img src="img/n4.jpg" />
<p></p>
</a>
<a href="proDetail.html"><img src="img/n5.jpg" />
<p></p>
</a>
<a href="proDetail.html"><img src="img/n6.jpg" />
<p></p>
</a>
</div>
<h2><img src="img/ih2.jpg" /></h2>
<div class="flower clearfix tran">
<a href="proDetail.html" class="clearfix">
<dl>
<dt>
<span class="abl"></span>
<img src="img/flo1.jpg" />
<span class="abr"></span>
</dt>
<dd>【花艺】七头美丽玫瑰仿真花束</dd>
<dd><span>¥ 79.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/flo2.jpg" />
<span class="abr"></span>
</dt>
<dd>【花艺】七头美丽玫瑰仿真花束</dd>
<dd><span>¥ 79.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/flo3.jpg" />
<span class="abr"></span>
</dt>
<dd>【花艺】七头美丽玫瑰仿真花束</dd>
<dd><span>¥ 79.00</span></dd>
</dl>
</a>
</div>
<div class="flower clearfix tran">
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/flo4.jpg" />
<span class="abr"></span>
</dt>
<dd>【花艺】七头美丽玫瑰仿真花束</dd>
<dd><span>¥ 79.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/flo5.jpg" />
<span class="abr"></span>
</dt>
<dd>【花艺】七头美丽玫瑰仿真花束</dd>
<dd><span>¥ 79.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/flo6.jpg" />
<span class="abr"></span>
</dt>
<dd>【花艺】七头美丽玫瑰仿真花束</dd>
<dd><span>¥ 79.00</span></dd>
</dl>
</a>
</div>
</div>
</div>
<!------------------------------ad------------------------------>
<a href="#" class="ad"><img src="img/ib1.jpg" /></a>
<!------------------------------people------------------------------>
<div class="people">
<div class="wrapper">
<h2><img src="img/ih3.jpg" /></h2>
<div class="pList clearfix tran">
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s7.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】不锈钢壁饰墙饰软装</dd>
<dd><span>￥688.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s10.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】小城动物木板画壁挂北欧</dd>
<dd><span>￥188.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s4.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】玄关假山水壁饰背景墙饰挂件创意</dd>
<dd><span>￥599.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s9.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】金属树枝壁饰铜鸟装饰品</dd>
<dd><span>￥928.00</span></dd>
</dl>
</a>
</div>
<div class="pList clearfix tran">
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s6.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】金属壁饰创意背景墙面挂件创意</dd>
<dd><span>￥228.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s8.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】小城动物木板画壁挂北欧</dd>
<dd><span>￥199.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s12.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】欧式复古挂钟创意餐厅钟表家居挂件</dd>
<dd><span>￥666.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s1.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】客厅地中海欧式现代相片墙创意</dd>
<dd><span>￥59.80</span></dd>
</dl>
</a>
</div>
<div class="pList clearfix tran">
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s5.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】铁艺荷叶壁挂软装背景墙上装饰品</dd>
<dd><span>￥800.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s3.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】欧式照片墙 创意组合结婚礼物</dd>
<dd><span>￥189.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s2.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】欧式钟表相框墙挂墙创意组合</dd>
<dd><span>￥148.00</span></dd>
</dl>
</a>
<a href="proDetail.html">
<dl>
<dt>
<span class="abl"></span>
<img src="img/s11.jpg" />
<span class="abr"></span>
</dt>
<dd>【最家】小城动物木板画壁挂北欧</dd>
<dd><span>￥188.00</span></dd>
</dl>
</a>
</div>
</div>
</div>
<!--返回顶部-->
<div class="gotop">
<a href="cart.html">
<dl>
<dt><img src="img/gt1.png" /></dt>
<dd>去购
物车</dd>
</dl>
</a>
<a href="#" class="dh">
<dl>
<dt><img src="img/gt2.png" /></dt>
<dd>联系
客服</dd>
</dl>
</a>
<a href="mygxin.html">
<dl>
<dt><img src="img/gt3.png" /></dt>
<dd>个人
中心</dd>
</dl>
</a>
<a href="#" class="toptop" style="display: none">
<dl>
<dt><img src="img/gt4.png" /></dt>
<dd>返回
顶部</dd>
</dl>
</a>
<p>400-800-8200</p>
</div>
<!-------------------login-------------------------->
<!--footer-->
<div class="footer">
<div class="top">
<div class="wrapper">
<div class="clearfix">
<a href="#2" class="fl"><img src="img/foot1.png" /></a>
<span class="fl">7天无理由退货</span>
</div>
<div class="clearfix">
<a href="#2" class="fl"><img src="img/foot2.png" /></a>
<span class="fl">15天免费换货</span>
</div>
<div class="clearfix">
<a href="#2" class="fl"><img src="img/foot3.png" /></a>
<span class="fl">满599包邮</span>
</div>
<div class="clearfix">
<a href="#2" class="fl"><img src="img/foot4.png" /></a>
<span class="fl">手机特色服务</span>
</div>
</div>
</div>
<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号
违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
</div>
</template>
<style></style>

引入vue-router

因为还需要引入Login页面，所有需要路由，来进行SPA单页面的应用

import { createRouter, createWebHashHistory } from 'vue-router'
const publicRoutes = [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
name: 'home',
component: () => import('../Home.vue'),
},
{
path: '/login',
name: 'login',
component: () => import('../login.vue'),
},
]
const router = createRouter({
history: createWebHashHistory(),
routes: publicRoutes,
})
export default router

登录页移植

只要将html复制过来，并且将css导入即可

<script setup>
import '../css/public.css'
import '../css/login.css'
</script>
<template>
<div class="login">
<form action="#" method="post">
<h1><a href="index.html"><img src="img/temp/logo.png"></a></h1>
<p></p>
<div class="msg-warn hide"><b></b>公共场所不建议自动登录，以防账号丢失</div>
<p><input type="text" name="" value="" placeholder="昵称/邮箱/手机号"></p>
<p><input type="text" name="" value="" placeholder="密码"></p>
<p><input type="submit" name="" value="登  录"></p>
<p class="txt"><a class="" href="reg.html">免费注册</a><a href="forget.html">忘记密码？</a></p>
</form>
</div>
</template>
<style scoped></style>

首页和登录页面移植到Vue – MPA

mpa会根据页面产生多个html文件，有利于seo, 通过webpack也可以将项目改造成mpa

修改入口文件一个页面就有一个Vue实例也就是单独一个入口文件

从0到1 将静态网页项目进行工程化 - 引入Vue（第三章）

import { createApp } from 'vue'
import App from '../views/Home.vue'
const app = createApp(App)
app.mount('#app')

import { createApp } from 'vue'
import App from '../views/Login.vue'
const app = createApp(App)
app.mount('#app')

修改webpack

分别修改打包入口以及HtmlWebpackPlugin

  // 配置文件入口
entry: {
home: path.resolve(__dirname, '../src/mpa/Home.js'),
login: path.resolve(__dirname, '../src/mpa/Login.js'),
},
引入资源分别打包
new HtmlWebpackPlugin({
filename: 'home.html',
template: path.resolve(__dirname, '../public/index.html'),
chunks: ['home'],
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: path.resolve(__dirname, '../public/index.html'),
chunks: ['login'],
}),

从0到1 将静态网页项目进行工程化 - 引入Vue（第三章）

像Vue一样在控制台百分比显示编译进度

const { ProgressPlugin } = require('webpack') 使用这个插件即可！

原文链接：https://juejin.cn/post/7353825544705769512 作者：不知名小瑜

从0到1 将静态网页项目进行工程化 – 引入Vue（第三章）

添加Vue

初始化vue3

首页和登录页面移植到Vue – SPA

首页移植

引入vue-router

登录页移植

首页和登录页面移植到Vue – MPA

像Vue一样在控制台百分比显示编译进度

发表回复

从0到1 将静态网页项目进行工程化 – 引入Vue（第三章）

添加Vue

初始化vue3

首页和登录页面移植到Vue – SPA

首页移植

引入vue-router

登录页移植

首页和登录页面移植到Vue – MPA

像Vue一样在控制台百分比显示编译进度

相关推荐

发表回复