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

總結

以上是生活随笔為你收集整理的vue项目的实践总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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