需求背景
一个活动页面的需求,其中有个页面和别的项目(使用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') }]
后续
那个和别的项目类似的页面被砍了:)