之前有一套 h5 的前端构建计划，可能反对同时治理构建多个绝对独立的 h5。在面对大量的，绝对独立的流动营销型 h5 时，这个解决方案十分实用 h5-webp。

因为我的项目相对来说简略，所以始终采纳命令式渲染形式，这显然是不太正当的。一旦遇到简单的我的项目，会有大量状态治理，路由治理，频繁的 dom 操作等，这时候咱们须要引入一套申明式渲染计划。

因为是对已有构建计划的降级，所以首选渐进式框架 vue。
渐进式框架的了解很喜爱的一段话 传送门

装置依赖

在实际过程中，首先尝试了 vue2 稳定版，然而思考到 vue3 的降级变动比拟大，最初还是决定采纳 vue3 。

vue2 的依赖装置：

npm install vue -Snpm install vue-loader -Dnpm install vue-template-compiler -Dnpm install vue-router -S

如果你想用最新的 vue3 ：

npm install vue@next -Snpm vue-loader@16.0.0-beta.4 -D 以后须要自行指定版本npm @vue/compiler-sfc -Dnpm install vue-router@next -S

每个 vue 包的新版本公布时，一个相应版本的 vue-template-compiler 也会随之公布。编译器的版本必须和根本的 vue 包放弃同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次降级我的项目中的 vue 包时，也应该匹配降级 vue-template-compiler。

webpack配置vue组件加载器

// 如果你抉择的是vue2// const VueLoaderPlugin = require('vue-loader/lib/plugin’);// 如果你抉择最新的vue3const { VueLoaderPlugin } = require('vue-loader’); let config = {    module: {        rules: [            {                 test: /\.vue$/,                loader: 'vue-loader'            },             …        ]    },    plugins: [        new VueLoaderPlugin(),        ...    ]};

vue3路由的配置

import Vue from "vue";import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'const routes = [    {        path: "/",        redirect: "/index"    },    ...];const router = createRouter({    // mode: 'history', // vue2 路由模式的配置形式    // history: createWebHistory(), // history模式    history: createWebHashHistory(), // hash模式    routes});export default router;

这里须要留神一下，这里 vue3 对于 hash / history 两种路由配置形式与 vue2 是不同的。