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