vuejs
web前端开发大全
web前端开发大全
展开
-
vue3 组件库的开发
1、vue3.0TypescriptVue RouterVite项目搭建:全局安装: yarn global add create-vite-app@1.18.0 或者npm i -g create-vite-app@1.18.0创建一个项目:vite 文档给出的命令是npm init vite-app <project-name> yarn create vite-app <project-name>等价于 全局安装 create...原创 2020-12-03 20:49:20 · 3206 阅读 · 0 评论 -
【vue开发技巧】路由太多的时候,怎么分类按照文件夹引入路由
当路由太多的时候,导致整个页面非常大。在这个时候,可以通过把路由分类,然后使用require.context引入文件夹下所有的路由。在router文件夹下创建:index.routes.js 和login.routes.js在index.js中代码如下:import Vue from 'vue'import VueRouter from 'vue-router'i...原创 2020-03-26 20:23:45 · 1672 阅读 · 0 评论 -
【vue开发技巧】vue 使用webpack require.context 全局引入组件,使用的时候就不需要单独再引入组件
index.js代码:function changeStr (str) { return str.charAt(0).toUpperCase() + str.slice(1)}const requireComponent = require.context('./', false, /\.vue$/);const install = (Vue) => { requ...原创 2020-03-26 17:09:26 · 780 阅读 · 0 评论 -
vuex-mapState,mapGetters,mapMutations,mapActions 的使用方法
组件中写法:state获取的方法$store.state.user.count...mapState(['userIndex'])...mapState({userIndex: state => state.user.user}),state定义 state: { name: '用户', todos: [ { id: 1, done:...原创 2019-10-27 23:41:01 · 620 阅读 · 0 评论 -
vue webpack配制 在生产环境清除console.log 排除console.warn
在开发环境中我们喜欢用console.log测试代码,但是部署到生产环境我们不可能一个一个把console.log给手动删除了。在build/webpack.prod.conf.js文件里加上这样一段代码即可new UglifyJsPlugin({ uglifyOptions: { mangle: { sa...原创 2019-10-25 20:21:09 · 1127 阅读 · 0 评论 -
vue.js动态获取菜单
https://www.jianshu.com/p/917a21e5f5e1需求:用户登录后获取相应的菜单权限,这里已知后台获取的菜单树这里介绍两种方式:1、根据从后台获取的路由路径动态注册路由(import到项目),在前端配置菜单权限时需提交路由的路径给后台;2、前端代码中将所有的路由路径注册好(全部import到项目),由于路由全部注册好了,根据后台返回的菜单显示即可;但...转载 2019-03-25 19:04:14 · 1753 阅读 · 1 评论 -
vue scoped CSS 深度作用改变子组件的样式
如果你希望scoped样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用>>>操作符:<style scoped>.a >>> .b { /* ... */ }</style>上述代码将会编译成:.a[data-v-f3f3eg9] .b { /* ... */ }有些像 Sass 之类的预处...转载 2019-03-12 09:54:06 · 313 阅读 · 0 评论 -
display:flex布局,自动适应屏幕高度100%
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2019-02-28 14:33:58 · 22607 阅读 · 0 评论 -
iview 国际化处理
获取数据的几种方式:标签中直接添加元素:{{$t('home')}}placehold 中因为切换: :placeholder="$t('home')"js中英文切换:alert( this.$t('home') )原创 2019-01-14 22:50:39 · 640 阅读 · 0 评论 -
vue echart统计图自适应屏幕大小变化
<template><div class="about"> <h1>This is an about page</h1> <el-row> <el-col :span="24"> <div id="pie"&原创 2018-12-13 14:26:00 · 2953 阅读 · 0 评论 -
Vuejs开发调试神器vue-devtools安装教程
方法1:vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。方法2:手动安装第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtoolsgit clone https://github.com/vuejs/vue-devtools.git第二步:安装项目所需要的npm包npm...转载 2018-06-01 22:09:56 · 568 阅读 · 0 评论 -
vuejs跨域请求解决方法
找到config/index.js目录:proxyTable: { '/api': { target: 'http://172.16.2.245/', //设置调用接口域名和端口号别忘了加http changeOrigin: true, pathRewrite: { '^/api': ...原创 2018-05-03 08:55:40 · 1946 阅读 · 1 评论