webpack集成vue3开发环境方法(使用.vue组件进行高效开发)

前言

在 webpack 中进行细粒度的配置可以应对更多场景的需求。

为了高效率开发集成 vue 也是框架首选。

下面介绍如何在 webpack 项目中集成 vue3 的开发环境。

安装依赖

安装 vue3 核心:

	yarn add vue@next

安装 vue3 的模板编译器和 vue3 的 loader :

	yarn add -D @vue/compiler-sfc vue-loader@next

配置

在 webpack 配置文件内加入 vue-loader 的插件:

const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  plugins: [
    new VueLoaderPlugin()
  ]
}

再配置 vue-loader :

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ],
  },
}

注意要写在最上面先解析,再交由 babel 处理。

使用

之后,我们就可以在任意位置使用 .vue 文件进行高效开发!

如果需要使用 JSX ,需要安装 babel 转换插件:

	yarn add -D @vue/babel-plugin-jsx

之后在 babel.config.json 内添加:

{
  "plugins": [ "@vue/babel-plugin-jsx" ]
}

从而就可以使用 .jsx 文件了,关于 vue3 中 jsx 的使用方法,可见:

《在 Vue3.0 中使用 JSX 的简单入门》

其他

可见在 webpack 中集成 vue3 是非常简单的。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页