为了账号安全,请及时绑定邮箱和手机立即绑定

Vue的使用总结和技巧

Vue的使用总结和技巧

这篇文章主要是宏观总结,如果有哪部分知识需要另外单独讲解,根据留言会另外发布。

起步

当然是尤大的官网入手了,许多刚学框架的新手都喜欢从网上找视频教程,例如慕课网这种,本人不建议这种学习方法,因为视频的作者会让你跟着他的思维去写一套他的风格的代码,这是一个细思极恐的事情。

其实vuejs官网的东西是非常丰富的,并且我认为需要加入浏览器书签,是需要不间断的重复看的,因为会更新新的文档,不经常留意官网,可能就会漏掉新的语法糖,开发体验应该是每个开发者都需要的。

项目的开始

建议直接上vue-cli脚手架,从一开始就进入模块化编程的思想。

虽然我也说不出什么是模块化编程,好像就是那么回事吧。

vue-cli@2+老掉牙的操作我就不提了,全局安装脚手架,再用脚手架的cmd命令去拉取webpack模板。

这里提一下,可以自己去官方的github去fork下来,然后自己定义一个喜欢的模板,比如加入vuex等等,具体操作自行搜索。

我在上个礼拜也体验了vue-cli@3.0,目前还没正式发布,不过已经可以使用了,这个我也不多讲了,咱们掘金也有相关文章。

友情链接 vue.config.js相关配置 config.md

实操

1、Vue

vue的语法不多说了,无非就是template,script,style,建议根据尤大的语法规范去书写。

eslint一个强制规范编码的插件,不建议使用,经常出现莫名其妙的错误,公司内部可以自己定义一套规范,并且文档整理,也是个不错的选择。

--------------- 总结和技巧 -----------------

