• 基于vue3.0全家桶 + vant3.0 +scss + rem適配方案 + axios封裝，構(gòu)建H5模板腳手架

版本要求

• vue cli版本需要node 8.9 或者更高的版本。或者你可以使用nvm來(lái)切換node版本
• 本案例中，node版本的是12.15.0

項(xiàng)目地址

https://github.com/MrZHLF/vue3.0-vant-h5.git

簡(jiǎn)介

• 關(guān)注公眾號(hào): 回復(fù) “加群”，即可加入前端交流群
  

目錄

|———— public index.html文件|———— src| |———— api #api接口請(qǐng)求| |———— assets #資源目錄| |———— components #公共組件封裝| |———— config #環(huán)境變量配置| |———— layout #主目錄| |———— router #路由| |———— store #狀態(tài)管理| |———— util #工具類(lèi)| |———— views #組件以及頁(yè)面文件目錄| |———— App.vue #項(xiàng)目入口文件| |———— main.js #項(xiàng)目核心文件|———— .env.development #本地環(huán)境配置|———— .env.production.js #正式環(huán)境配置|———— postcss.config #PostCSS 配置|———— babel.config.js #babel常用配置|———— vue.config.js #vue常用配置項(xiàng)|———— package.json #項(xiàng)目配置文件|———— README.md #項(xiàng)目的說(shuō)明文檔，markdown 格式

? 配置多環(huán)境變量

package.json 里的 scripts 配置 serve build，通過(guò) --mode xxx 來(lái)執(zhí)行不同環(huán)境

• 通過(guò) npm run serve 啟動(dòng)本地 , 執(zhí)行 development
• 通過(guò) npm run build 打包正式 , 執(zhí)行 production

"scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build", }

配置介紹

??以 VUE_APP_ 開(kāi)頭的變量，在代碼中可以通過(guò) process.env.VUE_APP_ 訪問(wèn)。
??比如,VUE_APP_ENV = 'development' 通過(guò)process.env.VUE_APP_ENV 訪問(wèn)。
??除了 VUE_APP_* 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個(gè)特殊的變量NODE_ENV 和BASE_URL

在項(xiàng)目根目錄中新建.env.*

• .env.development 本地開(kāi)發(fā)環(huán)境配置

NODE_ENV='development' # must start with VUE_APP_ VUE_APP_ENV = 'development'

• .env.production 正式環(huán)境配置

NODE_ENV='production' # must start with VUE_APP_ VUE_APP_ENV = 'production'

這里我們并沒(méi)有定義很多變量，只定義了基礎(chǔ)的 VUE_APP_ENV development``production
變量我們統(tǒng)一在 src/config/env.*.js 里進(jìn)行管理。

這里有個(gè)問(wèn)題，既然這里有了根據(jù)不同環(huán)境設(shè)置變量的文件，為什么還要去 config 下新建三個(gè)對(duì)應(yīng)的文件呢？
修改起來(lái)方便，不需要重啟項(xiàng)目，符合開(kāi)發(fā)習(xí)慣。

config/index.js

// 根據(jù)環(huán)境引入不同配置 process.env.NODE_ENV const config = require('./env.' + process.env.VUE_APP_ENV) module.exports = config

配置對(duì)應(yīng)環(huán)境的變量，拿本地環(huán)境文件 env.development.js 舉例，用戶可以根據(jù)需求修改

// 本地環(huán)境配置 module.exports = {title: 'vue3.0-h5',baseApi: 'https://test.xxx.com/api', // 本地api請(qǐng)求地址 }

根據(jù)環(huán)境不同，變量就會(huì)不同了

// 根據(jù)環(huán)境不同引入不同baseApi地址 import { baseApi } from '@/config' console.log(baseApi)

? rem 適配方案

不用擔(dān)心，項(xiàng)目已經(jīng)配置好了 rem 適配, 下面僅做介紹：

Vant 中的樣式默認(rèn)使用px作為單位，如果需要使用rem單位，推薦使用以下兩個(gè)工具:

• postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem
• lib-flexible 用于設(shè)置 rem 基準(zhǔn)值

PostCSS 配置

下面提供了一份基本的 postcss 配置，可以在此配置的基礎(chǔ)上根據(jù)項(xiàng)目需求進(jìn)行修改

// https://github.com/michael-ciniawsky/postcss-load-config module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']},'postcss-pxtorem': {rootValue: 37.5,propList:['*'],selectorBlackList :['html'],minPixelValue :1.5,mediaQuery:false,exclude:'common',}} }

? VantUI 組件按需加載

• babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過(guò)程中將 import 的寫(xiě)法自動(dòng)轉(zhuǎn)換為按需引入的方式。

安裝插件

npm i babel-plugin-import -D

