从 0 搭建一个 vue3 项目（一）

IT技术2年前更新 IT大王
0

一、先实现一个简易版本

  1. 初始化 npm

    npm init -y // -y 能省去填写信息的步骤，一步到位

  2. 安装几个必要的依赖

    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 // 用这个打包

  3. 创建必要的文件，并配置webpack

    1. 创建 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>

    2. 创建 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>

    3. 创建 src > main.js

      1 import { createApp } from "vue";
2 import App from "./App.vue";
3 
4 const app = createApp(App);
5 app.mount("#app");

    4. 配置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 };
    5. 配置 package.json，给 scripts 添加一个 build 命令就好了 
      "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack" // 打包
},

    6. 尝试跑起来，运行npm run build，此时会在 dist 文件夹下多出一个 main.js，双击打开 index.html，出现 Hello Nyan Cat 就说明 vue3 项目搭建起来了，接下来我们把它弄的复杂一点

二、尝试不断增加功能 ^o^

  1. 安装一些常用的依赖

    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 使用变量，可以很方便地修改信息

  2. 为 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>

  3. 修改下 webpack，这里只有部分代码，自行对比

    1. 关于 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 ],

    2. 关于解析规则，增加 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 },

    3. 关于服务器

       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 },

  4. 然后尝试运行在服务器npm run dev，就像下面这样，我偷偷改了下颜色哈哈，不过我认为你有一件更重要的事情，就是在 package.json 的 scripts 下面添加一条新的命令 “dev”: “webpack serve –mode development”，如果是 “–mode production”，需要考虑打包后的文件大小问题

    从 0 搭建一个 vue3 项目（一）

三、最后一步是使用 ts，奈何我才刚学会语法，后面再更新吧

© 版权声明
文章版权归作者所有，未经允许请勿转载。
好牛新坐标
版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com

相关文章

添加小工具
点此为“正文侧边栏”添加小工具