Vue,JavaScript框架,前端开发框架,Vue问题集合

vue-animate-number数字滚动插件的使用

2021-07-13

vue中加一些加载效果用户体验会更好。所以用了vue-animate-number 这一款插件，介绍给大家1、安装vue-animate-number插件npm;install;vue-animate-number 2、引入插件，在main.js中引入import;VueAnimateNumber;from;'vue-animate-number'; Vue.use(VueAnimateNumber) 3、使用方法<animate-number;from="0";:to="20";duration="1000"></animate-number> 4、案例<template> ;;;;<div> ;;;;;;;;<el-row;:gutter="20"> ;;;;;;;;;;;;<el-col;:span="6";class="count_item"> ;;;;;;;;;;;;;;;;<div;clas

在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets

2021-07-10

7236 0

在vscode中添加.vue文件自动补全插件：1、安装插件：HTML Snippets，搜索我们要安装的插件2、安装成功之后，配置插件：右击右下角的设置按钮-setting3、搜索配置：files.associations，并新增配置4、添加*.vue和html，如下图这样vue文件就能自动补全代码了。

vue安装Vant前端UI框架及使用教程

2021-05-02

3507 0

Vant，轻量、可靠的移动端 Vue 组件库，Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。特性：提供 60 多个高质量组件，覆盖移动端各类场景性能极佳，组件平均体积不到 1kb（min+gzip）单元测试覆盖率 90%+，提供稳定性保障完善的中英文文档和示例支持 Vue 2 & Vue 3支持按需引入支持主题定制支持国际化支持 TypeScript支持 SSR如何安装Vant框架呢？接下来我们就来安装这个UI框架在现有项目中使用 Vant 时，可

$解决vue : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本$

解决vue : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本

2021-04-29

2666 0

vue : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置行:1 字符: 1+ vue create .+ ~~~;;;+ CategoryInfo;;;;;;;;;: SecurityError: (:) []，PSSecurityException+ FullyQualifiedErrorId : UnauthorizedAccess解决方法：1、搜索windows PowerShell，以管理员身份运行2、输入set-ExecutionPolicy RemoteSigned;选择Y或A，回车再次创建项目，正常了。

使用proxy解决Vue前端axios跨域问题

2021-04-28

2549 0