在babel.config.js 設(shè)置

// 對(duì)于使用 babel7 的用戶，可以在 babel.config.js 中配置 const plugins = [['import',{libraryName: 'vant',libraryDirectory: 'es',style: true},'vant'] ] module.exports = {presets: [['@vue/cli-plugin-babel/preset']],plugins }

使用組件

用哪個(gè)引入哪個(gè)，無(wú)需在頁(yè)面里重復(fù)引用

// 按需全局引入 vant組件 import { createApp } from 'vue'; import { Button } from 'vant';const app = createApp(); app.use(Button);

? Sass 全局樣式

• 創(chuàng)建vue項(xiàng)目的時(shí)候，選擇SCSS

<style lang="scss">/* global styles */ </style><style lang="scss" scoped>/* local styles */ </style>

scss資源文件目錄

├── assets │ ├── scss │ │ ├── index.scss # 全局通用樣式 │ │ ├── mixin.scss # 全局mixin │ │ └── variables.scss # 全局變量 | | └── reset.scss # 全局重置樣式

? Axios 封裝及接口管理

utils/request.js 封裝 axios ,開(kāi)發(fā)者需要根據(jù)后臺(tái)接口做修改。

• service.interceptors.request.use 里可以設(shè)置請(qǐng)求頭，比如設(shè)置 token
• config.hideloading 是在 api 文件夾下的接口參數(shù)里設(shè)置，下文會(huì)講

import axios from 'axios' import { baseApi } from './../config'const service = axios.create({baseURL: baseApi,withCredentials: false,timeout: 5000 })// request攔截器 request interceptor service.interceptors.request.use(config => {return config },error => {console.log(error);return Promise.reject(error) })// respone攔截器 service.interceptors.response.use(response => {const res = response.dataif(res.status && res.status !== 200) {return Promise.reject(res)} else {return Promise.resolve(res)} },error =>{return Promise.reject(error) }) export default service

接口管理

在src/api 文件夾下統(tǒng)一管理接口

• 你可以建立多個(gè)模塊對(duì)接接口, 比如 home.js 里是首頁(yè)的接口這里講解 getUser.js

import request from './../util/request.js'export function getUser() {return request({url: '/users',method: 'get'}) }

如何調(diào)用

// 請(qǐng)求接口 import { getUser } from '@/api/home'const params = { user: 'sunnie' } getUser().then((res) => {}).catch((error)=>{})

? Webpack 4 vue.config.js 基礎(chǔ)配置

如果你的 Vue Router 模式是 hash

publicPath: './', module.exports = {publicPath: './', // 署應(yīng)用包時(shí)的基本 URL。 vue-router hash 模式使用// publicPath: '/app/', // 署應(yīng)用包時(shí)的基本 URL。 vue-router history模式使用outputDir: 'dist', // 生產(chǎn)環(huán)境構(gòu)建文件的目錄assetsDir: 'static', // outputDir的靜態(tài)資源(js、css、img、fonts)目錄lintOnSave: !IS_PROD,productionSourceMap: false, // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。devServer: {port: 9527, // 端口號(hào)open: false, // 啟動(dòng)后打開(kāi)瀏覽器overlay: {// 當(dāng)出現(xiàn)編譯器錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏覆蓋層warnings: false,errors: true}// ...} }

? 配置 alias 別名

const path = require('path') const resolve = dir => path.join(__dirname, dir)module.exports = {chainWebpack:(config)=>{config.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('api', resolve('src/api')).set('views', resolve('src/views')).set('components', resolve('src/components'))} }

? 配置 proxy 跨域

如果你的項(xiàng)目需要跨域設(shè)置，你需要打來(lái) vue.config.js proxy 注釋 并且配置相應(yīng)參數(shù)

!!!注意：你還需要將 src/config/env.development.js 里的 baseApi 設(shè)置成 '/'

module.exports = {devServer: {// ....proxy: {//配置跨域'/api': {target: 'https://test.xxx.com', // 接口的域名// ws: true, // 是否啟用websocketschangOrigin: true, // 開(kāi)啟代理，在本地創(chuàng)建一個(gè)虛擬服務(wù)端pathRewrite: {'^/api': '/'}}}} }

? 去掉 console.log

// 獲取 VUE_APP_ENV 非 NODE_ENV，測(cè)試環(huán)境依然 console const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV) const plugins = [['import',{libraryName: 'vant',libraryDirectory: 'es',style: true},'vant'] ] // 去除 console.log if (IS_PROD) {plugins.push('transform-remove-console') }module.exports = {presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]],plugins }

如果感覺(jué)可以，幫我點(diǎn)一下星星

總結(jié)

以上是生活随笔為你收集整理的基于vue3.0全家桶H5模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。