一步一步来实现webpack+vue的多页面应用
1、现如今的前端，一提到vue、react、angular，大家第一印象就是单页应用。但是连尤雨溪都说过，他从来没说过vue仅适用于单页应用，下面我们就一步一步来实现多页应用
2、全局环境配置和主要使用到的主要开发工具：node、npm、webpack、sass、vue
ps：这里多说一句，sass的安装依赖淘宝镜像会比较容易：
（1） 首先全局环境下配置淘宝镜像（注意:是全局环境，也就是c:user）
npm install -g cnpm --registry=https://registry.npm.taobao.org
（2） 进入项目根目录，安装node-sass
cnpm install node-sass --save-dev
（3）接下来就可以执行npm install安装依赖项了
npm install
3、如果大家觉得自己配置项目文件比较耗费时间，可以使用vue-cli脚手架工具安装项目基本目录
（1）首先全局环境下配置vue-cli（注意:是全局环境，也就是c:user）
npm install -g vue-cli
（2）初始化项目
vue init webpack "项目文件夹名称"
（3） 接着就会提示一些项目描述，是否使用单元测试、语法检查等等，实际开发可选yes,demo搭建可忽略
4、整理修改项目初始目录文件
（1）因为是多页面应用 ，所以项目根目录下的index.html实际是无用的
（2）src开发目录
assets: 公用css、js方法、sass方法等
components: 公用组件
module: 开发模块（可以理解为每个页面），建议每个页面，建一个文件夹
module/index: index模块
index.html：容器页面，相当于单页面中的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
</head>
<body>
<!-- 容器 -->
<app></app>
</body>
</html>
index.vue: 开发文件夹（ps:结构和普通vue文件一样）
img: 用于放置当前页面的图片（就近维护原则）
index.js：将index.vue的内容添加到index.html中
import Vue from "vue"
import App from "./index.vue"
/* eslint-disable no-new */
new Vue({
el: "body",
components: { App }
})
index.scss: 当前样式文件
（3） webpack配置（ps:这里的webpack配置较多，只是说明一些重要的配置）
关键是指定入口文件，这里不再只是main.js，而是循环出的对象或者数组
entry: entries,
output: {
path: config.build.assetsRoot,
publicPath: config.build.assetsPublicPath,
filename: "[name].js"
},
resolve: {
extensions: ["", ".js", ".vue"],
fallback: [path.join(__dirname, "../node_modules")],
alias: {
"src": path.resolve(__dirname, "../src"),
"assets": path.resolve(__dirname, "../src/assets"),
"components": path.resolve(__dirname, "../src/components"),
"vux-components": "vux/src/components"
}
}, 获取entries
var entries = getEntry("./src/module/**/*.js");
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split("/").splice(-3);
// 正确输出js路径
pathname = tmp.splice(0, 1) + "/" + basename;
entries[pathname] = entry;
});
return entries;
}5、配置好后，启动npm run dev,方位localhost:8083/module/index.html即可
在index.vue中为按钮添加“点击跳转”事件
跳转后的页面
6、项目源码 ：https://github.com/chuanzaizai/vue-multi-page
- 上一篇： vue、vue-router切割js,实现按需加载
- 下一篇：没有了
