从0搭建简易vue3项目

vue
字数统计: 1.8k字   |   阅读时长≈ 9分钟

步骤

  1. 创建目录，使用npm init -y初始化项目

  2. 使用npm install -D xxx ...命令安装webpack相关依赖

    • webpack：webpack编译打包核心库

    • webpack-cli：webpack指令库

    • webpack-dev-server：webpack开发者服务框架

    • webpack-chain：webpack配置工具

  3. 创建webpack配置文件webpack.config.js

  1. 在package.json的scripts字段声明build和dev脚本
1
2
"build": "rimraf dist && webpack --mode=production",
"dev": "webpack serve --mode=development"

  1. 创建src目录和入口文件src/main.js

  2. 配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
const path = require("path");
const config = new (require("webpack-chain"))();
config
.context(path.resolve(__dirname, ".")) // webpack 上下文目录为项目根目录
.entry("app") // 入口文件名称为 app
.add("./src/main.js") // 入口文件为 ./src/main.js
.end()
.output.path(path.join(__dirname, "./dist")) // webpack 输出的目录为根目录的 dist 目录
.filename("[name].[hash:8].js") // 打包出来的 bundle 名称为 "[name].[hash:8].js"
.publicPath("/") // publicpath 配置为 "/"
.end();

  1. 安装Vue3相关依赖

    • vue：Vue3源码

    • vue-loader：.vue文件webpack加载器

    • @vue/compiler-sfc：vue-loader用来解析sfc（Single File Component）插件

    • html-webpack-plugin：webpack插件用来自动注入chunks到模版html文件

  2. 创建公共目录public和项目入口页面public/index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <noscript>your browser should support javascript!</noscript>
    <div id="app"></div>
    <!-- html-webpack-plugin 将自动引入入口文件 -->
  </body>
</html>
  1. 在webpack.config.js文件中配置vue工具(webpack.config.js最终文件见文末附录)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
...

.resolve.extensions.add(".js")
.add(".vue") // 配置以 .js 等结尾的文件当模块使用的时候都可以省略后缀
.end()
.end()
.module.rule("vue") // vue-loader 相关配置
.test(/\.vue$/) // 匹配 .vue 文件
.use("vue-loader")
.loader("vue-loader")
.end()
.end()
.end()
.plugin("vue-loader-plugin") // vue-loader 必须要添加 vue-loader-plugin
.use(require("vue-loader").VueLoaderPlugin, [])
.end()
.plugin("html") // 添加 html-webpack-plugin 插件
.use(require("html-webpack-plugin"), [
{
    template: path.resolve(__dirname, "./public/index.html"), // 指定模版文件
    chunks: ["app"], // 指定需要加载的 chunk
    inject: "body", // 指定 script 脚本注入的位置为 body
},
])
.end()
.devServer.host("0.0.0.0") // 服务器外部可访问
.disableHostCheck(true) // 关闭白名单校验
.contentBase(path.resolve(__dirname, "./public")) // 设置一个 express 静态目录
.historyApiFallback({
disableDotRule: true, // 禁止在链接中使用 "." 符号
rewrites: [
    { from: /^\/$/, to: "/index.html" }, // 将所有的 404 响应重定向到 index.html 页面
],
})
.port(8080) // 当前端口号
.hot(true) // 打开页面热载功能
.sockPort("location") // 设置成平台自己的端口
.open(true);
  1. 创建sfc组件src/App.vue
1
2
3
4
5
6
7
8
9
<template>
  {{ msg }}
</template>
<script>
export default {
  name: "app",
  props: ["msg"],
};
</script>
  1. 在入口文件src/main.js中引入App.vue组件，并将其挂载到id=app的节点上
1
2
3
4
import { createApp } from "vue"; // 引入 Vue 3 源码
import App from "./App"; // 引入 App.vue 组件
const app = createApp(App, { msg: "hello Vue 3" }); // 渲染 App 组件，并传递 msg 参数 “hello Vue”
app.mount("#app"); // 渲染 App
  1. 使用命令npm run dev运行项目

运行项目

  1. 下载Vue3源码
