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 檔案名 必須要一致，層級結構不限制， ├── 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/62339.html
標籤：JavaScript