实现效果图 1、项目中的图标使用的是element-ui框架中的图标，如果需要引入可以看我写的上一篇文章。 2、首先配置路由 我初始化项目的时候初始化了路由，所以打开router/index.js文件进行修改配置 router/index.jsimport Vue from vue import Router from vue-router import Home from @/components/Home import Game from @/components/Game import Bbs from @/components/Bbs import Me from @/components/Me import Nba from ...
在开发项目的时候，我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。但是官方 cli3 现在并不支持搭建 plugin 开发的项目。 还好，已经有大神（Kazupon）走在了我们前面，我们就用现成的 vue-cli-plugin-p11n 。 如果你没有安装 vue-cli，请先安装 npm i -g @vue/cli 首先，搭建项目 vue create [your plugin name] && cd [your plugin name] vue add p11n这样我们就有了一个初始化的插件开发环境。 install 方法...
在开发项目过程中几乎所有接口都需要知道它的返回状态，比如失败或者成功，在移动端通常后台会返回结果，而我们只需要一个弹窗来弹出来结果就可以了。但是这个弹窗如果在整个项目里需要手动去每一个都定义，那是非常庞大的代码量，而且维护起来非常的麻烦。通常做法就是绑定在原型上一个公共方法，比如this.message(后台返回接口信息)。 这样看似省力了很多其实还是很麻烦。 如果使用了proxy做一个全局代理，那么就完全不一样了。不...
一、全局配置less 1.下载插件 **vue add style-resources-loader** vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果上面安装失败的话，就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader（前提是已经安装过 less less-loader） // 没有出错的话，可以无视这里npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 或 yarn ad...
在父组件中调用子组件的方法： 1.给子组件定义一个ref属性。eg:ref="childItem" 2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数，并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。 父组件： <template><child-item ref=child /><button @click=useChildFun></button></template><script>```methods() {useChildFun:function(){this.$refs.c...
一、前言 在广告机项目中，角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分，其中根据粒的大小分的更细： 1、接口访问的权限控制 2、页面的权限控制 菜单中的页面是否能被访问页面中的按钮（增、删、改）的权限控制是否显示下面我们就看一看是如何实现这些个权限控制的。 二、接口访问的权限控制 接口权限就是对用户的校验。正常来说，在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用...
【版本】 vue-cli3webpack@4.33.0【步骤】1、安装插件vue-markdown-loader npm i vue-markdown-loader -Dps：这个插件是基于markdown-it的，不需要单独安装markdown-it。 2、修改vue.config.js配置文件（如果没有，在项目根目录新建一个）： module.exports = {chainWebpack: config => {config.module.rule(md).test(/\.md/).use(vue-loader).loader(vue-loader).end().use(vue-markdown-loader).loader(vue-markdown-loader/lib/...
本文实例为大家分享了Vue使用localStorage存储数据的具体代码，供大家参考，具体内容如下 通过下面这个案例来了解localStorage的基本使用方法。输入评论人、评论内容，点击发表评论，评论数据将保存到localStorage中，并刷新评论列表。 1.先组织出一个最新评论数据对象 var comment = {id:Date.now(), user:this.user, content:this.content}2. 把得到的评论对象，保存到localStorage中 1.localStorage只支持存字符串数据,保存先...
案例场景: 现在有个文章管理模块，在该模块中有栏目选择、文章搜索、分页功能。这些功能改变其中一个都会对查询的文章有所改变。案例图如下:实现方案有两种： 其一、我们开始可能会想到对每个功能绑定一个处理事件，但是这样做我们对数据的维护工作将大大加大，而且用这样方案做数据的叠加筛选不是很好。 方案二、我们将所有提交的数据放到一起维护然后再进行深度监听，当某一个值、或多个值的改变时，在去进行数据的查询，此时问题...
也不存在什么加载咯， 就是一个判断滚动条是否到达浏览器底部了。 如果到了就触发事件，米到就不处理。 计算公式提简单的 底部等于（0） = 滚动条高度 - 滚动条顶部距离 - 可视高度。 反正结果就是0。 一、获取滚动条位置 class Scroll {static get top() {return Math.max(document.documentElement.scrollTop || document.body.scrollTop);}static get clientHeight() {return Math.max(document.documentElement.clientHeig...
与其说是优化 Vue，不如说主要是在 webpack 打包的配置中做些文章，使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程，其中的内容也许并不适合于每个项目，但整体思路是差不多的。 定位问题 要想进行优化，首先我们得清楚问题所在。即：是哪些代码/依赖包导致最后的编译文件过大？ 这里，我们需要使用 webpack-bundle-analyzer 工具。修改 package.json 文件，添加： "analyze": "NODE_ENV=production npm_co...
一、前言项目中前端采用的Element UI 框架， 远程数据请求，使用的是axios，后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件。其业务场景，主要是列表页(如会员信息，订单信息等)表格数据导出，如表格数据进行了条件筛选，则需要将条件传至后端api，筛选数据后，导出成Excel。 思考过前端导出的3种方案: 1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get...
vue-cli3配置多环境变量 先挂官网描述：环境变量和模式 需求 根据运行环境判断执行代码： 预发环境操作完成跳转地址与线上环境跳转地址不同线上环境添加埋点脚本实现 Step1：在项目根目录中新建.env.uat .env.uat配置如下： VUE_APP_BUILD_TYPE=uat vue-cli中规定，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。 代码中可以通过 process.env.VUE_APP_SECRET 这样访问。 NODE_ENV 和 BASE_URL 是...
1、安装文件 npm install --save-dev sass-loader npm install --save-dev node-sass2、配置 webpack.base.conf.js找到webpack.base.conf.js文件的module模块下面的rules添加以下代码 ... {test: /\.scss$/,loaders: ["style", "css", "sass"] }, ... 注意：这里loaders和文件中其他配置不同加了s 3、使用1、在使用的地方如下写法 <style lang="scss" scoped>div {a {color: red}} </style> 2、@import外部导入，如果不加scoped如果...
最近做vue 单页项目涉及到多角色用户权限问题，不同的角色用户拥有不同的功能权限， 不同的功能权限对应的不同的页面git: https://github.com/pch1024/dynamicRouter 举个例子：角色A =>功能1=>功能2=>功能3角色B =>功能1=>功能4=>功能5第1步 定义默认路由和动态路由//动态路由(所有角色的都在这里,我们都做好组件页面了所以我们一定有这个，防君子不防小人) export const dynamicRouter = [{ path: /b, name: b, component: pageB...