- A+
所属分类：Web前端
一、先实现一个简易版本
-
初始化 npm
npm init -y // -y 能省去填写信息的步骤，一步到位
-
安装几个必要的依赖
1 npm install css-loader style-loader -D // 解析css 2 npm install vue@next // 修饰符默认 -S 3 npm install vue-loader @vue/compiler/sfc -D // 解析 vue 4 npm install webpack webpack-cli -D // 用这个打包
-
创建必要的文件，并配置webpack
-
创建 dist > index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>从 0 构建 vue3.0 项目</title> 8 <body> 9 <div id="app"></div> 10 <script src="main.js"></script></head> 11 </body> 12 </html>
-
创建 src > App.vue
1 <template> 2 <div class="main"> 3 <h1>Hello Nyan Cat</h1> 4 </div> 5 </template> 6 7 <style> 8 h1 { 9 color: red; 10 } 11 </style>
-
创建 src > main.js
1 import { createApp } from "vue"; 2 import App from "./App.vue"; 3 4 const app = createApp(App); 5 app.mount("#app");
-
配置webpack
1 const path = require("path"); 2 // 封装一下，后面会频繁用到 3 function resolve(folder) { 4 // path.resolve 和 path.join 的结果一样 5 return path.resolve(__dirname, folder); 6 } 7 // 分离 html、css、js，然后交给loader去处理 8 const { VueLoaderPlugin } = require("vue-loader"); 9 10 module.exports = { 11 entry: "./src/main.js", // 设置打包的入口 12 // 设置打包的出口 13 output: { 14 filename: "main.js", 15 path: resolve("dist"), 16 }, 17 resolve: { 18 // 配置下简写 19 alias: { 20 "~": resolve("src"), // 我喜欢用 ~ 21 assets: resolve("src/assets"), // 这里不能使用 "~/assets" 22 }, 23 // 配置下省略 24 extensions: ["vue", ".js", ".ts"], 25 }, 26 //添加模块 27 module: { 28 rules: [ 29 { 30 // 设置.vue文件的解析规则 31 test: /.vue$/, 32 loader: "vue-loader", 33 }, 34 { 35 // 设置.css的解析规则 36 test: /.css$/, 37 use: [{ loader: "style-loader" }, { loader: "css-loader" }], 38 }, 39 { 40 // 设置 .less的解析规则 41 test: /.less$/, 42 use: [ 43 { loader: "style-loader" }, 44 { loader: "css-loader" }, 45 { loader: "less-loader" }, 46 ], 47 }, 48 { 49 test: /.(png|jpe?g|gif)$/, 50 use: [ 51 { 52 loader: "file-loader", 53 options: { 54 name: "[name].[ext]", 55 outputPath: "images/", 56 }, 57 }, 58 ], 59 }, 60 ], 61 }, 62 // webpack 会把多个 js 文件打包成一个文件，最终的效果就是这个文件对人类基本不可读；如果程序在运行的过程中报错了，基本不可能找到是哪个源文件的问题，inline-source-map 就可以显示的为我们指示出代码来自哪个文件 63 devtool: "inline-source-map", 64 plugins: [new VueLoaderPlugin()], 65 };
-
尝试跑起来，运行 npm run build ，此时会在 dist 文件夹下多出一个 main.js，双击打开 index.html，出现 Hello Nyan Cat 就说明 vue3 项目搭建起来了，接下来我们把它弄的复杂一点
二、尝试不断增加功能 ^o^
-
安装一些常用的依赖
1 npm install less less-loader -D // 可以很方便地开发 css 2 npm install file-loader -D // 可以把小图片解析成 base64，从而减少 http 请求 3 npm install webpack-dev-server -D // 让项目运行在本地地服务器，并提供热更新 4 npm install html-webpack-plugin -D // 这个插件允许我们在 index.html 使用变量，可以很方便地修改信息
-
为 App.vue 添加一张图片，并且使用 less
1 <template> 2 <div class="main"> 3 <h1>Hello Nyan Cat</h1> 4 <img :src="require('assets/NyanCat.jpg').default" alt="Nyan Cat" /> 5 </div> 6 </template> 7 8 <style lang="less"> 9 .main { 10 display: flex; 11 flex-direction: column; 12 align-items: center; 13 span { 14 color: red; 15 } 16 } 17 </style>
-
修改下 webpack，这里只有部分代码，自行对比
-
关于 html-webpack-plugin，由于有了这个插件，所以把 dist > index.html 移动到 public > index.html，然后在 output 属性下添加 clean: true，表示每次打包前都清空 dist
1 // 分离 html、css、js，然后交给loader去处理 2 const { VueLoaderPlugin } = require("vue-loader"); 3 4 const HtmlWebpackPlugin = require("html-webpack-plugin");
1 plugins: [ 2 new VueLoaderPlugin(), 3 new HtmlWebpackPlugin({ 4 filename: "index.html", // 配置输出后的html文件名，前面也可以添加目录 5 template: "./public/index.html", // 配置模板 6 }), 7 ],
-
关于解析规则，增加 less 解析和图片解析，注意 less 解析和 css 解析要分开写，loader 的顺序不能错了
1 { 2 // 设置.css的解析规则 3 test: /.css$/, 4 use: [{ loader: "style-loader" }, { loader: "css-loader" }], 5 }, 6 { 7 // 设置 .less的解析规则 8 test: /.less$/, 9 use: [ 10 { loader: "style-loader" }, 11 { loader: "css-loader" }, 12 { loader: "less-loader" }, 13 ], 14 }, 15 { 16 test: /.(png|jpe?g|gif)$/, 17 use: [ 18 { 19 loader: "file-loader", 20 options: { 21 name: "[name].[ext]", 22 outputPath: "images/", 23 }, 24 }, 25 ], 26 },
-
关于服务器
1 plugins: [ 2 new VueLoaderPlugin(), 3 new HtmlWebpackPlugin({ 4 filename: "index.html", // 配置输出后的html文件名，前面也可以添加目录 5 template: "./public/index.html", // 配置模板 6 }), 7 ], 8 devServer: { 9 port: 1024, 10 open: true, 11 },
-
-
然后尝试运行在服务器 npm run dev ，就像下面这样，我偷偷改了下颜色哈哈
