用最少的依赖和代码初始化一个vue3的工程

首先说明，初始化一个vue3工程最好使用@vue/cli 或者 vite 工具进行初始化。我之所以想实现用最少的依赖去初始化，因为我日常需要学习一些前端知识要基于一个项目脚手架，我又觉得使用官方脚手架每次初始化vue3下载的依赖着实有点多，才想着看看最简单的依赖会有哪些，所以才有了此文。

我这里是基于webpack进行预编译， 先放出package.json文件

{
  "name": "simplest-vue3-project",
  "version": "0.1.0",
  "description": "simplest vue3 demo project",
  "main": "index.js",
  "author": "Yanan",
  "license": "MIT",
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@vue/compiler-sfc": "^3.0.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.3",
    "vue-loader": "^16.1.2",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  }
}

目录结构如下，文件够少…

webpack.config.js的配置文件如下

const VueLoader = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader',
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new VueLoader.VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ]
}

最后想了想，不妨扔到github上吧，有需要的可以把代码拉下来。

https://github.com/liuurn/simplest-vue3-project