从 0 搭建一个 vue3 项目（一）
一、先实现一个简易版本
-
初始化 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 };
- 配置 package.json，给 scripts 添加一个 build 命令就好了
"scripts" : { "test": "echo \"Error: no test specified\" && exit 1" , "build": "webpack" // 打包 },
-
尝试跑起来，运行 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 h1 { 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 ，就像下面这样，我偷偷改了下颜色哈哈，不过我认为你有一件更重要的事情，就是在 package.json 的 scripts 下面添加一条新的命令 "dev": "webpack serve --mode development"，如果是 "--mode production"，需要考虑打包后的文件大小问题
