使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（三）添加Vue环境

笔特 | 11/16/2022, 6:32:23 AM | 367 次阅读

1 引言

为了能够更好的理解webpack，特准备了这份从零开始开始搭建教程，不使用官方的脚手架，不使用预定义配置，完全从零开始搭建一个使用 Webpack5 构建的 Vue3 + TypeScript 的项目开发环境。本篇文章我们将加入vue配置，以支持vue开发网页项目。

关键词

Webpack5
Vue3
TypeScript
JavaScript

文章列表

使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（一）搭建编译环境
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（二）配置HTML模板
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（三）添加Vue环境
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（四）添加Vue的样式
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（五）添加Less支持
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（六）添加Vue的TS支持
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（七）添加静态文件
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（八）不同环境的配置
使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（九）ES语法转换

2 添加依赖

yarn add vue vue-router vuex vue-loader @vue/compiler-sfc
yarn add -D vue-loader

1
2

// package.json新增内容
{
  "devDependencies": {
    "vue-loader": "^17.0.0"
  }
  "dependencies": {
    "@vue/compiler-sfc": "^3.2.41",
    "path": "^0.12.7",
    "vue": "^3.2.41",
    "vue-router": "^4.1.5",
    "vuex": "^4.1.0"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

vue / vue-router / vuex // 三大件对应3.*版本的
VueLoaderPlugin
@vue/compiler-sfc // 替换原来的 vue-template-compiler 版本需要与vue相同
vue-loader

3 配置

// webpack.config.cjs
// ... 表示忽略的无关代码
// ...
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader'
        }]
      }
    ],
  },
  plugins: [
    // ...
    new VueLoaderPlugin()
  ],
  // ...
  resolve: {
    extensions: [".ts", ".js", ".vue"]
  },
  // ...
}

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

4 添加Vue声明文件

// src/shims-vue.d.ts

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

1
2
3
4
5
6
7
8

5 写点代码演示下vue项目

5.1 新建app.vue

<template>
  <div>
    <a>测试 Vue 文件</a>
  </div>
</template>

1
2
3
4
5

5.2 改造index.ts

// src/index.ts

// 引入vue的createApp方法创建应用
import { createApp } from "vue"
// 引入vue入口文件
import App from "./app.vue"

import { a, Add } from "./common"

console.log(Add(a, 9))
// 创建应用
let instance = createApp(App)
// 挂载到#app,模板HTML的body中必须有这段代码：<div id="app"></div>
instance.mount("#app")

1
2
3
4
5
6
7
8
9
10
11
12
13
14

5.3 错误处理

如果你遇到这种警告

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

添加以下配置到webpack.config.cjs中暂时解决打包文件过大的问题。

module.exports = {
  performance: {
    hints: false
  },
}

1
2
3
4
5

6 演示

执行: yarn dev，打开浏览器查看结果
演示结果

别急：目前的vue文件还只有template段，还有JavaScript/TypeScript和less/css段没写。