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

vue项目的实践总结相关推荐

微前端在Vue项目的实践
文章的参考:微前端在美团外卖的实践我将讲解微前端如何在Vue项目中实践和应用,业务逻辑参考文中介绍的,文章中介绍的逻辑比较清晰,但是并没有提供过多的业务代码,对微前端如何应用到具体的项目我们就无从而 ...
吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】
前言之前使用过 Vue 开发后台.中台项目,也做过移动端 H5,弄过一点小的前端架构.每做一个项目都会收获了不一样的经验和理解.下面我把这些点点滴滴的经验总结下来,做一个系列的文章分享和阶段性的总结 ...
linux部署vue项目_Vue项目部署的最佳实践
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:沉末_ juejin.im/post/5eb2243e51882555d8457833 ...
Vue项目如何提高效率？大厂2大实践总结告诉你
对于从事前端工作的小伙伴,掌握Vue,React这样的框架可以说是前端基本功了.人人都会用,那我们怎样才能写得比别人优雅?比别人漂亮? 鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入,直接向他 ...
methods vue过滤器和_数据动态过滤技巧在 Vue 项目中的实践
这个问题是在下在做一个 Vue 项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -.-),过程中会涉及到一些Vue源码的概念比如 $mount. rende ...
第一期vue项目实践问题与收获总结
第一期vue项目实践问题与收获总结文章目录第一期vue项目实践问题与收获总结 1. 存在问题 1.1 本地静态存储信息 1.2 用户权限的区分 2. 收获 2.1 路由导航守卫拦截未登录的访问 2 ...
VUE项目实践1：设置编辑按钮，可保存，双向绑定
VUE项目实践:设置编辑按钮,可保存,双向绑定目录结构: 实现效果: 所有代码: 实现页面:ipobtion.vue 引用页面:index.vue 目录结构: 实现效果: ...
vue项目实践教程1：vux项目搭建和简介
vue作为比较受欢迎的前端开发框架之一,因为其优雅的代码结构,轻量化代码设计,简介易懂的API,灵活易用的指令和属性广受前端开发者的喜爱,其学习成本和学习难度相对react来说要简单很多. 这里,笔者 ...
VUE项目实践--网站管理系统
使用vue-cli来构建一个vue项目什么是vue-cli?有了它我们还需要webpack吗? 通过几天的学习都知道webpack的使用难度真的有点高,而且文档又很难阅读.而vue-cli是一个可用 ...

vue项目的实践总结

1. vue-cli配置

1.1 通过命令查看配置结果：

1.2 svg-sprite-loader 来配置svg

2. 数据交互

3.数据mork

3.1 本地mork: 配置devserver 自配置一个node服务器来处理数据

3.2 esay-mock

vue项目的实践总结相关推荐

最新文章

热门文章