基礎介紹
個人使用背景是因為公司業務覆蓋多個小程序端，主要包括：支付寶小程序、微信小程序、百度小程序、快應用。項目基于npm包管理，vscode相關插件提供更好的開發體驗。
- 主要用到相關技術：uni-app相關 / vue3 / typescript / axios / sass / eslint / prettier
下面直接開始從頭開始搭建一個可用的初始項目~ 如果"需求緊急"可以參考底部的GitHub源碼。如果遇到問題可參照對應步驟。
使用npm安裝uni-app
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue#vue3 uni-app-vue3-demo
// 等待片刻 ...
> 請選擇 uni-app 模板: 默認模板(TypeScript)
cd uni-app-vue3-demo
npm install
// 安裝較慢時可使用
npm install --registry=https://registry.npm.taobao.org
// 卸載不需要的包
npm uninstall vue-class-component vue-property-decorator
// 更新包
npm install vue@3.2.20 vuex@4.0.2 typescript@4.4.4
復制代碼
配置 eslint + prettier 自動格式化代碼
- 安裝相關npm包
npm install eslint prettier --save-dev
npm install eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
復制代碼
- 安裝相關插件
- Prettier - Code formatter
- ESLint
- eslint配置
.eslintrc.js
module.exports = {
parser: 'vue-eslint-parser',
extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['vue', '@typescript-eslint'],
}
復制代碼
- prettier配置
.prettierrc.js
module.exports = {
printWidth: 120,
tabWidth: 2,
tabs: false,
semi: false,
singleQuote: true,
quoteProps: 'as-needed',
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: 'always',
endOfLine: 'auto',
}
復制代碼
- vscode 配置
.vscode/settings.json
{
"vetur.validation.template": false,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"elint.validate": ["typescript", "vue", "html", "json"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"json.format.enable": false
}
復制代碼
- 測試代碼自動格式化 (重啟vscode 打開 src pages/index.vue 輸入幾個空格 然后在保存看是否會自動格式化)
Typescript 配置允許默認 any 類型 tsconfig.json
{
compilerOptions: {
"noImplicitAny": false,
}
}
復制代碼
配置 SASS
- 安裝 npm 相關包
npm install node-sass@4.0.0 sass-loader@7.3.1 --save-dev
// 如遇到安裝問題可手動在package.json devDependencies 手動中添加
// 刪除 node_modules 然后 重新安裝npm install
復制代碼
- 在 vue 中使用
<style lang="scss">
</style>
復制代碼
配置全局公共變量 并 自動導入
- 新建全局樣式變量
style/var.scss
$test-size: 400rpx;
復制代碼
- 在全局自動導入
vue.config.js
process.env.UNI_USING_VUE3 = true
process.env.UNI_USING_VUE3_OPTIONS_API = true
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/var.scss";`, //引入全局變量
},
},
},
configureWebpack: {
resolve: {
extensions: ['.js', '.ts', '.vue', '.json'],
},
},
}
復制代碼
- vscode 相關插件
- SCSS IntelliSense 安裝后會在全局提示 樣式變量(如下圖所示)
image.png
安裝 axios api層 適配小程序
import axios, { AxiosError } from 'axios'
import qs from 'qs'
let TOKEN_KEY = 'x-token' // TODO 根據自己后端配置
let API_SOURCE = ''
// #ifdef MP-WEIXIN
API_SOURCE = 'weixin' // 微信小程序
// #endif
// #ifdef MP-BAIDU
API_SOURCE = 'bdapplets' // 百度小程序
// #endif
// 設置表單類型
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
let baseURL = process.env.VUE_APP_API_HOST
const fetch = axios.create({
withCredentials: true,
baseURL,
timeout: 5000,
})
let jumpLoginCount = 0
// request攔截器,在請求之前做一些處理
fetch.interceptors.request.use(
(config) => {
Object.assign(config.headers, {
Authorization: uni.getStorageSync(TOKEN_KEY),
})
config.data = qs.stringify(config.data)
return config
},
(error) => {
return Promise.reject(error)
}
)
// 配置成功后的攔截器
fetch.interceptors.response.use(
(res) => {
const params = qs.parse(res.config.data)
// 設置 token
if (res.headers.Authorization) {
uni.setStorageSync(TOKEN_KEY, res.headers.Authorization)
}
// TODO 根據后端成功狀態配置
if (['20001'].includes(`${res.data.code}`)) {
// 是否返回根數據
if (params.rootResult) return res
else return res.data
} else {
return Promise.reject(res.data)
}
},
(error: AxiosError) => {
const params = qs.parse(error.config.data)
// 未登錄 跳轉登錄頁
if (error.response!.status == 401) {
if (jumpLoginCount == 0) {
uni.navigateTo({
url: '/pages/login/index', // TODO 配置成自己的登錄頁路徑
})
++jumpLoginCount
setTimeout(() => (jumpLoginCount = 0), 2000)
}
return Promise.reject(error)
}
return Promise.reject(error)
}
)
// 適配 小程序
fetch.defaults.adapter = function (config: any) {
return new Promise((resolve, reject) => {
var settle = require('axios/lib/core/settle')
var buildURL = require('axios/lib/helpers/buildURL')
uni.request({
method: config.method.toUpperCase(),
url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
header: config.headers,
data: config.data,
dataType: config.dataType,
responseType: config.responseType,
sslVerify: config.sslVerify,
complete: function complete(response: any) {
response = {
data: response.data,
status: response.statusCode,
errMsg: response.errMsg,
headers: response.header, // 注意此處 單復數
config: config,
}
settle(resolve, reject, response)
},
})
})
}
export { fetch, API_SOURCE }
復制代碼
總結
通過上述步驟后，就能愉快的進行踩坑之旅了~ 如有需要可訪問源碼
uni-app-vue3-demo
