Vue.js
文章平均质量分 53
jfengz
web前端开发
展开
-
vue服务端渲染ssr的初步实现
vue服务端渲染ssr的实现过程原创 2023-03-29 22:17:18 · 708 阅读 · 2 评论 -
vue3:pinia+持久化使用
vue3:pinia+持久化使用原创 2022-10-15 22:41:05 · 755 阅读 · 0 评论 -
vue.config.js基本配置
const webpack = require("webpack");// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const isPro = process.env.NODE_ENV === "production" ? true : false;module.exports = { publicPath: "/", // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制) outputDir: "d原创 2021-08-31 16:53:50 · 372 阅读 · 0 评论 -
vue-router的addRoutes()和addRoute()的使用问题
注意:router.addRoutes已废弃:使用 router.addRoute() 代替。addRoutes的使用方法:router.addRoutes(newRoutes)addRoute的使用方法:for (let x of newRoutes) { router.addRoute(x)}官方的解释是 router.addRoute 接受的是一个路由规则,也就是一个对象,或者接受一个字符串和一个对象。...原创 2021-05-11 10:07:22 · 7095 阅读 · 3 评论 -
vue动态添加权限路由
在做后台系统时一般都会涉及到菜单权限控制的问题,这里的处理是根据后端返回的权限表,生成动态路由来控制权限,话不多说,上代码。原创 2020-08-24 14:01:11 · 1857 阅读 · 0 评论 -
el-form表单验证根据接口返回错误信息
使用error属性绑定值,在接口函数回调里处理提示信息原创 2020-08-06 11:27:25 · 1050 阅读 · 0 评论 -
element-ui实现多级树形结构+复选框表格
效果如下图:代码如下:<template> <div class="role-details inside-base"> <div class="inside-base-main clearfix"> <!-- 中间内容 --> <div class="inside-base-cont"> <div class="role-cont clearfix"> &l原创 2020-08-05 09:17:44 · 5946 阅读 · 4 评论 -
Vue的keep-alive组件,使用include和exclude不生效的问题
官方文档:keep-aliveinclude - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法:<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-aliv...原创 2019-12-04 11:31:39 · 1589 阅读 · 0 评论 -
vue + axios + element-ui 实现全局Loading(部分接口不要loading,多个请求合并一个loading)
项目中axios和api已分别封装在http.js和api.js里面,代码demo如下:tips:实现是否需要loading,在请求方法里面添加config参数配置实现多个请求合并一个loading,查看http.js里 // 加载函数Loading S => // 加载函数Loading Ehttp.jsimport Vue from 'vue'import axios fr...原创 2019-11-18 12:41:54 · 3411 阅读 · 0 评论 -
Vue + axios + el-upload组件,实现自定义多文件上传
需求:Vue项目中使用element-ui的el-upload上传文件,由于页面中除了文件上传,还有表单数据需要一起提交,所以不能使用el-upload的默认上传,而官方文档提供了http-request自定义上传方法来覆盖组件默认的上传方式,如下图:所以我们可以在自定义上传方法中,配合使用Axios来提交上传文件需要注意的是:自定义的上传方式就是模拟html表单上传文件,所以我们使用ne...原创 2019-11-13 16:09:02 · 2071 阅读 · 0 评论 -
Vue项目中全局引入.scss文件
在用vue-cli开发项目的时候,需要全局引入一个公共的.scss文件供每个.vue文件使用,而不需要在每个.vue文件中引入.scss文件步骤一:首先要下载 : sass-resources-loadernpm install sass-resources-loader --save-dev步骤二:在项目build/utils.js里,找到如下图位置修改为:scss: gene...原创 2019-10-24 15:07:12 · 1361 阅读 · 0 评论 -
Vue项目引入Css预处理 -- Sass
1、安装依赖npm install sass-loader --save-devnpm install node-sass --sava-dev2、在build文件夹下的webpack.base.conf.js的rules里面添加配置{ test: /\.sass$/, loaders: ['style', 'css', 'sass']}3、在.vue文件里修改style标...原创 2019-10-24 12:34:00 · 600 阅读 · 0 评论 -
基于vue的图片裁剪组件vue-cropper,配合element-ui组件上传
github地址:https://github.com/xyxiao001/vue-cropper安装:npm install vue-cropper -S原创 2019-08-30 13:41:33 · 3513 阅读 · 0 评论 -
Vue项目打包时去除console、debugger
在build文件夹下的webpack.prod.conf.js文件里的plugins下面添加:new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, `drop_debugger: true, // 打包去除 debugger` `drop_console: true /...原创 2019-07-30 12:07:51 · 3777 阅读 · 1 评论 -
Vue项目中判断用户是否登录的拦截问题
1、在进入页面时,拦截路由进行登录判断,需要进行以下两部分:// 全局路由导航拦截router.beforeEach((to, from, next) => { // ... if (to.path === '/login') { // 如果是登录页面路径,就直接next() next() } else { // 其他页面路径 let token = sessi...原创 2019-06-14 12:57:15 · 1904 阅读 · 0 评论 -
使用vue-router beforeEach钩子遇到的一些小问题
一、在进入页面时,判断用户未登录,需要跳转到登录页此时路由代码是这样的:// 全局路由导航拦截router.beforeEach((to, from, next) => { // ... let token = sessionStorage.getItem('userToken') // 获取用户登录token if (token === null || token ===...原创 2019-06-14 11:06:44 · 5525 阅读 · 2 评论 -
vue中引入jquery
本文转自:https://blog.csdn.net/hhy1006894859/article/details/794674451、在项目中安装jquery。npm install jquery --save-dev2、在项目根目录下的build/webpack.base.conf.js文件中:① 先写以下代码var webpack = require("webpack") ②在...原创 2019-04-25 09:27:35 · 311 阅读 · 0 评论 -
关于Vue项目,如何按需引入Element-UI的MessageBox弹框
首先我们先安装element-uinpm i element-ui -S然后我们在vue项目的入口文件main.js中单独引入element-ui 的 MessageBox 弹框import { MessageBox } from 'element-ui';根据官方文档,单独引用和完整引入在使用方法上有一些区别,如下图:tips:其他按需引入的组件在使用的时候,都需要Vue.use...原创 2019-03-27 11:21:19 · 5980 阅读 · 1 评论 -
vue-cli项目打包出现空白页和路径错误问题
本文转自:https://www.cnblogs.com/wanf/p/7871787.htmlvue-cli项目打包:1、命令行输入:npm run build打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目。第一个问题,文件引用路径。我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题。解...原创 2019-03-22 16:40:44 · 300 阅读 · 0 评论 -
Vue关于axios的封装调用
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。Axios的中文文档:https://www.kancloud....原创 2019-03-22 16:20:45 · 1210 阅读 · 0 评论 -
Vue配置开发,测试,生产环境api
前言:想实现通过不同的命令,打包调用不同环境的API,实现实现前端自动化部署。前端自动化部署工程比较复杂,这里只介绍通过不同的命令,打包的时候调用不同环境的API,例如:npm run build 调用开发环境接口,打包开发环境npm run build:test 调用测试环境接口,打包测试环境npm run build:prod 调用生产环境接口,打包生产环境vue项目用vue-c...原创 2019-03-22 13:52:51 · 1857 阅读 · 0 评论 -
如何实现Vue前端跨域,proxyTable解决开发环境下前端跨域问题
本文转自:https://www.cnblogs.com/zlfProgrammer/p/7997936.html在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了。其实不然,前端也有很多方法可以解决跨域,方便也快捷。常见的有nginx转发、node代理。在vue项目中常用的是proxyTable,这个用起来很方便。打开config下面的index.js,找到p...原创 2019-03-22 12:37:52 · 322 阅读 · 0 评论 -
VSCode 快速生成vue代码片段
第一步、打开vscode,找到用户代码片段,选择vue.json文件打开,如下图第二步、将以下代码复制粘贴到vue.json里面,保存"Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </d...原创 2019-04-10 09:36:23 · 5890 阅读 · 0 评论 -
VSCode---background插件
1、以管理员身份运行VS Code,搜索安装background插件2、打开设置,选择扩展中的plugin background,选择在setting.json中编辑3、在setting.json中输入以下代码,修改完后按Ctrl+S保存,会提示重启VS Code,点击确定后即可完成修改// background相关配置 Start "background.useDefault": ...原创 2019-04-11 13:16:20 · 13880 阅读 · 10 评论 -
Vue中keep-alive配合router-view缓存路由
<!-- template --><keep-alive> <router-view v-if="$router.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$router.meta.keepAlive"></router-v...原创 2019-09-29 19:13:22 · 1527 阅读 · 0 评论 -
Vue.js - PC端微信网页授权流程 - 前端需要做些什么
先占个位置233原创 2019-09-06 16:26:11 · 2289 阅读 · 0 评论