从零搭建简单Vue脚手架

1.安装相关依赖

npm i vue router

npm i 
webpack 
webpack-cli

vue-loader 
vue-template-compiler 

sass-loader 
sass 
css-loader 
style-loader 

babel-loader 
@babel/core 
@babel/preset-env  
-D

2.创建`dist`和`src`文件夹

1.在dist文件夹下创建index.html，内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

2.在src文件夹下创建main.js,内容如下

import { createApp } from 'vue'
import App from './App.vue'

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

3.创建`webpack.config.js`

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname,'dist'), // windows和linux系统路径表示不同，一个是/,一个是\
    filename:'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          { loader:'vue-loader',options:{}}
        ]
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader', options:{} },
          { loader: 'css-loader', options:{} },
          { loader: 'less-loader', options:{} }
        ]
      },
      {
        test: /\.mjs$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets:['@babel/preset-env']
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type:'assets/resource'
      }
    ]
  },
  plugins: [ // 增强webpack功能
    new VueLoaderPlugin(), // vue-loader可以处理template，plugin可以编译vue文件里的js和css
  ]
}

4.在`package.json`中配置脚本命令

  "scripts": {
    "serve": "webpack --mode=development --watch",
    "build": "webpack --mode=production"
  },

从零搭建简单Vue脚手架

1.安装相关依赖

2.创建dist和src文件夹

3.创建webpack.config.js

4.在package.json中配置脚本命令

悦读

2.创建`dist`和`src`文件夹

3.创建`webpack.config.js`

4.在`package.json`中配置脚本命令