Vue
关注
分享
扫一扫
vue学习及工作中的总结
sleepwalker_1992
这个作者很懒，什么都没留下…
展开
-
Vue项目中axios的二次封装和使用
Vue项目中axios的二次封装和使用，并设置接口调用全局loading原创 2022-09-29 18:46:54 · 824 阅读 · 0 评论 -
PictureSelect组件封装：实现选择图片并校验的功能
Vue组件封装，实现选择图片并校验的功能原创 2022-09-27 18:40:13 · 678 阅读 · 0 评论 -
VUE中使用EventSource接收服务器推送事件
// Vue项目中，EventSource触发的事件中this指向变了// 使用const that = this，然后在EventSource触发的事件中使用thatif (typeof (EventSource) !== 'undefined') { const evtSource = new EventSource('/log/print', { withCredentials: true }) // 后端接口，要配置允许跨域属性 // 与事件源的连接刚打开时触发 ev.原创 2021-06-25 15:46:15 · 5559 阅读 · 3 评论 -
Vue项目中svg的使用
1、安装依赖npm install svg-sprite-loader --save-dev2、所有svg图标放到src/assets/icons/svg文件夹下，并在src/assets/icons下创建文件index.jsconst req = require.context('./svg', false, /\.svg$/)const requireAll = requireContext => requireContext.keys().map(requireConte原创 2021-06-21 18:46:45 · 2384 阅读 · 0 评论 -
vue-cli 3.x 搭建的项目中ESlint 语法检测配置说明
vue-cli 3.x 搭建的项目中ESlint 语法检测配置说明vue-cli 3.x搭建的项目中ESlint 语法检测配置，在package.json文件中，但可以在vue.config.js文件中关闭Eslint 语法检测。一、不使用Eslint 语法检测规则关闭Eslint 语法检测，可以在vue.config.js文件中设置lintOnSave或devServer.ov...原创 2020-02-06 18:57:39 · 1282 阅读 · 0 评论 -
vue-cli 3.x 配置多页面应用程序（配置文件vue.config.js ）
vue.config.jsconst path = require('path');module.exports = { // 环境配置 devServer: { host: '0.0.0.0', port: '8090', https: false, open: true }, // 设置路...原创 2020-02-06 14:28:21 · 1702 阅读 · 2 评论 -
vue-cli 3.x/2.x 搭建的项目中ESlint 语法检测配置说明
vue-cli 3.x 搭建的项目中ESlint 语法检测配置说明vue-cli 3.x搭建的项目中在package.json文件中配置ESlint 语法检测，可以在vue.config.js文件中关闭Eslint 语法检测。vue-cli 2.x 搭建的项目中ESlint 语法检测配置说明vue-cli 2.x搭建的项目中默认的eslint规则，例如：代码末尾不能加分号 ；...原创 2018-09-22 23:21:55 · 3313 阅读 · 0 评论 -
vue-router实现Vue组件之间传参
1、假设有两个Vue组件，项目路由文件src/router文件夹下的index.jsimport Vue from 'vue';import Router from 'vue-router';import officeHome from '@/view/officeHome';import home from '@/view/home';Vue.use(Router);expo...原创 2018-10-07 00:25:01 · 763 阅读 · 0 评论 -
v-on事件修饰符及按键修饰符
v-on 事件修饰符常用的事件修饰符有：.stop 阻止事件冒泡.self 当事件在该元素本身触发时才触发事件.capture 添加事件侦听器是，使用事件捕获模式.prevent 阻止默认事件.once 事件只触发一次什么是事件冒泡<!DOCTYPE html><html lang="en"><head> <...原创 2018-09-29 22:12:45 · 4751 阅读 · 0 评论 -
Vue项目中实现用户登录及token验证
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转...原创 2018-10-08 22:42:10 · 87419 阅读 · 63 评论 -
vuex详解
一、vuex的基本使用1、安装npm install vuex --save-dev2、在Vue项目的src文件夹下建一个名为store的文件夹，该文件夹下建一个index.js文件src/store/index.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); // Vuex 的状态存储是响...原创 2018-10-15 23:08:16 · 397 阅读 · 0 评论 -
vue-cli搭建的项目中使用vuex实现状态管理
vuex详解1、安装使用vue-cli搭建好项目以后，安装vuexnpm install vuex --save-dev2、创建Vuex.Store实例对于大型应用，需要存储的状态可能很多，我们就将store中的state、getters 、mutations 和 actions分割到单独的文件中。并且把 Vuex 相关代码分割到模块中。在项目的src文件夹下创建一个名为s...原创 2018-10-09 16:51:29 · 1248 阅读 · 0 评论 -
ag-grid在Vue项目中的基本使用
ag-grid官网1、安装npm install ag-grid-community ag-grid-vue --save-dev2、在main.js中引入ag-grid的样式文件// 引入ag-grid的样式文件import '../node_modules/ag-grid-community/dist/styles/ag-grid.css';import '../node...原创 2018-11-01 11:41:38 · 23307 阅读 · 9 评论 -
利用cellRendererFramework将Vue组件渲染为ag-grid表格单元的内容
1、Vue组件内定义私有组件，用cellRendererFramework来渲染ag-grid表格单元的内容<template> <div> <!-- gridReady 绑定一个事件，在表格创建完成后执行 --> <ag-grid-vue class="table ag-theme-balham" :columnDefs="co...原创 2018-11-02 09:27:14 · 7497 阅读 · 2 评论 -
Vue项目中使用Sass变量自定义ag-grid表格主题样式
1、在Vue项目中新建一个样式文件 src/assets/styles/table.scss ，引入ag-grid默认的样式文件table.scss$ag-icons-path: "../../../node_modules/ag-grid-community/src/styles/icons/";@import '../../../node_modules/ag-grid-c...原创 2018-11-02 11:33:39 · 3447 阅读 · 0 评论 -
vue-cli 3.x搭建的项目中vue-router的使用
vue-cli 3.x 文档：https://cli.vuejs.org/zh/Vue RouterVue Router基本用法vue-router实现Vue组件之间传参一、选择默认的包含基本的 Babel + ESLint 设置的 preset，创建一个默认的vue项目，项目目录结构如下：二、安装vue-router，并在项目中使用1、安装 np...原创 2020-02-05 16:03:46 · 2389 阅读 · 0 评论 -
js-cookie
1、安装npm install js-cookie2、应用<template> <div> <button @click="setCookie">创建cookie</button> <button @click="getCookie">读取cookie</button> <but...原创 2019-05-21 20:12:05 · 535 阅读 · 1 评论 -
Vue项目中实现父子组件之间传值
1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系 { path: '/father', name: 'father', component: father, children: [ { path: 'son', name: 'son', ...原创 2018-09-25 21:45:40 · 1955 阅读 · 0 评论 -
vue项目中axios的用法
1、安装npm install axios vue-axios --save-dev2、在main.js中引入import axios from 'axios';import VueAxios from 'vue-axios';Vue.use(VueAxios, axios);3、用法（1）post请求 // post请求调接口 this.a...原创 2018-09-24 18:14:46 · 2599 阅读 · 0 评论 -
使用webpack一步一步构建Vue项目
在普通网页中使用Vue：1、使用script标签引入Vue的包2、在index页面中创建一个id为app的div容器3、通过new vue得到一个vm的实例在使用webpack构建Vue项目前，要先对webpack基本用法及简单的配置了解。webpack基本用法在webpack中配置Vue组件页面的解析1、cnpm i vue -S 将Vue安装为运行依赖2、...原创 2018-08-26 17:31:13 · 877 阅读 · 0 评论 -
Vue生命周期函数
Vue生命周期图下面解释一一对应图中的数字1、var vm = new Vue({}) 表示开始创建一个Vue的实例对象2、刚初始化一个空的Vue实例对象，此时，在这个对象上，只有一些默认的生命周期函数和默认的事件，其他的都未创建3、beforeCreate生命周期函数执行时，data和methods中的数据和方法都还没有初始化4、初始化data和methods...原创 2018-08-11 18:35:49 · 24733 阅读 · 3 评论 -
极速安装vue-devtools，及安装后无法使用的解决办法
第一步：极速安装Vue调试神器 vue.js devtools（5分钟搞定）第二步：安装好Vue.js devtool插件，点击后提示vue.js not detected，不能用，解决办法找到了Vue.js devtool插件的安装目录后，打开mainifest.json文件，将mainfest.json中代码persistent：false，修改成persistent：true。第...原创 2018-07-30 21:57:15 · 4548 阅读 · 1 评论 -
Vue Router基本用法
Vue路由器https://router.vuejs.org/路由-前端路由和后端路由的概念路由-安装vue-router的两种方式1、直接下载vue-router.js，利用script标签引入。vue-router.js依赖vue.js，所以要注意引入顺序。 <script src="vue.js"></script> <!...原创 2018-07-29 21:48:47 · 460 阅读 · 0 评论 -
Vue中使用ref获取DOM元素和组件引用
利用ref获取DOM元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件</title> <script src="vue.js"&原创 2018-07-29 19:34:11 · 12225 阅读 · 0 评论 -
Vue过滤器filter
过滤器的定义语法：Vue.filter('过滤器的名称',function () {})过滤器两个条件：过滤器名称，处理函数。过滤器中的function ，第一个参数已经被规定死了，永远是 过滤器 管道符 前面传递过来的数据全局过滤器 简单使用<!DOCTYPE html><html lang="en"><head> <m...原创 2018-07-29 19:23:21 · 937 阅读 · 0 评论 -
Vue组件
组件化和模块化的区别组件-创建组件的方式1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件</title> <script src="vue.原创 2018-07-29 18:38:20 · 203 阅读 · 0 评论 -
运行报错 vue-loader was used without corrresponding plugin 原因
引入.vue文件，安装完vue-loader和vue-template-compiler后，在webpack.config.js中配置{ test:/\.vue$/, use: 'vue-loader' }但是，运行报错：vue-loader was used without the corresponding plugin.Make sure to include VueLoa...原创 2018-08-26 17:10:21 · 596 阅读 · 0 评论 -
import Vue from 'vue' 默认导入的是vue.runtime.common.js
在利用webpack的Vue项目中，在main.js中使用import Vue from 'vue' 导入的Vue的包，功能不完善，只是提供了runtime-only的方式，并没有提供像在普通网页中使用Vue那样的功能完善。包的查找规则（1）在项目根目录中查找有没有node_modules 的文件夹（2）在node_modules 中，根据包名，找对应的vue文件夹（3）在vue文...原创 2018-08-26 17:19:40 · 6192 阅读 · 1 评论 -
Vue项目中使用Echarts
前端数据可视化工具：ECharts1、安装npm install echarts --save-dev2、在项目的main.js中引入import echarts from 'echarts'Vue.prototype.$echarts = echarts;3、在Vue组件中使用用法一：<template> <div ref="lineI...原创 2018-09-13 21:56:25 · 777 阅读 · 0 评论 -
Vue-SimpleMDE的使用
1、安装npm install vue-simplemde --save-dev2、在项目的main.js中引入import VueSimplemde from 'vue-simplemde'import 'simplemde/dist/simplemde.min.css'Vue.use(VueSimplemde)3、在Vue组建中使用<template>...原创 2018-09-09 16:26:54 · 2887 阅读 · 0 评论 -
vue-quill-editor富文本编辑器的使用
1、安装npm install vue-quill-editor --save-dev2、在项目的main.js中引入import VueQuillEditor from 'vue-quill-editor'// require styles 引入样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow...原创 2018-09-06 23:28:57 · 1389 阅读 · 0 评论 -
vue-cli 2.x搭建的项目中使用vue-echarts-v3
前端数据可视化工具：EChartsvue-echarts-v3一、安装cnpminstallecharts --save-devcnpminstallvue-echarts-v3 --save-dev二、用法1、用 vue-cli 2.x搭建的项目，打开 build 文件夹中的 webpack.base.conf.js 文件，进行配置：webpack 1.x配置...原创 2018-09-02 22:20:07 · 1735 阅读 · 0 评论 -
使用vue-cli 2.x+webpack构建Vue项目
使用vue-cli 2.x+webpack构建Vue项目，需要全局安装:node.jswindows下，直接在官网下载安装包，运行安装就可以了。NPM是随同NodeJS一起安装的包管理工具。webpacknpm i webpack webpack-cli -gvue-cli2.xnpminstall-gvue-cli另外，可以全局安装一下eslint、cn...原创 2018-09-02 12:59:02 · 1155 阅读 · 0 评论 -
.vue文件中style标签的属性
.vue文件中style标签lang属性和scoped属性的介绍在子组件中设置style属性，如果不加scoped属性，如果是单页面程序，样式就会作用到全局中去，加了scoped属性以后，表示限制了该样式作用域只在该组件中。<template> <div> <h1>login组件</h1> </div&...原创 2018-08-26 22:26:32 · 10060 阅读 · 0 评论 -
结合webpack使用vue-router
结合webpack使用vue-router1、cnpm i vue-router -S2、在main.js中导入vue-router包，手动安装VueRouterimport Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);3、在main.js中导入各个Vue组件4、创建路由对象...原创 2018-08-26 21:55:38 · 2370 阅读 · 0 评论 -
使用vue实例的render方法渲染组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件</title> <script src="lib/vue.js"></原创 2018-08-19 20:04:15 · 6041 阅读 · 0 评论 -
Vue基本语法及常用指令
Vue基本语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue基本语法</title> <!--1.导入Vue的包--> <s原创 2018-07-24 23:00:21 · 468 阅读 · 0 评论