vue實戰的實踐總結

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