webpack 打包vue多页面应用
quickstart
#clone registry
git clone [email protected]:liuziyang/vue-multiple.git
cd vue-multiple
# install dependencies
npm install
# serve with hot reload at localhost:8000
npm run dev
# build for production with minification
npm run build
use
项目结构
项目结构类似 vue
单页应用配置
src: 项目源文件
src/components : 通用组件
src/views/** : 页面文件
src/views/** /index.js: 页面的入口文件
src/views/** /app.vue : 使用单文件组件时的根组件
打包时会针对 src/views 目录下的子文件夹生成对应的页面,页面名称与文件夹名称相同。
单文件组件
项目中可以使用单文件组件,需要在每个文件夹下提供根组件组件
示例:
// ~src/views/index/app.vue
<template>
<div class="index"></div>
</template>
export default {
beforeCreate () {
document.title = 'vue 多页面应用开发'
},
}
注意: 由于使用的html模板文件统一是项目根目录下的index.html,所以对应的title应该在每个页面的根组件中使用 document.title
来修改。
// 入口文件
// ~src/views/index/index.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: '#app',
render: h => h(App)
})
注意:入口文件名称统一使用了index.js