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

複製程式碼