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

来源:https://www.cnblogs.com/chengxuyuanaa/archive/2020/06/18/13156378.html
-Advertisement-
Play Games

multipage Github地址 github.com/qinouz/mult…基於 vue-cli4.0 構建 多頁面 模板腳手架! 啟動項目 git clone https://github.com/qinouz/multipage.git cd multipage npm install ...


multipage

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

啟動項目


git clone https://github.com/qinouz/multipage.git

cd multipage

npm install

npm run dev
複製代碼

目錄

✅ 生成多頁面配置

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 文件名 必須要一致，層級結構不限制。
  ├── 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 配置

下麵提供了一份基本的 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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • package.json中 ^ 和 ~ 的區別
    "devDependencies": { "antd": "^3.1.4", "babel-plugin-import": "~1.1.0", "classnames": "2.2.5", "qs": "^6.3.0", "robe-ajax": "^1.0.1", "expect": "^1.20 ...
  • position
    # 從零開始的前端生活--position 包含塊 定義：什麼是包含塊，就是元素用來計算和定位的一個框，可以說是參照物吧。比如width： 50%；他是參照哪個元素的50%，那個元素就是“包含塊”。而絕對定位元素absolute的寬度是相對第一個position不為static的祖先元素計算的。計 ...
  • 常見正則表達式
    字元串 去除字元串中所有空格 str = str.replace(/\s*/g, '') // 去除所有空格 價格校驗 val = val.replace(/[^\d.]/g, '') // 清除“數字”和“.”以外的字元 .replace(/\.{2,}/g, '.') // 只保留第一個. 清除 ...
  • 循序漸進VUE+Element 前端應用開發(11）--- 圖標的維護和使用
    在VUE+Element 前端應用中，圖標是必不可少點綴界面的元素，因此整合一些常用的圖標是非常必要的，還好Element界面組件裡面提供了很多常見的圖標，不過數量不是很多，應該是300個左右吧，因此考慮擴展更多圖標，我引入了vue-awesome組件，它利用了Font Awesome的內置圖標，實... ...
  • 微信小程式報錯：Expecting 'STRING', got INVALID
    具體錯誤如下圖： 這是因為在微信小程式的 app.json 文件中是不能包含有註釋的，只需要把註釋去掉就可以了。 ...
  • 前端學習路線圖與全套視頻（基礎篇+進階篇+高級篇）
    面對這麼多的知識點，有的盆友就麻爪了…… 我是誰？ 我該從哪裡開始看？ 我該怎麼看？ 我該看多少？ 這，是一個問題。 我們貼心的做了一個學習線路圖： 然並卵，很多人還是一頭霧水…… 我們先對每階段課程做個簡單介紹： PC端頁面製作 學習HTML+CSS搭建網頁、PhotoShop切圖等基礎知識，屬於 ...
  • 如何用Node中的Express應用框架的技術選型？本文詳解
    前言現在的 Node 對於前端而言可以涵蓋各個方面，包括命令行介面、插件、依賴庫、腳手架以及 Web 服務等。本文是一篇對於 Node 使用的淺談文章，會簡單講解一些個人使用 Node 的經驗，分享的內容主要可分為三個方面： 工具篇 插件篇 服務篇 工具篇會講解使用 NPM 發佈命令行介面的簡單教程 ...
  • 如何手寫Vue-next響應式呢？本文詳解
    前言 1.本文將從零開始手寫一份vue-next中的響應式原理,出於篇幅和理解的難易程度,我們將只實現核心的api並忽略一些邊界的功能點 本文將實現的api包括 track trigger effect reactive watch computed2.最近很多人私信我問前端問題，博客登陸的少沒及時 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類