Vue Cli 3 多页面应用搭建 -DEMO
-
创建项目, 然后采用默认配置
-
项目结构
- html 模板文件
- index.js (每个页面的入口文件)
6 更改vue.config.js
多页面其实就是指定多个入口,并且指定每个入口js文件的挂载点, 然后入口js文件负责将vue文件引入,渲染到当前模板的 #app 节点上
目前遇到的问题
热模块好像不太成熟,不知道是不是写法问题还是什么
有时候增加页面必须得 npm run serve 之后才能生效
还有的时候,写法变动太大,导致并没有热模块替换
这两种原因如果有一个有问题,就会导致,页面html 能显示, 但是并没有成功将 vue 挂载到那个#app 节点上,导致页面显示空白
第三方模块 (Element UI ,等 )
要引入 Element UI 的话, 我们如果是之前的那种,在main.js文件里面引入Element-UI 那么久相当于全局引用 , 但是我们现在已经成为了多页面, 所以我们只能 一个一个的 按需引入这个模块
我们通过Element UI 的按需加载文档来完成一步步配置
唯一可能要变的就是 babel 那里
我们现在需要更改的 是babel.config.js , 而不是.babellrc
我们将babel.config.js 改成这样
module.exports = {
presets: [
'@vue/app'
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
然后在我们想要引用的那个页面的入口文件进行按需引入
import Vue from 'vue'
import App from './index.vue'
// import ElementUI from 'element-ui'
// Vue.config.productionTip = false
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI)
import { Button } from 'element-ui';
Vue.component(Button.name, Button);
new Vue({
render: h => h(App),
}).$mount('#app')
在vue模板文件中,这样使用 就行了
<template>
<div>
<el-button>Click Me</el-button>
</div>
</template>
<script>
export default {
methods : {
}
}
</script>
<style>
</style>
之前全部引入的时候发现当我 npm run build 的时候 , vendor 的size有将近700K , 现在按需加载之后 , vendor 只剩下 87K 了
-a---- 2019/8/20 12:21 88237 chunk-vendors.64cf4dfc.js
-a---- 2019/8/20 12:21 444797 chunk-vendors.64cf4dfc.js.map
-a---- 2019/8/20 12:21 2247 index.1ee277a7.js
-a---- 2019/8/20 12:21 11546 index.1ee277a7.js.map
-a---- 2019/8/20 12:21 2021 info.2f9c13dd.js
-a---- 2019/8/20 12:21 10920 info.2f9c13dd.js.map
-a---- 2019/8/20 12:21 2061 list.e75b1e00.js
-a---- 2019/8/20 12:21 11007 list.e75b1e00.js.map
如果是普通的js 的话, webpack 默认有js tree shaking 来帮我们进行按需加载,这个应该没有什么太大的问题