跨域方式怎么解决呢？我们可以使用proxy。如果你的前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将API请求代理到API服务器。这个问题（说白了就是跨域的解决方案）可以用个vue.config.js中的devServer.proxy选项来配置。devServer.proxy可以是一个指向开发环境API服务器字符串： module.exports;=;{ devServer:{ ;;;;;proxy:;‘http://localhost:4000’//这里假设项目端口号非4000，而后端端口号为4000，从而造成了跨域 ;;;;} } 我们打开项目，在vue.config.js添加如下代码：module.exports;=;{ devServer:{ ;;;;;;pr

花一个多月时间学习写的一个laravel8+vue后台

2020-12-17

2859 0

系统说明本系统基于laravel8+vue+elementUI开发，实现前后端分离。环境说明php7.4+mysql5.6+nginx+redis接口文档登录界面功能模块历时一个月写的一个基于vue+elementUI后台，包含角色权限、系统设置、文章管理、echarts数据报表、登录等功能。编写后端接口，实现前后端分的一个项目，经过一个多月业余时间的学习和编写，算是基本完成了项目的打包和上线，算是入了门吧。

Vue实现路由懒加载，路由优化策略

2020-12-16

2354 0

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同代码块，然后当路由被访问的时候在加载对应组件，这样就更加高效了。如何实现路由懒加载呢？1、安装@babel/plugin-syntax-dynamic-import或命令安装npm;install;--save-dev;@babel/plugin-syntax-dynamic-import2、在label.config.js配置中声明该插件"@babel/plugin-syntax-dynamic-import"3、将路由改为按需加载形式，示例代码如下const;Login;=;();=>;import(‘/components/Login.vue’) const;Home;=;();=>;import

vue如何打包项目，vue打包项目上线教程

2020-12-13

3010 0

当我们做好项目，最后一步就是打包项目，部署到线上了。部署方法都两种，一个是通过vue的UI面板，一种是通过命令。1、Vue UI面板-简单方便我们点击UI面板左边的任务-bulid，然后再点击运行。2、进入项目根目录。通过命令打包npm;run;build以上两者都会在项目根目录创建dist文件，也就是我们打包好的项目可以看到目录下除了index.Html文件外，还有就是样式文件了，我们将其部署到服务器上即可访问。以上好就是vue打包项目的方法。

vue实现监听回车键，点击回车键出发登录按钮

2020-12-11

2728 0

用户在输入账号密码以及验证码，结束后，习惯性按下回车触发按钮登录，符合用户习惯，增加用户体验度。;;created(){ ;;;;var;_this;=;this; ;;;;document.onkeydown;=;function(e);{;;;//按下回车提交 ;;;;;;;;let;key;=;window.event.keyCode;; ;;;;;;;;//事件中keycode=13为回车事件 ;;;;;;;;if;(key;==;13);{ ;;;;;;;;;;;_this.login() ;;;;;;;;} ;;;;}; ;;},登录方法methods:;{ login;();{ ;;;;console.log('触发登录按钮') } }

Vue+elementUI如何实现表格实现全选删除，批量删除

2020-12-10

5521 0

思路：1、表格外部添加批量删除按钮2、表格加入id字段显示和checkbox多选按钮3、data里面定义一个ids数组，用于存储id集合4、点击按钮获取id值，以数组方式传给后端，执行ajax删除5、不管删除成功与否，但页面提示框关闭后，刷新列表模板按钮区域添加点击方法batchDelete(tableChecked)<el-col;:span="4"> ;;;;;;;<el-button;type="primary";@click="addDialog()">添加文章</el-button> ;;;;;;;<el-button;type="danger";@click="batchDelete(tableChecked)"&g

vue如何通过externals加载外部cdn资源

2020-12-07

2301 0

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后单文件体积过大问题。为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部cdn资源。凡是声明在externals中的第三方依赖包，都不会被打包。1、复制一份main.js改名为main-prod.js。2、vue.config.js中红字部分：（当为发布模式时，使用main-prod.js文件，并且设置externals）chainWebpack:;config;=>;{ ;;;;//;发布模式 ;;;;config.when(process.env.NODE_ENV;===;'production',;config;=>;{ ;;;;;;c

vue如何实现动态改变title

2020-12-06

2538 0

动态改变每个页面标题，通过路由发现变化时改变标题名称1、在main.js下加入如下代码：//;动态标题 router.beforeEach((to,;from,;next);=>;{ ;;/*;路由发生变化修改页面title;*/ ;;if;(to.meta.title);{ ;;;;document.title;=;to.meta.title ;;} ;;next() })2、在路由文件，index.js下加入如下代码：meta:{ title: '名称 '}const;routes;=;[ ;;{ ;;;;path:;'/home', ;;;;component:;Home, ;;;;redirect:;'/wecome', ;;;;children:;[ ;;;;;;{;path:;'/wecome',;component:;Wecome,;meta:{

vue安装babel-plugin-transform-remove-console插件，去除项目中所有console.log（）打印

2020-12-04

3807 0

前端在使用vue做项目，在做的过程中会使用console.log()来打印数据，vue在开发环境是允许出现console.log()打印的，在生成环境中，打包项目是不允许有console.log()打印了，做项目过程中忘记那些地方有使用打印了，项目一大，也就不好找了，这时我们可以使用babel-plugin-transform-remove-console插件来全部去掉打印本插件可以去除以下两种格式打印console.log("foo"); console.error("bar");安装npm;install;babel-plugin-transform-remove-console;--save-dev配置打开项目根目录下的babel.config.js文件，添加如

vue+elementUI添加进度条效果，添加loading效果

2020-12-03

6398 0

安装nprogrees使用vue ui面板中搜索开发依赖，并安装或者使用命令安装npm;install;--save;nprogress显示隐藏进度条NProgress.start(); NProgress.done();实例在main.js文件中引入和使用import;axios;from;'axios' ; import;NProgress;from;'nprogress' import;'nprogress/nprogress.css' //;配置请求的更路径 global.domain;=;'http://www.laravel8.com/api/' axios.defaults.baseURL;=;domain ; //;在request拦截器中，展示进度条;NProgress.start(); ; axios.interceptors.request.use(conf

Vue+element安装echart，实现统计图

2020-12-02

3799 0

后台管理系统离不开数据统计，数据统计离不开统计图，本文介绍如何在vue中使用echarts1、安装echarts或通过 npm 获取 echarts，npm;install;echarts;–save附echarts文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChartsDemo实例<template> ;;;;<div> ;;;;;;;; ;;;;;;;;<el-breadcrumb;separator-class="el-icon-arrow-right"> ;;;;;;;;<el-breadcrumb-item;:to="{;path:;'/home';}">首页</el-

vue-element安装富文本编辑器vue-quill-editor教程

2020-12-01

2894 0

在vue ui面板中安装vue-quill-editor依赖命令安装npm;install;vue-quill-editor;--save# oryarn;add;vue-quill-editor使用方法在main.js导入富文本编辑器import;VueQuillEditor;from;'vue-quill-editor' import;'quill/dist/quill.core.css';//;import;styles import;'quill/dist/quill.snow.css';//;for;snow;theme import;'quill/dist/quill.bubble.css';//;for;bubble;theme将富文本编辑器注册为全局可用Vue.use(VueQuillEditor)页面中使用<quill-editor;v-model="addForm.art_content&quo

vue-element实现图片上传例子，图片上传预览

2020-11-29

3061 0

前端代码：<template> <div> <el-form;:model="addForm";:rules="addFormRules";ref="addFormRef";label-width="80px";label-position="left"> <el-tab-pane;label="缩略图";name="2"> ;;;;;;;;;;;;;;;;;;;;;;;;<el-upload;:action="uploadURL";:on-preview="handlePreview" ;;;;;;;;;;;;;;;;;;;;;;;;;;;;:on-remove="handleRemove";list-type="picture";:headers="headerObj"

Vue-ElementUI Steps 步骤条+ Tabs 标签页选项卡的使用

2020-11-28

6206 0

Steps 步骤条：引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。Tabs 标签页：分隔内容上有关联但属于不同类别的数据集合。1、在element.js注册标签组件import;Vue;from;'vue' import;{ ;;Button,;Form,;FormItem,;Input,;Steps,;Step };from;'element-ui' Vue.use(Steps) Vue.use(Step)2、使用 ;;;;;;;;;;;;<el-steps;:space="200";:active="activeIndex";finish-status="success";align-center> ;;;;;;;;;;;;

vue自定义格式化时间全局过滤器，实现格式化时间戳

2020-11-27

2697 0

我们在做vue前端项目的时候，如果后端给到的数据是时间戳的形式，我们要把它改成正常时间格式，可以通过以下方法效果：在main.js下加入以下全局函数//;自定义时间函数 Vue.filter('dateFormat',function(originVal){ ;;const;dt;=;new;Date(originVal) ;;const;y;=;dt.getFullYear() ;;const;m;=;(dt.getMonth()+;'').padStart(2,;'0') ;;const;d;=;(dt.getDate();+;'').padStart(2,;'0') ;;const;hh;=;(dt.getHours();+;'').padStart(2,;'0') ;;const;mm;=;(dt.getMinut

vue-element如何使用vue-table-with-tree-grid树形表格

2020-11-26

4329 0

有时我们需要使用折叠树形表格，比如以下形式这个功能主要用到这个插件vue-table-with-tree-grid1、插件下载地址：https://github.com/MisterTaki/vue-table-with-tree-grid安装：npm方式:npm;i;vue-table-with-tree-grid;-S或者yarn方式 :yarn;add;vue-table-with-tree-grid2、引入方式：安装好之后，在main.js下引入import;TreesTable;from;'vue-table-with-tree-grid' Vue.component('tree-table',;TreesTable)3、使用方法 ;;;;;;;;<el-card> ;;;;;;;;;;<tree-table;:data="a

vue-elementUI获取树形控件的值方法

2020-11-25

4618 0

在vue中使用elementUI的;el-tree树形结构控件，如何获取值呢？以下是vue-elementUI获取树形控件的值<template> <div> <el-tree;:data="treesList";:props="treesProps";show-checkbox;node-key="id" ;;;;;;;;;;;;;default-expand-all;:default-checked-keys="defKeys";ref="tressRef"> </el-tree> </div> </template>获取值const;key;=;[ ;;;;;;;;;;;;;;;;...this.$refs.tressRef.getCheckedKeys(), ;;;;;;;;;;;;;;;;...this.$refs.tress

vue-animate-number数字滚动插件的使用

在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets

vue安装Vant前端UI框架及使用教程

解决vue : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本

使用proxy解决Vue前端axios跨域问题

花一个多月时间学习写的一个laravel8+vue后台

Vue实现路由懒加载，路由优化策略

vue如何打包项目，vue打包项目上线教程

vue实现监听回车键，点击回车键出发登录按钮

Vue+elementUI如何实现表格实现全选删除，批量删除

vue如何通过externals加载外部cdn资源

vue如何实现动态改变title

vue安装babel-plugin-transform-remove-console插件，去除项目中所有console.log（）打印

vue+elementUI添加进度条效果，添加loading效果

Vue+element安装echart，实现统计图

vue-element安装富文本编辑器vue-quill-editor教程

vue-element实现图片上传例子，图片上传预览

Vue-ElementUI Steps 步骤条+ Tabs 标签页选项卡的使用

vue自定义格式化时间全局过滤器，实现格式化时间戳

vue-element如何使用vue-table-with-tree-grid树形表格

vue-elementUI获取树形控件的值方法

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

vue-animate-number数字滚动插件的使用

在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets

vue安装Vant前端UI框架及使用教程

解决vue : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本

使用proxy解决Vue前端axios跨域问题

花一个多月时间学习写的一个laravel8+vue后台

Vue实现路由懒加载，路由优化策略

vue如何打包项目，vue打包项目上线教程

vue实现监听回车键，点击回车键出发登录按钮

Vue+elementUI如何实现表格实现全选删除，批量删除

vue如何通过externals加载外部cdn资源

vue如何实现动态改变title

vue安装babel-plugin-transform-remove-console插件，去除项目中所有console.log（）打印

vue+elementUI添加进度条效果，添加loading效果

Vue+element安装echart，实现统计图

vue-element安装富文本编辑器vue-quill-editor教程

vue-element实现图片上传例子，图片上传预览

Vue-ElementUI Steps 步骤条+ Tabs 标签页选项卡的使用

vue自定义格式化时间全局过滤器，实现格式化时间戳

vue-element如何使用vue-table-with-tree-grid树形表格

vue-elementUI获取树形控件的值方法

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录