vue多页面demo
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
燕鹏 ed267f1355 init 4 years ago
src init 4 years ago
.eslintrc.js init 4 years ago
.postcssrc.js init 4 years ago
README.md init 4 years ago
babel.config.js init 4 years ago
package.json init 4 years ago
vue.config.js init 4 years ago

README.md

基于 vue-cli 3.0.0 构建的多页面基础项目模板

前言


该项目跑了下 vue-cli 3.0.0 多页面项目创建的流程,就当个以后多页项目的雏形了,新版的 vue-cli 已经默认可以支持多页面构建了(不需要之前版本的那种修改 webpcak 配置文件了),可以共用放在 src 目录下的 store.js 里面的数据

效果 GIF 图


效果.gif

参考资料


运行方法(nodejs 版本建议 8.10.0 以上)


  • 装包

    # 先得全局安装 vue-cli 3.0.0 已安装的请忽略此步骤
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    
    # 本项目安装依赖
    yarn
    # OR
    npm install
    
  • 运行

    # 开发
    npm run serve
    
    # 生产
    npm run build
    

主要修改的地方


  • 将之前默认的路径改为以 @ 为地址的索引

    image.png image.png

  • 新建 indexsubpage 文件夹,内部的文件结构与之前 SPA 基本一致,只是将 store.js 文件单独提了重来以便数据公用

  • 重点就是新建的 vue.config.js 配置文件里面的内容,源码和注释如下所示

    // vue.config.js
    module.exports = {
      pages: {
        index: {
          // 页面的入口文件
          entry: 'src/index/main.js',
          // 页面的模板文件
          template: 'public/index.html',
          // build 生成的文件名称  例: dist/index.html
          filename: 'index.html'
        },
        // template 默认会去找 public/subpage.html 页面,如果找不到会使用 public/index.html 文件
        // 输出文件会默认的推断为 subpage.html
        subpage: 'src/subpage/main.js'
      }
    }