系列文章目錄

這里是創建移動端項目
【Vue】Vue2.x創建項目全程講解，保姆級教程，手把手教，Vue2怎么創建項目（上）
【Vue】Vue2創建移動端項目實戰教程，創建移動端項目保姆級教程，接上一篇創建Vue2項目（中）
【Vue】Vue2創建移動端項目實戰教程，創建移動端項目保姆級教程，設置axios，utils工具包，vue.fonfig.js配置項 （下）

---

提示：寫完文章后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

---

前言

請先看前兩篇上和中，上篇為創建項目，中篇為適配移動端，下篇為引入組件以及配置選項

---

一、安裝vant2

傳送門 Vant 輕量、可靠的移動端 Vue 組件庫

1.引入庫

我這里是vue2項目，如果是你的項目是vue3的話，說明你已經對vue2有了解了，這里僅供參考vue2的教程

# Vue 3 項目，安裝最新版 Vant：
npm i vant -S# Vue 2 項目，安裝 Vant 2：
npm i vant@latest-v2 -S

2.引入組件

按需引入和手動引入請看 vant官方寫法

全部引入，打開main.js文件

// 引入vantUI
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

運行項目 npm run serve

3.檢查組件以及適配

修改views下的Home.vue頁面為如下代碼

<template><div class="home"><van-button type="primary">主要按鈕</van-button><van-button type="info">信息按鈕</van-button><van-button type="default">默認按鈕</van-button><van-button type="warning">警告按鈕</van-button><van-button type="danger">危險按鈕</van-button></div>
</template><script>
// @ is an alias to /srcexport default {name: 'Home',components: {}
}
</script>

效果如圖

雖然有移動端適配，但是像h2這種標簽，你不去給px大小，它好像不一定會轉化，就還是pc端大小

二、設置樣式

1.清除app.vue默認樣式

打開src/App.vue，刪除里面的默認樣式
最后保留為如下代碼

<template><router-view />
</template>

2.新建全局樣式

在src目錄下新建styles文件夾，然后在文件夾下新建一個base.css，代碼如下

body,ul{margin: 0;padding: 0;
}
ul{list-style: none;
}
h1,h2,h3,h4,h5,p,span{margin: 0;/* font-family: 'PingFang SC'; */font-family: PingFang SC-Heavy, PingFang SC;
}
a{text-decoration: none;color: #333;
}
img{vertical-align: middle;
}

這個是簡單版，復雜的可參考 通用css樣式模板，CSS 通用樣式總結

3.引入全局樣式

在styles新建index.css文件
內容如下

@import url(./base.css);

在main.js中，引入index.css文件

// 自定義基礎樣式庫
import './styles/index.css'

引入后效果如圖

一般情況ui設計圖是750px寬度，vant是基于375，當你在ui設計圖上面的尺寸為16px時，你需要設置為32px，才能與設計圖一致。

---

三、設置axios請求

1.下載axios，設置request請求

傳送門axios中文文檔|axios中文網

npm install axios -S

在src目錄下創建文件夾 utils
在里面新建一個request.js文件

我這里考慮到請求需要攜帶token，以及生產環境和開發環境的配置，
request.js我直接貼出來，不作解釋，都有注釋，詳細可參考若依項目，很多腳手架功能都是來自于若依后臺系統