<template>     <div :style="{color:$options.filters.txtToColor(msg)}"></div>     <!-- 行内filter --> </template> 复制代码
import { txtToColor } from '/path/to/filters.js' export default {     name:'a',     data(){         return{             msg:123,             obj:{                 msg:321             }         }     },     filters:{         txtToColor     },     watch:{         'obj.msg'(newV,oldV){ //监听对象里的属性                      }     } } 复制代码
<style lang="less/sass/stylus..."> </style> 复制代码

2、Vue-router

router第一次接触这个词的小萌新可能一脸懵逼,因为jquery已经写习惯了。

因为vue是单页面应用,router其实就是把以前的domain.com/a.html,domain.com/b.html多页面整合为多路径管理多个模块。

--------------- 总结和技巧 -----------------

//router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); const router = new Router({     //此处可以利用node环境变量来设置打包后项目放在服务器某个目录后,路由的根路径配置     base: process.env.NODE_ENV==='development'?'/':'/some/dir/',     //...routes }); //很多人把beforeEach写到main.js router.beforeEach((from,to,next)=>{     //...某些拦截操作,是否登录权限等     next() }); export default router 复制代码

每一层子路由,就需要多一层router-view,如果只是希望浏览器的url作为语义,可以使用alias

//router.js const router = new Router({     routes:[         {             path:'/a',             component:A,             children:[                 {                     path:'c',                 }             ]         },         {             path:'/b',             component:B,             alias:'/a/c'//这样当路径为/a/c时  页面显示为B,router-view也会对应根路由         }     ] }) 复制代码

路由懒加载

原理就是将需要懒加载的路由通过webpack分开打包,切换至对应路由时,才开始加载js文件,可以实现首页加载速度,但是整体项目体积会变大。

//router.js const router = new Router({     routes:[         {             path:'/a',             component:()=>import('path/to/A.vue')         }     ] }) 复制代码
//package.json "devDependencies":{     //...     "babel-plugin-syntax-dynamic-import": "^6.18.0"     //... } 复制代码
//.babelrc "plugins":["syntax-dynamic-import"] 复制代码

3、Vuex

vuex一个状态(数据)管理官方插件,高效管理全局数据,并且注入vue实例,让所有组件可以轻松读写全局数据,让所有组件直接共享状态完成通信。

--------------- 总结和技巧 -----------------

//store.js import Vue from 'vue'; import Vuex from 'vuex'; import moduleA from '/path/to/moduleA.js' Vue.use(Vuex); const store = new Vuex.Store({     strict:process.env.NODE_ENV==="development",//开发环境开启严格模式     state:{         test:666     },     getters:{              },     mutations:{         testCommit(state,opt){                      }     },     actions:{         testAction({commit}){                      }     },     modules:{         moduleA     } }) 复制代码
//moduleA.js export default {     namespaced:true,//vuex模块化 模块名前缀     state:{         test:666     },     getters:{              },     mutations:{         testCommit(state,opt){                      }     },     actions:{         testAction({commit,state,rootState,rootGetter}){                      }     } } 复制代码
//***.vue import {mapState,mapAction,mapMutation} from 'vuex' //将vuex的方法注入到组件中,使用更方便 export default {     computed:{         ...mapState('moduleA',{             test1:'test'         }),         ...mapState({//vuex的根状态             test2:'test'         })     },     method:{         ...mapMutation('moduleA',{             testCommit1:"testCommit"         }),         ...mapMutation({             testCommit2:"testCommit"         })         ...mapAction('moduleA',{             testAction1:"testAction"         }),         ...mapAction({             testAction2:"testAction"         })     },     mounted(){         this.testCommit1();//===this.$store.commit('moduleA/testCommit')         this.testCommit2();//===this.$store.commit('testCommit')         this.testAction1();//===this.$store.dispatch('moduleA/testAction')         this.testAction2();//===this.$store.dispatch('testAction')     } } 复制代码

4、Components

这一段讲一讲父子组件那些事

假设手写了个custom-btn组件,在父组件如何监听这个子组件的点击。这里不讲slot

<!--parent.vue--> <template>     <custom-btn @click="some-fn"/> </template> <script> import custom-btn from 'path/to/custom-btn.vue'; export default{     components:{         custom-btn     } } </script> 复制代码
<!--custom-btn.vue--> <template>     <button @click="$emit('click')"></button> </template> <script> export default{     name:'custom-btn' } </script> 复制代码

只有在子组件emitclick,在父组件才能响应click,这个click可以自定义名字。 也可以在emit时,携带参数,实现父子组件传值。

router-link是个内置组件,由于没有emit,所以是不能响应click的,但是可以通过@click.native来为组件内的dom元素绑定click。

组件的缓存

一部分组件,包括路由,在业务需求上是需要缓存的,例如某个弹窗组件打开时,里面有选项已经勾选了,需要临时关闭弹窗但是又不希望再次打开重新渲染,这个时候就需要使用keep-alive

<template>     <keep-alive>         <custom-dialog></custom-dialog>     </keep-alive> </template> 复制代码

这个时候组件已经不会重新渲染,内部的常用钩子函数也不会执行,只有利用专用的2个钩子去处理缓存的组件逻辑。

<!--custom-dialog.vue --> <script> export default{     activated(){         //唤醒时     },     deactivated(){         //睡眠时     } } </script> 复制代码

这个属于小场景,当然也有可能出现大场景,就是某个路由页面全部缓存下来,这里就有丶东西了,因为路由的渲染都是在router-view,他是个动态的,同级的路由都会渲染在这个位置,这里就要动态缓存了。

<template>     <keep-alive :include="[]"><!-- 这个数组里写需要缓存路由的.vue文件的name -->         <router-view />     </keep-alive> </template> 复制代码

请保持每个文件的name唯一

5、API

推荐大家可以刷几遍vue的api, 很多人看官方文档会漏掉这一页

6、Webpack

前面讲到routerbase可以配置部署服务器后,非根目录的情况,同样webpack也需要配置项目资源的根路径

//config/index.js module.exports = {     build:{         assetsPublicPath:'some/dir/',         productionSourceMap:false         //打包不生成map文件,有效减小打包体积,并且别人看不到你的源码     } } 复制代码

默认的dev配置为localhost:8080,可以利用ip这个node包,让同事可以访问你正在跑的项目

//config/index.js const ip = require('ip').address(); //... module.exports = {     dev:{         host: ip,     } } 复制代码

这里还涉及到一个配置,可以通过代理进行跨域,仅限开发环境,生产环境可以通过nginx实现,自行搜索。

//config/index.js module.exports = {     proxyTable:{         '/api':{//当有/api/...路径时,解析为下面的域名             target: 'https://domain.com',//代理此域名             changeOrigin: true,             pathRewrite: { //当前解析为domain.com/api/...               '^/api': '' //如有需求,可以将api/去掉,此处为domain.com/...             }       }     } } 复制代码

scss拓展

less等其他语言自行搜索

通过webpack实现.vue单文件可访问全局scss变量,需要安装sass-resources-loader

//  build/utils.js  60行左右 // https://vue-loader.vuejs.org/en/configurations/extract-css.html return {     //...     scss: generateLoaders('sass').concat({       loader: 'sass-resources-loader',       options: {         resources: path.resolve(__dirname,'../src/assets/theme/index.scss')         //这里按照你的文件路径填写         //这里可以理解为将此文件的变量广播全局,.vue文件可以使用这个文件中的变量         //多个文件可以写成数组         //详细文档可看 https://github.com/shakacode/sass-resources-loader       }     }),     //... } 复制代码

其余配置文件不建议修改,如果对webpack非常熟练,可以随意玩耍。

7、常用node包

  1. @tweenjs/tween.js 一个js动画库

  2. axios 支持promise的http库

  3. qs 数据格式转换插件,配合axios使用

  4. crypto-js 各种加密,没什么实际安全作用

  5. prismjs 语法高亮插件

  6. vue-lazyload 图片懒加载,功能很全

  7. vue-meta 组件中动态修改head标签里面的内容

  8. babel-plugin-equire echarts按需加载插件,优化写法,默认会携带指定版本的echarts,建议自行安装需要的版本覆盖

  9. webpack-bundle-analyzer 打包完成后显示体积相关信息,可以了解是否重复加载,哪些文件过大等

8、dev/build出现javascript out of memory解决方案

//package.json "scripts": {     "dev": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",     "build": "node --max_old_space_size=4096 build/build.js" }, 复制代码

chavesgu---原文地址:https://juejin.im/post/5b56981b6fb9a04fd4509b76

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消