vue-采坑

最新推荐文章于 2022-04-21 10:53:26 发布

原创最新推荐文章于 2022-04-21 10:53:26 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue项目采坑

vue 专栏收录该内容

13 篇文章

订阅专栏

本文涵盖Node.js的qs模块使用方法，包括对象解析及数据加密。同时介绍按需加载Vue组件、使用js-cookie操作cookie、实现国际化及摄像头调用等前端开发技巧。并提供解决页面空白问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用node的qs模块解析对象

qs.stringify() // 解析对象，以&分隔，这一点和JSON.stringify()不同

使用sha1加密数据

使用sha1对password进行加密npm i sha1 -S，sha1(str)

按需引入组件

// import login from '@/views/login/index'// 常规写法
const login = () => import('@/views/login/index') // 按需加载，动态加载，异步加载，返回一个promise对象
// webpack 代码分割，require是AMD规范，resolve是全部引入成功以后执行的回调函数，第一个参数是依赖，先执行依赖，第二个参数是回调
// const login = resolve => require(['@/views/login/index'], resolve)
// 第一个参数是字符串数组，在回调函数代码执行前，先把多有用到的模块提前声明
// 第二个参数是一个回调函数，所有的依赖加载完执行
// 第三个参数chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。可以省略
// const login = r => require.ensure([], () => r(require('@/views/login/index')), 'login')

使用js-cookie来更好的操作cookie

使用参考

使用vue-i18n做国际化

调用ipad摄像头，实现扫一扫

npm run build 之后页面空白的几种解决办法

build下面的webpack.base.conf.js添加publicPath: ‘./’
config下面的index.js build添加 assetsPublicPath: ‘./’
vue router，不要使用mode: ‘history’ // 我是用这种方法解决的

element-ui使用

一定要在自定义规则之后加上else，callback()
表单中每个item项v-model绑定的data的字段，必须必须必须，和rules中的对应字段，名字名字名字，一样，否则校验时取不到值（undefined），所以无论输入什么或者选择什么都校验不过。

邮箱验证规则，支持多级域名

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
/^\w*([\u4e00-\u9fa5!#$%&'+-\./=\^_'\{\?\w]*\w*)?@([\u4e00-\u9fa5._\w]+[\u4e00-\u9fa5-._\w]*)?[\u4e00-\u9fa5._\w]+([\u4e00-\u9fa5-._\w]*[\u4e00-\u9fa5._\w]+)?\.[\u4e00-\u9fa5\w]+$/igm

element-ui 的响应式栅格布局

点击查看

动态监听路由变化

watch: { 
	$route: {
     	handler: function(route) {
     		 if (route.name === 'welcome') {
         		this.$store.state.doubleno = true
       		} else {
        	this.$store.state.doubleno = false
      	}
     },
     immediate: true
   }
 }

vue定义全局函数