如何用vue-cli4.0構建多頁面模板腳手架!？本文實戰教你

multipage

Github地址 github.com/qinouz/mult…
基於 vue-cli4.0 構建 多頁面 模板腳手架!

啓動項目

git clone https://github.com/qinouz/multipage.git cd multipage npm install npm run dev 複製代碼

目錄

• √ Vue-cli4
• √ 根據目錄結構生成多頁面配置
• √ 配置多環境變量
• √ rem 適配方案
• √ Vuex 狀態管理
• √ Vue-router
• √ 配置 alias 別名
• √ 配置 proxy 跨域
• √ 配置 打包分析

✅ 生成多頁面配置

build/newUtils.js 裏的 getEntry方法 根據目錄下的 全部html文件生成頁面路徑以及對應html的對象。
var pages = utils.getEntry(['./src/module/**/*.html']);

返回結果爲：

{ 'aa/as/dd/fd/ddd': './src/module/aa/as/dd/fd/ddd/ddd.html', 'aa/ddd': './src/module/aa/ddd/ddd.html', 'ss': './src/module/ss/ss.html' }另外我搞前端開發9年了。若是你們有問題或者交流經驗能夠來個人扣扣裙 519293536 找 我 都會盡力幫你們哦 getEntryPages 方法 var mpages = utils.getEntryPages(pages); 生成最終多頁面配置，目錄結構須要按照必定規則， 文件夾名與主文件名以及模板html 文件名 必需要一致，層級結構不限制。getEntryPagesvar mpages = utils.getEntryPages(pages);

├── module
  │   └── ss
  |   |   └── ss.html
  |   |   └── ss.js
複製代碼

返回結果爲：

{ 'aa/as/dd/fd/ddd':{ entry: './src/module/aa/as/dd/fd/ddd/ddd.js', template: './src/module/aa/as/dd/fd/ddd/ddd.html' }, 'aa/ddd':{ entry: './src/module/aa/ddd/ddd.js', template: './src/module/aa/ddd/ddd.html' }, ss:{ entry: './src/module/ss/ss.js', template: './src/module/ss/ss.html' } } 複製代碼

✅ 配置多環境變量

package.json 裏的 scripts 配置 dev qa prd，經過 --mode xxx 來執行不一樣環境

• 經過 npm run dev 啓動本地 , 執行 development
• 經過 npm run qa 打包測試 , 執行 staging
• 經過 npm run prd 打包正式 , 執行 production

"scripts": { "dev": "vue-cli-service serve --open", "stage": "vue-cli-service build --mode staging", "build": "vue-cli-service build", } 複製代碼

配置介紹

  以 VUE_APP_ 開頭的變量，在代碼中能夠經過 process.env.VUE_APP_ 訪問。   好比,VUE_APP_ENV = 'development' 經過process.env.VUE_APP_ENV 訪問。   除了 VUE_APP_* 變量以外，在你的應用代碼中始終可用的還有兩個特殊的變量NODE_ENV 和BASE_URL

在項目根目錄中新建.env.*

• .env 本地開發環境配置

NODE_ENV = development
VUE_APP_SERVICE_URL =
BASE_URL = ./

複製代碼

• .env.qa 測試環境配置

NODE_ENV = production
VUE_APP_SERVICE_URL = http://www.baidu.com
BASE_URL = /shopsystem/static/weixin/dist/
複製代碼

• .env.prd 正式環境配置

NODE_ENV = production
 VUE_APP_SERVICE_URL = http://www.baidu.com
 BASE_URL = /shopsystem/static/weixin/dist/
複製代碼

配置對應環境的變量，拿本地環境文件 .env 舉例，用戶能夠根據需求修改

// 本地環境配置
NODE_ENV = development
VUE_APP_SERVICE_URL =
VUE_APP_TEST=test BASE_URL = ./ 複製代碼

根據環境不一樣，變量就會不一樣了

// 根據環境不一樣引入不一樣baseApi地址 const instance = axios.create(); var path = process.env.VUE_APP_SERVICE_URL; instance.defaults.baseURL = path; 複製代碼

▲ 回頂部

✅ rem 適配方案

不用擔憂，項目已經配置好了 rem 適配, 下面僅作介紹：

Vant 中的樣式默認使用px做爲單位，若是須要使用rem單位，推薦使用如下兩個工具:

• postcss-pxtorem 是一款 postcss 插件，用於將單位轉化爲 rem
• lib-flexible 用於設置 rem 基準值

PostCSS 配置

下面提供了一份基本的 postcss 配置，能夠在此配置的基礎上根據項目需求進行修改

// https://github.com/michael-ciniawsky/postcss-load-config module.exports = { plugins: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, // 換算的基數 selectorBlackList: [], // 忽略轉換正則匹配項 propList: ['*'], }), ] } } } 複製代碼

▲ 回頂部

父組件改變子組件樣式 深度選擇器

當你子組件使用了 scoped 但在父組件又想修改子組件的樣式能夠 經過 >>> 來實現：

<style scoped>
.a >>> .b { /* ... */ }
.a {
    /deep/ .b {
        ...
    }
}
</style>
複製代碼

▲ 回頂部

✅ Vuex 狀態管理

目錄結構

├── store
│   ├── modules
│   │   └── app.js
│   ├── index.js
│   ├── getters.js
複製代碼

main.js 引入

import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ el: '#app', router, store, render: h => h(App) }) 複製代碼

使用

<script> import {mapGetters} from 'vuex' export default { computed: { ...mapGetters(['userName']) }, methods: { // Action 經過 store.dispatch 方法觸發 doDispatch() { this.$store.dispatch('setUserName', '真乖，趕忙關注公衆號，組織都在等你~') } } } </script> 複製代碼

▲ 回頂部

✅ Vue-router

本案例採用 hash 模式，開發者根據需求修改 mode base

注意：若是你使用了 history 模式，vue.config.js 中的 publicPath 要作對應的修改

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export const router = [ { path: '/', name: 'index', component: () => import('@/views/home/index'), // 路由懶加載 meta: { title: '首頁', // 頁面標題 keepAlive: false // keep-alive 標識 } } ] const createRouter = () => new Router({ // mode: 'history', // 若是你是 history模式 須要配置 vue.config.js publicPath // base: '/app/', scrollBehavior: () => ({y: 0}), routes: router }) export default createRouter() 複製代碼

更多:Vue Router

▲ 回頂部

✅ 配置 alias 別名

const path = require('path') const resolve = dir => path.join(__dirname, dir) const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) module.exports = { chainWebpack: config => { // 添加別名 config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) } } 複製代碼

▲ 回頂部

✅ 配置 proxy 跨域

若是你的項目須要跨域設置，你須要打來 vue.config.js proxy 註釋 而且配置相應參數

module.exports = { devServer: { // .... proxy: { //配置跨域 '/api': { target: 'https://test.xxx.com', // 接口的域名 // ws: true, // 是否啓用websockets changOrigin: true, // 開啓代理，在本地建立一個虛擬服務端 pathRewrite: { '^/api': '/' } } } } } 複製代碼

▲ 回頂部

✅ 配置 打包分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { chainWebpack: config => { // 打包分析 if (IS_PROD) { config.plugin('webpack-report').use(BundleAnalyzerPlugin, [ { analyzerMode: 'static' }

以上的都會了嗎？另外我搞前端開發9年了。若是你有問題或者交流經驗能夠來個人扣扣裙 519293536 找 我 都會盡力幫你們哦本文的文字及圖片來源於網絡加上本身的想法,僅供學習、交流使用,不具備任何商業用途,版權歸原做者全部,若有問題請及時聯繫咱們以做處理前端5