vue-cli多页脚手架

代码仓库

• https://github.com/xuxiaozhou/ai_vue

上手

# 安装依赖
npm i
# 开发
npm run dev
# 打包
npm run build
# 打包dll文件
npm run dll

注意事项

• 复制文件时注意.babelrc/.editorconfig/.gitignore/.postcssrc.js这三个文件别漏

提交代码

• 只想提交代码 不执行 npm run build
• 发布服务器 执行npm run build

开发目录(src/static)

src
    - assets        
        - js        一些js函数
            - api.js    公共的发送ajax请求文件
            - url.js    公共请求的路径
        - less      less文件
    - components    公共组件
    - mixins        混合 (自行看vue文档)
    - pages 多入口目录
        - base  base.html文件目录
            - components  这个html的组件
            - page  这个html的路由页面组件
            - store (复杂)vuex目录
            - store.js  (简单点)的vuex文件
            - index.js 此目录的入口文件
            - Index.vue  此目录的入口vue
            - router.js  此目录的路由
static 静态的资源（整个目录会被复制到app目录下）
    - css
    - dll   提前编译好的第三方库js文件
    - fonts 字体
    - img   图片  项目里的所有图片都放在这个目录
        - 引用方式  `/static/img/**`             

别名

具体配置和详情请看 build/webpack.base.conf.js 中的alias

几个关键的别名

• less -> src/assets/less
• tool -> src/assets/js
• com -> src/components
• mixins -> src/mixins

温馨提示

• less的引用 @import "~less/mixin.less";
• 图片的话全部放在static/img目录
• 页面组件引用方式 component: () => import('./page/Ticket/Ticket.vue')

实现

• 多入口文件
• 提取dll文件
• 异步组件

技术栈

• vue全家桶
• webpack
• axios

核心的修改代码

// 新增入口和输入的函数
./build/utils.js

// 修改入口文件
./build/webpack.base.conf.js
entry: utils.entries(),

// 修改dev和prod的输入html
./build/webpack.dev.conf.js
./build/webpack.prod.conf.js

// 删除
new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true
}),
// 新增
plugins:[
].concat(utils.buildHtml()

// 提取dll代码
./build/webpack.dll.conf.js
// 关键代码
entry: {
    vendor: [需要打包的第三方包]
},

// 配置script命令 package.json
"dll": "cross-env webpack -p --progress --config build/webpack.dll.conf.js"

// 执行 npm run dll
在 static/dll生成vendor.dll.js

// 修改 webpack.base.conf.js
const webpack = require('webpack')
module.exports = {
    //...
    plugins: [
        // ===== dll ========
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('../vendor-manifest.json'),
        })
        // ===== dll ========
    ],
}

// 在html文件中
<script type=text/javascript src=/static/dll/vendor.dll.js></script>

// dll文件中的库有新增或修改
先npm run dll，后npm run dev/npm run build