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 11 months ago
src init 11 months ago
.eslintrc.js init 11 months ago
.postcssrc.js init 11 months ago
README.md init 11 months ago
babel.config.js init 11 months ago
package.json init 11 months ago
vue.config.js init 11 months 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'
      }
    }