import axios from 'axios'
import errorCode from '@/utils/errorCode'
import {getToken
} from '@/utils/auth'import {Dialog,Notify
} from 'vant';axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'// 創建axios實例
const service = axios.create({// axios中請求配置有baseURL選項，表示請求URL公共部分baseURL: process.env.VUE_APP_BASE_API, // 本地后臺接口||服務器接口// 超時timeout: 40000
})
// request攔截器
service.interceptors.request.use(config => {// 是否需要設置 tokenconst isToken = (config.headers || {}).isToken === false// config.headers['Authorization'] = sessionStorage.getItem('token') // 讓每個請求攜帶自定義token 請根據實際情況自行修改// config.headers['token'] = sessionStorage.getItem('token') // 讓每個請求攜帶自定義token 請根據實際情況自行修改config.headers['Authorization'] = 'Bearer ' + getToken()// get請求映射params參數if (config.method === 'get' && config.params) {let url = config.url + '?';for (const propName of Object.keys(config.params)) {const value = config.params[propName];var part = encodeURIComponent(propName) + "=";if (value !== null && typeof (value) !== "undefined") {if (typeof value === 'object') {for (const key of Object.keys(value)) {let params = propName + '[' + key + ']';var subPart = encodeURIComponent(params) + "=";url += subPart + encodeURIComponent(value[key]) + "&";}} else {url += part + encodeURIComponent(value) + "&";}}}url = url.slice(0, -1);config.params = {};config.url = url;}return config
}, error => {console.log(error)Promise.reject(error)
})// 響應攔截器
service.interceptors.response.use(res => {// 未設置狀態碼則默認成功狀態const code = res.data.code || 200;// 獲取錯誤信息const msg = errorCode[code] || res.data.msg || errorCode['default']// 二進制數據則直接返回if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {return res.data}if (code === 401) {return Promise.reject('無效的會話，或者會話已過期，請重新登錄。')} else if (code === 402) {return Promise.reject(new Error(msg))} else if (code === 403) {return Promise.reject(new Error(msg))} else if (code === 500) {Notify({type: 'danger',message: msg});return Promise.reject(new Error(msg))} else if (code === 601) {Notify({type: 'warning',message: msg});return Promise.reject('error')} else if (code !== 200) {Dialog({title: '錯誤',message: msg});return Promise.reject('error')} else {return res.data}
}, error => {console.log('err' + error)let {message} = error;if (message == "Network Error") {message = "后端接口連接異常";} else if (message.includes("timeout")) {message = "系統接口請求超時";} else if (message.includes("Request failed with status code")) {message = "系統接口" + message.substr(message.length - 3) + "異常"; // 例如502異常// message = "系統更新服務中，請稍后重試";}// 彈出報錯信息Notify({message: message,type: 'danger',duration: 5 * 1000,});return Promise.reject(error)
}
)// 使用a標簽下載
export function fileDown(blobUrl, filename) {const a = document.createElement("a");if (!a.click) {throw new Error('DownloadManager: "a.click()" is not supported.');}a.href = blobUrl;a.target = "_parent";if ("download" in a) {a.download = filename;}(document.body || document.documentElement).append(a);a.click();a.remove();
}export default service

• 上述代碼缺少一個getToken方法
• 還缺少一個errorCode變量

不著急，慢慢來

2. 引入getToken方法

在utils文件夾下創建一個auth.js文件

import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {// 設置60分鐘后過期const inFifteenMinutes = new Date(new Date().getTime() + 60 * 60 * 1000);return Cookies.set(TokenKey, token, { expires: inFifteenMinutes })
}export function removeToken() {return Cookies.remove(TokenKey)
}

這里需要安裝一個插件

npm install --save js-cookie

3. 引入errorCode變量

在utils文件夾下創建一個errorCode.js文件

export default {'401': '認證失敗，無法訪問系統資源','403': '當前操作沒有權限','404': '訪問資源不存在','default': '系統未知錯誤，請反饋給管理員'
}

4、設置env環境

1.創建本地環境dev

在src外面創建文件名為 .env.development

#模式
NODE_ENV = 'development'
#  // 通過"VUE_APP_MODE"變量來區分環境
VUE_APP_MODE = 'development'# 請求路徑
VUE_APP_BASE_API = '/dev-api'# 這是開發環境,未上線#		*******************			**   **		**
#			**		**			   ****************
#			**		**					**
#		*******************			   ************
#			**		**				  ***	    **
#			**		**				 **  **    **
#		   **		**				**	    ***
#		  **		**			   **	 **    ***

2.創建服務器環境prod

在src外面創建文件名為 .env.production

#模式
NODE_ENV = 'production'#通過"VUE_APP_MODE"變量來區分環境
VUE_APP_MODE = 'production'#api地址
VUE_APP_BASE_API = '/prod-api'# 這是上線環境,已投入使用

環境配置里面的VUE_APP_BASE_API為代理請求，可更改，這個東西看后端怎么調用或者修改吧

例如我發起了一個列表請求，這個192.168.1.6是我的電腦ip，后端java的電腦ip例如是192.168.1.7

我就通過/dev-api請求到他的電腦上的接口

五、vue.config.js

與package.json同級

1. 創建vue.config.js

const webpack = require('webpack')
const path = require("path")const CompressionPlugin = require('compression-webpack-plugin')module.exports = {lintOnSave: false,devServer: {port: 8088,host: '0.0.0.0',open: true,proxy: {[process.env.VUE_APP_BASE_API]: {target: `http://192.168.1.66:8080`,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}},},historyApiFallback: true, // 設置了當服務端收到 404 請求時，將會返回 index.html 文件},configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, 'src'),'assets': '@/assets'}},plugins: [// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解壓縮靜態文件new CompressionPlugin({cache: false,                   // 不啟用文件緩存test: /\.(js|css|html)?$/i,     // 壓縮文件格式filename: '[path].gz[query]',   // 壓縮后的文件名algorithm: 'gzip',              // 使用gzip壓縮minRatio: 0.8                   // 壓縮率小于1才會壓縮}),// maxChunks：使用大于或等于 1 的值，來限制 chunk 的最大數量。使用 1 防止添加任何其他額外的 chunk，這是因為 entry/main chunk 也會包含在計數之中。//minChunkSize: 設置 chunk 的最小大小。// 限制打包的個數(減少打包生成的js文件和css文件)new webpack.optimize.LimitChunkCountPlugin({maxChunks: 10,minChunkSize: 100})],},publicPath: "/",assetsDir: './',assetsDir: 'static', // 整合css和js到這里outputDir: 'app', // 打包名稱，例如默認為dist
}

這一段代碼用到了compression-webpack-plugin ，項目中沒有，要進行安裝，否則會報紅

這個東西有版本問題，我直接下載了最新版10.0.0，結果項目運行不起來，然后我就找到了以前舊項目的版本

版本我已經指定好了，直接安裝即可。

npm install compression-webpack-plugin@5.0.2 --save-dev

安裝完了請檢查package.json中的配置

由于vue的特性，修改env，vue.config.js，項目是需要重啟的。

---

2.修改后臺接口地址

這個target，這里是你的本地的后臺java開發地址

六、編寫api請求

1.創建接口

在src目錄下創建一個文件夾【api】，在api下創建test.js用作測試，后續寫其他接口都是這樣
先集成在api文件夾里，然后再不同的vue頁面引入

import request from '@/utils/request'
// 查詢常用意見列表
export function listComment(query) {return request({url: '/flow/comment/list',method: 'get',params: query})
}
// 查詢常用意見詳細
export function getComment(id) {return request({url: '/flow/comment/' + id,method: 'get'})
}
// 新增常用意見
export function addComment(data) {return request({url: '/flow/comment',method: 'post',data: data})
}
// 修改常用意見
export function updateComment(data) {return request({url: '/flow/comment',method: 'put',data: data})
}
// 刪除常用意見
export function delComment(id) {return request({url: '/flow/comment/' + id,method: 'delete'})
}

2.在vue頁面中引入api方法

在Home.vue頁面中引入

import { listComment } from "@/api/test.js"

然后編寫methods方法，在created里面請求

<template><div class="home"><h1>這是h1標簽</h1><h2>這是h2標簽</h2><h3>這是h3標簽</h3><h4>這是h4標簽</h4><h5>這是h5標簽</h5><van-button type="primary">主要按鈕</van-button><van-button type="info">信息按鈕</van-button><van-button type="default">默認按鈕</van-button><van-button type="warning">警告按鈕</van-button><van-button type="danger">危險按鈕</van-button></div>
</template><script>
// @ is an alias to /srcimport { listComment } from "@/api/test.js"
export default {name: 'Home',components: {},data() {return {}},created() {this.getList()},methods: {// 獲取列表getList() {listComment().then(res => {})}}
}
</script>

打開f12控制臺，查看網絡請求

我這里已經請求到數據了

---

同理，引入該js中其他方法只需要往后面加就是了

import { listComment , ***list , ***del , ...... } from "@/api/test.js"

然后有不同的js需要分成不同的js包，如下圖

七、bin腳本文件，一鍵運行

每次打開項目都需要手動去寫npm run serve，太麻煩了，這里集成了一個bin腳本
與src同級，建立一個文件夾，名字為bin

1、打包 – build.bat

@echo off
echo.
echo [信息] 打包Web工程，生成dist文件。
echo.%~d0
cd %~dp0cd ..
npm run buildpause

2、下載依賴 – package.bat

@echo off
echo.
echo [信息] 安裝Web工程，生成node_modules文件。
echo.%~d0
cd %~dp0cd ..
npm install --registry=https://registry.npm.taobao.orgpause

3、運行 – run-web.bat

@echo off
echo.
echo [信息] 使用 Vue CLI 命令運行 Web 工程。
echo.%~d0
cd %~dp0cd ..
npm run servepause

先建一個js然后寫進去再改后綴名，或者直接建這個名字然后用VSCode打開編輯。

雙擊即可運行，如果npm run dev是你的運行方式， 修改里面的server為dev就好了。

總結

gitee鏈接，已公開 傳送門

很好的一個移動端項目腳手架，axios、環境、適配，都做好了。vuex這個可以用若依的，也可以自己寫

vuex有兩種，一種沒有子模塊，沒有子模塊的，直接在它的store/index.js里面寫。
如果有子模塊呢，就是子模塊引入到這個父模塊，父模塊在modules里面注冊一下。在vue頁面中引入就會多一層modules模塊。

下面這個就是我自己寫的，簡單版的，是有子模塊的。
vuex的多模塊用法簡單版

由于這個項目我建的時候選擇的是scss渲染器，所以不是less渲染器。重新建的時候選擇scss with dart-scss就好了，或者你裝了less再裝一下scss也行。全篇下來沒有寫到關于less或scss的代碼