Vue3假如没有@vue/cli应当如何做

Vue3 发布这么久了，相信大家都已经尝过鲜了，不知道练习的时候是用的 Vue 官方脚手架 @vue/cli 还是新一代的构建工具 Vite ；假入官方没有提供呢？我们又当如何做？下面咱就直接开始用 webpack 搭建一个最简的支持单文件组件的 Vue 应用。

基础构建

第一不就先创建一个文件夹，然后再内部启动命令行 npm init -y 生成 package.json 文件；

既然谈到用 webpack 构建，直接开始老三样 webpack webpack-dev-server webpack-cli

npm webpack webpack-cli webpack-dev-server -D

当然我们还需要一些其他的插件，比如生成 HTML 文件 html-webpack-plugin，清空上次构建结果的 clean-webpack-plugin

npm install html-webpack-plugin clean-webpack-plugin -D

最后我们要安装一些样式相关的 loader 这里咱们就使用 scss

npm install css-loader style-loader sass sass-loader -D

到这里暂时我们需要的以来就已经安装好了，根目录新建 webpack.config.js 文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  // 这里是环境变量，可以通过安装cross-env这个包再打包时进行设置 npm install cross-env -D
  mode: process.env.NODE_ENV,
  // 出入口
  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  // 配置 loader
  module: {
    rules: [
      {
        test: /\.css/i,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  // 配置插件
  plugins: [
    // 记得在项目根目录新建 模板 index.html 用过脚手架的都懂😊
    new HtmlWebpackPlugin({
      title: "vue-cli",
      template: path.resolve(__dirname, "./public/index.html")
    }),
    new CleanWebpackPlugin()
  ]
};

现在就开始在 package.json 中配置启动和打包命令

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack server",
    "build": "cross-env NODE_ENV=production webpack"
  },

关于命令这一块我想强调一下可能遇到的坑；之前玩过 webpack 的同学可能已经看出来了，为什么启动命令不是 webpack-dev-server 而是 webpack server；由于我用的是 webpack5 了规定还是要这样的写的，如果你下载的是 webpack3 及一下应该是可以用 webpack-dev-server 的；

如果启动项目碰到类似下面的报错可参考 Cannot find module 'webpack-cli/bin/config-yargs'

降版本方案点这里 👉 我是链接

新版本解决方案点这里 👉 我是链接

最后我们在入口文件 main.js 中随便打印两句话看看是否可行；

如果有强迫症的同学强去除图中的警告可以在 webpack.config.js 中新增一个配置项 devtool: "inline-source-map" 具体可以参考我是链接

Vue 构建

完成以上步骤后咱们的应用就能跑起来了，但这并不是目的，愿望是最终要支持 Vue 文件的；要完成这一步咱们还是需要一些 loader 和 plugin 的；

了解 Vue2 的同学应该知道，如果要支持单文件组件(sfc)需要两个包 vue-loader vue-template-compiler；那咱们就先试一下是否可行；

npm install @vue/next

npm install vue-loader vue-template-compiler -D

然后修改 webpack.config.js

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

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

然后我们在项目根目录新建 .vue 入口文件 App 简单的写一点代码最后引入到 main.js 中

<!-- App.vue -->
<template>
  <!-- vue3 其实可以不要根标签 -->
  <div>
    {{ msg }}
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const msg = ref("hello world");
    return {
      msg
    };
  }
};
</script>

// mian.js
import { createApp } from 'vue';
import App from './App';

createApp(App).mount('#app');

最后启动项目，可能会碰到以下错误；

重点是没有找到 parseComponent ？原因就是 vue-template-compiler 移除了这个方法，可见 Vue3 用这个插件是不可行的；当然 vue-template-compiler 只是其中一部分的原因；那咱们就尝试解决这个问题；

相信大部分同学看 Vue3 文档的时候都漏掉了一个点；在这里这里面的 vue-loader 已经是 16 版本了，那就先更新一下

npm install vue-loader@16.2.0 -D

然后再启动项目，依然会报错，但是这次的错误就显而易见了； vue-loader 需要依赖 @vue/compiler-sfc

答案还是在官网，🙄 这文档写的真细，你在第一层它在第 n 层

OK！最后我们卸载掉原有的 vue-template-compiler 然后下载 @vue/compiler-sfc

npm install @vue/compiler-sfc -D

最后一次启动项目

perfect 成功，但是还有一个警告，大致意思就是我们现在用的是 vue 的构建版本，让我们换一下不要影响它 tree-shaking（清楚无用的代码）点这里

解决这个问题，需要在 webpack.config.js 中在加一项配置

resolve: {
  // 配置一个别名引用，不再用 builder 版本的 vue
  alias: {
    vue: "vue/dist/vue.esm-browser.js"
  }
},

示例代码在这里 👉 点我

至此全部结束，收官😉 ~ 感谢观看！