1
git clone -b https://github.com/vuejs/vue-next.git

目录：

总目录

package目录

  1. 安装Vue3依赖
1
cd vue-next && yarn --registry https://registry.npm.taobao.org

  1. 使用命令yarn build编译Vue3源码并打包

  2. 使用命令yarn dev --s启动源码开发环境

启动源码

  1. 修改vue的demo项目webpack.config.js文件，引入vue源码文件vue-next/packages/vue/dist/vue.global.js。(webpack.config.js最终文件见文末附录)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
.devServer.host("0.0.0.0") // 服务器外部可访问
.disableHostCheck(true) // 关闭白名单校验
.contentBase([
path.resolve(__dirname, "./public"),
path.resolve(__dirname, "../vue-next"),
]) // 设置一个 express 静态目录
.historyApiFallback({
disableDotRule: true, // 禁止在链接中使用 "." 符号
rewrites: [
    { from: /^\/$/, to: "/index.html" }, // 将所有的 404 响应重定向到 index.html 页面
],
})
.port(8080) // 当前端口号
.hot(true) // 打开页面热载功能
.sockPort("location") // 设置成平台自己的端口
.open(true);

config.externals({
vue: "Vue", // 告诉 webpack，让它在加载 vue 模块的时候去 CDN 全局变量里面找 Vue
});
  1. 启动demo项目，在url后添加/packages/vue/dist/vue.global.js查看源码文件（可使用同样方法输入其他文件相对路径查看）

源码文件

  1. 在demo项目public/index.html中以CDN形式导入本地vue3源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!-- 以 CDN 形式导入我们本地的 Vue 3 源码 -->
    <script src="/packages/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <noscript>your browser should support javascript!</noscript>
    <div id="app"></div>
    <!-- html-webpack-plugin 将自动引入入口文件 -->
  </body>
</html>
  1. 启动后可在浏览器开发者工具中查看源码进行断点调试。

源码调试

附录

webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
const config = new (require("webpack-chain"))
const path = require("path");
// const isDev = !!process.env.WEBPACK_DEV_SERVER; // 判断是否是开发环境

config
.context(path.resolve(__dirname,"."))//上下文目录
.entry("app")//入口文件名称
.add("./src/main.js")//入口文件为./src/main.js
.end()
.output.path(path.join(__dirname,"./dist"))//输出目录为dist
.filename("[name].[hash:8].js")//打包出的bundle名称
.publicPath("/")//公共目录
.end()
.resolve.extensions.add(".js")
.add(".vue")
.end()
.end()
.module.rule("vue")
.test(/\.vue$/)
.use("vue-loader")
.loader("vue-loader")
.end()
.end()
.end()
.plugin("vue-loader-plugin")
.use(require("vue-loader").VueLoaderPlugin,[])
.end()
.plugin("html")
.use(require("html-webpack-plugin"),[
    {
        template: path.resolve(__dirname,"./public/index.html"),//指定模版文件
        chunks: ["app"],//指定需要加在的chunk
        inject: "body"//指定script脚本注入的位置为body
    }
])
.end()
.devServer.disableHostCheck(true)
.contentBase(
    [
        path.resolve(__dirname,"./public"),
        path.resolve(__dirname,"../vue-next/vue-next")
    ]
)//设置express静态目录
.historyApiFallback({
    disableDotRule: true,
    rewrites:[
        {
            from: /ˆ\/$/,
            to: "index.html"
        }
    ],
})
.port(8080)
.hot(true)
.sockPort("location")
.open(true)
.end()
.devtool('eval-source-map');

config.externals({
    vue: "Vue",//告诉webpack，在加载vue模块时去CDN全局变量里找Vue
});
// config.when(
//     !isDev,
//     ()=>{
//         // 生产环境配置
//         config.devtool(null) // 生产不生成 source-map，默认行为
//     },
//     ()=>{
//         // 开发环境配置
//         config.devtool('eval-source-map') // 获取完整的 source-map，并且用 eval 函数执行
//     }
// );

module.exports = config.toConfig();
  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • © 2020-2024 Aweso Lynn
  • PV: UV: