一步一步来实现webpack+vue的多页面应用

来源：互联网发布：js remove和delete 编辑：程序博客网时间：2024/05/29 10:43

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

0 0