Vue3 runtime,compile方式及自定义脚手架的搭建

一、Vue3 几种工作模式：

1. 前端Just In Time方式：
2. 前端编译方式：
3. 后端Ahead Of Time方式： 使用vue-loader+webpack自定义一个脚手架
4. 使用预制脚手架方式：vue-cli,vite,或者从github直接克隆一个脚手架

二、JIT方式：

网页示例代码：
说明：
(1) 注意使用的js文件： vue.runtime.global.prod.js，请细品这个名字
(2) 由于不能使用编译方式，所能不能使用插值，绑定等一系列技术，而只能使用render,h等一系列低层API。

<script src="https://unpkg.com/vue@3.2.31/dist/vue.runtime.global.prod.js"></script>
<div id="app"></div>

<script>
        let app=Vue.createApp({
            render(){
                let x=Vue.h('li',{},"ok1")
                let y=Vue.h('li',{},"ok2")
                return Vue.h('div',{},[x,y])
            }
        })    
        app.mount('#app')
 </script>

三、前端编译：

网页示例代码：
(1) 注意使用的js文件： vue.global.prod.js，请细品这个名字
(2) 由于可以使用编译方式，所能可以使用模板，插值，绑定等一系列技术。
(3) 由Vue原生不支持JSX表达式，所以此时的模板只能为字符串形式提供，同时代码在浏览器加载网页时，预先编译，所以首次访问速度会受到影响。

<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
<div id="app"></div>

<script>
       
        let app1=Vue.createApp({
            template: `<div>{{name}}</div>`,
            data(){return {name:'john'}}
        })
        app1.mount('#app')
 </script>

四、AOT 方式自定义脚手架：

1. package.json中依赖:
   说明：
   （1） 核心是加入了 vue-loader，它的作用是可以载 xxx.vue文件模板，并进行编译（没有@babel/preset-jsx那么直接）
   （2）为保证说明问题，我没有加入style-loader,css-loader,file-loader等不关键的loader，后期可以自行加入

  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.4",
    "vue-loader": "^17.0.0",
    "webpack": "^5.71.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "vue": "^3.2.31"
  }

2. webpack.config.js文件内容：
   说明：
   （1）关键点：加入VueLoaderPlugin 和 vue-loader 配置

const path = require('path');
const {VueLoaderPlugin}= require('vue-loader')
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    devServer:{
        contentBase: './dist'
    },
    module: {
        rules:
            [
                {
                    test: /\.js$/, exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader', options: { presets: ['@babel/preset-env'] }
                    }
                },
                {
                    test: /\.vue$/, exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'vue-loader' 
                    }
                }
            ]
    }
};

3. 测试：
   在 src/index.js加入代码：
   说明： 这与 vue-cli 或 vite 在核心功能上基本没有区别了。

import {createApp} from 'vue'
import MyApp from './MyApp.vue'
let app=createApp(MyApp)
app.mount('#app')