记一次活动页开发：不使用构建工具搭建vue+vue-router项目并实现组件化、模块拆分

需求背景

一个活动页面的需求，其中有个页面和别的项目(使用vue开发的)中的页面比较类似，因此就想着活动页也使用vue搭建，可以直接把代码复制过来使用。简单活动页并不打算引入构建工具，因此就开始了本次的踩坑之旅。

实现过程

首先是模块化：因为本次活动主要在微信等现代浏览器中打开，因此直接用ES6提供的export/import就可以了。详见 MDN import

在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。

在组件化的实现上，浏览器无法直接解析.vue的文件；直接写template字符串比较反人类，可读性也比较差。因此就找到了这个神器： http-vue-loader ，它可以把.vue的文件解析成一个promise提供给vue使用。看一下它的工作流程：

http request the vue fileload the vue file in a document fragmentprocess each section (template, script and style)return a promise to Vue.js (async components)then Vue.js compiles and cache the component

使用http请求.vue的文件再做解析，从而避免浏览器直接访问，来间接达到一个“编译”的效果。在获取到http-vue-loader解析完的数据之后就可以把它丢给vue或者vue-router用了。

主要代码


<!-- index.html 安利jsdelivr的cdn服务，速度超快！ -->
<script src="<https://cdn.jsdelivr.net/npm/http-vue-loader>"></script>
<script src="<https://cdn.jsdelivr.net/npm/vue>"></script>
<script src="<https://cdn.jsdelivr.net/npm/vue-router>"></script>
<script type="module">
    import routes from './js/routes.js'
    import hosts from './js/env.js'
    import validators from './js/valid.js'
    const router = new VueRouter({
        routes
    })
    const app = new Vue({
        router
    }).$mount('#app');
</script>


// routes.js
export default [{
    path: '/home',
    component: httpVueLoader('home.vue')
}]

后续

那个和别的项目类似的页面被砍了：）