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

版本要求

• vue cli版本需要node 8.9 或者更高的版本?；蛘吣憧梢允褂胣vm來切換node版本
• 本案例中，node版本的是12.15.0

項目地址

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

簡介

• 關注公眾號: 回復 “加群”，即可加入前端交流群
  

目錄

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

? 配置多環境變量

package.json 里的 scripts 配置 serve build，通過 --mode xxx 來執行不同環境

• 通過 npm run serve 啟動本地 , 執行 development
• 通過 npm run build 打包正式 , 執行 production

"scripts": {"serve": "vue-cli-service serve --open","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.development 本地開發環境配置

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

• .env.production 正式環境配置

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

這里我們并沒有定義很多變量，只定義了基礎的 VUE_APP_ENV development``production
變量我們統一在 src/config/env.*.js 里進行管理。

這里有個問題，既然這里有了根據不同環境設置變量的文件，為什么還要去 config 下新建三個對應的文件呢？
修改起來方便，不需要重啟項目，符合開發習慣。

config/index.js

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

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

// 本地環境配置 module.exports = {title: 'vue3.0-h5',baseApi: 'https://test.xxx.com/api', // 本地api請求地址 }

根據環境不同，變量就會不同了

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

? 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: {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 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式。

安裝插件

npm i babel-plugin-import -D

在babel.config.js 設置

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

使用組件

用哪個引入哪個，無需在頁面里重復引用

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

? Sass 全局樣式

• 創建vue項目的時候，選擇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 ,開發者需要根據后臺接口做修改。

• service.interceptors.request.use 里可以設置請求頭，比如設置 token
• config.hideloading 是在 api 文件夾下的接口參數里設置，下文會講

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 文件夾下統一管理接口

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

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

如何調用

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

? Webpack 4 vue.config.js 基礎配置

如果你的 Vue Router 模式是 hash

publicPath: './', module.exports = {publicPath: './', // 署應用包時的基本 URL。 vue-router hash 模式使用// publicPath: '/app/', // 署應用包時的基本 URL。 vue-router history模式使用outputDir: 'dist', // 生產環境構建文件的目錄assetsDir: 'static', // outputDir的靜態資源(js、css、img、fonts)目錄lintOnSave: !IS_PROD,productionSourceMap: false, // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。devServer: {port: 9527, // 端口號open: false, // 啟動后打開瀏覽器overlay: {// 當出現編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋層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 跨域

如果你的項目需要跨域設置，你需要打來 vue.config.js proxy 注釋 并且配置相應參數

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

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

? 去掉 console.log

// 獲取 VUE_APP_ENV 非 NODE_ENV，測試環境依然 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 }

如果感覺可以，幫我點一下星星

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。