1. vue-cli配置
1.1 通過命令查看配置結果:
-
vue inspect 全部配置
-
vue inspect --rules 查看全部規則
-
vue inspect --rule vue 查看指定規則
-
vue inspect --plugins 查看全部插件
-
vue inspect --plugin vue-plugin 查看指定插件
-
vue inspect --mode development 指定模式
-
vue ui 查看可視化配置界面
1.2 svg-sprite-loader 來配置svg
chainWebpack(config) {
// 配置svg規則排除icons目錄中svg文件處理
config.module
.rule("svg")
.exclude
.add(resolve("src/icons"))
.end();
// 新增icons規則,設置svg-sprite-loader處理icons目錄中的svg
config.module
.rule("icons")
.test(/\.svg$/)
.include
.add(resolve("src/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({ symbolId: "icon-[name]" })
.end();
}
拓展icon-svg 全局組件: 實現自動載入文件夾的svg圖標,無需手動import
// icons/index.js
const req = require.context('./svg', false, /\.svg$/)
req.keys().map(req);
// main.js
import './icons'
//全局註冊icon-svg
Vue.component('IconSvg', IconSvg)
//使用
<icon-svg type="文件名標識"/>
在漁港項目中有使用到
2. 數據交互
// 創建axios實例
const service = axios.create({
})
// 請求攔截
service.interceptors.request.use(config => {
do something
})
// 響應攔截
service.interceptors.response.use(response => {
do something
})
反思 fetch裏面可以放什麼: 對請求方式、數據進行統一處理,使得調用時候只關注 必要數據
export const saveCulture = fetch('/yg/culture', {
detail: '保存漁港介紹', type:'post'
})
3.數據mork
3.1 本地mork: 配置devserver 自配置一個node服務器來處理數據
devServer: {
before: app => {
app.use(bodyParser.json())
app.use( bodyParser.urlencoded({ extended: true }) );
app.post("/dev-api/user/login", (req, res) => {
// req 請求信息 res 響應數據
res.json({ code: 1, data: username });
});
}
}
3.2 esay-mock
-
登錄easy-mock網站
-
創建一個項目
-
創建需要的接口
-
調用:修改base_url,.env.development