vue
啊巳~
小菜菜努力中~
展开
-
vue animation css实现左右折叠面板
vue animation css实现左右折叠面板原创 2022-03-25 11:32:49 · 2298 阅读 · 0 评论 -
npm 安装依赖遇到的问题
一、cnpm -v 在 cmd 中能识别,但是 VsCode 无法识别的解决办法终端报错:cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1而在cdm中可以查到cnpm的版本解决办法:打开编辑器终端:查:get-ExecutionPolicy 结果:Restricted修改:Set-ExecutionPolicy -Scope CurrentUser提示输入:RemoteSigned查cnpm原创 2022-03-15 11:31:52 · 3025 阅读 · 0 评论 -
vue.config.js 配置
vue.config.js 配置原创 2021-12-09 17:18:57 · 759 阅读 · 0 评论 -
elementUI vxe-table结合使用(通用表格)
App.vue 样式.my-main{ margin: 20px;}.dfc{ display: flex; flex-direction: column;}.dfr{ display: flex; flex-direction: row;}.f1{ flex: 1;}.fl{ float: left;}.fr{ float: right;}.baseColor{ background-color:RGB(48,65,86);color:#fff原创 2021-11-22 16:12:30 · 2823 阅读 · 0 评论 -
vue 兄弟组件之间的传值
1. 定义一个公共的bus.js//bus.jsimport Vue from 'vue'export default new Vue()2. 在子组件A里用$emit发射数据<script>// 引入公共的bug,来做为中间传达的工具import Bus from './bus.js'export default { methods: { details(data) { //发射组件A的数据 pub.$e原创 2021-10-28 16:17:34 · 115 阅读 · 0 评论 -
vue-element-admin中 vuex 的使用
vue-element-admin 中 vuex 是模块化的。登录流程1,HTTP 配置(utils/request.js)2,API 配置(api/user.js)import request from '@/utils/request'export function login(username, password) { return request({ url: '/api-auth/oauth/user/token', headers: { 'client原创 2021-08-25 17:50:20 · 930 阅读 · 0 评论 -
vue项目中使用mock(二)
一,安装:npm install mockjs --save-dev目录:src 同级目录下新建 mock 文件夹 下 新建 mock.js 和 tags.js 文件二,main.js 中导入:require('@/mock/mock.js')三,mock.js 文件:const Mock = require('mockjs')// 设置拦截ajax请求的相应时间Mock.setup({ timeout: "10"});// 自定义mockjs数据列表let c原创 2021-06-16 16:26:04 · 129 阅读 · 0 评论 -
uView(Tabbar 底部导航栏)
(一)第一种方式1,每个菜单页面都要“首页” “发布” “我的” 每个页面都要<template> <view> user <u-tabbar :list="tabBar" :mid-button="true"></u-tabbar> </view></template><script> export default { data() { return { tabBar: '',原创 2021-06-15 19:54:57 · 11326 阅读 · 3 评论 -
el-tree与el-transfer结合成树形穿梭框(tree-transfer)
下载npm install el-tree-transfer --save<tree-transfer :title="['模块(菜单)访问权限', '拥有的操作权限']" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label', children: 'children'}" @addBtn='add' @remov原创 2021-06-09 13:33:09 · 2479 阅读 · 0 评论 -
vue 父组件与子组件之间的传值(主动传值)
一,父组件主动传值1,父组件<Settlement-Table1 ref="comp1"></Settlement-Table1>click(){ this.$refs.comp1.getData(this.list1)}// this.list1 是需要穿的值2,子组件getData(data){ console.log("父组件传过来的", data)},// getData()会自动执行二,父组件主动获取子组件的值1,子组件data()原创 2021-06-06 17:24:13 · 273 阅读 · 0 评论 -
vue 父组件与子组件之间的传值(普通传值)
一,子组件向父组件传值($emit):1、定义子组件<template> <div> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </div></template><script>原创 2021-06-06 17:14:58 · 453 阅读 · 0 评论 -
Vue+Element导入导出Excel
一,安装npm install -S file-saver xlsxnpm install -D script-loader二,导入Excel1,Element 上传控件<el-upload class="upload-demo" action="" :on-change="handleChange" :on-exceed="handleExceed" :on-remove="handleRemove" :file-list="fileList原创 2021-05-27 10:39:19 · 1275 阅读 · 3 评论 -
vue-awesome-swiper缩略图无法联动的问题
一,安装npm install vue-awesome-swiper --save// npm install vue-awesome-swiper@3.x --save我安装的版本是“swiper”: “^6.6.1”,“vue-awesome-swiper”: “^3.1.3”,在使用vue-awesome-swiper组件的时候,缩略图无法和大图实现联动,百度了半天终于发现了一个解决办法。官方代码:<template> <div class="thumb-ex原创 2021-05-15 16:28:04 · 1417 阅读 · 1 评论 -
vue项目中使用mock(一)
一,安装npm install mockjs --save-devnpm install json5 --save-devnpm install axios --save二,每个文件内容目录:流程:Home.vue执行getUserInforList()调用main.js中全局变量$api调用/utils/api下的getUserInfor()通过request.js包装好的get方法请求接口‘/user/getUserInfor’通过devServer配置,拦截http请求moc原创 2021-05-08 17:12:26 · 506 阅读 · 5 评论 -
vuex( 笔记一 )
vuex 方便的实现组件之间数据共享(数据是响应式的,自动刷新)组件的数据 =》 store =》 其他任意组件相当于:组件内的data为私有数据vuex中的data是全局数据(一)安装npm install vuex --save(二)main.js同级目录下的store.js文件内容import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) const store = new Vuex.Store({原创 2021-04-27 18:36:34 · 70 阅读 · 0 评论 -
vue使用echarts图表
https://www.jianshu.com/p/2894b781063b1、安装npm install echarts// npm install echarts --save2、引入 echartsimport * as echarts from 'echarts';3、写一个div容器用来承载图表:<div id="teamLeader"></div>4、写一个方法,(直接复制粘贴官网文档的代码m修改一下容器id和各部分的数值即可)初始化页面的时候,调原创 2021-04-12 16:29:49 · 95 阅读 · 0 评论 -
vue项目实现登录(sessionStorage 存储 token)
前提参考:vue项目封装axios思路:// 1, 前端校验,校验成功后向后台传用户名和密码(每次请求接口都要传 token)// 2, 后端收到请求,验证用户名和密码,验证成功,生成 token 返回给前端// 3, 前端拿到token,将token存储到localStorage// 4, 跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面// 5, 后端判断请求头中有无token,有token,就拿到token并验证token,验原创 2021-04-12 16:27:24 · 4254 阅读 · 0 评论 -
v-for中用elementUI实现分页
html分页的内容<el-aside style="width:49%;" v-for="(item, key, index) in AirInfor.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="index"> <p style="margin-bottom: 10px;"><span>区域:{{ key+1 }}</span></原创 2021-03-24 09:47:04 · 1210 阅读 · 2 评论 -
vue项目封装axios请求
目录:request.js// 引用axiosimport axios from 'axios';import qs from 'qs'const instance = axios.create({ baseURL: 'http://192.168.1.119:8880', withCredentials: true, timeout: 5000, headers:{ "Access-Control-Allow-Origin": '*',原创 2021-03-17 15:31:43 · 215 阅读 · 0 评论 -
使用mpvue开发小程序
一、安装node.js1、在官网中安装nodejs最新版本。地址:https://nodejs.org/en/download/,根据自己环境,进行下载安装。2、安装完成后,进行nodejs版本及npm版本查看。打开cmd命令行,输入 node -v 和 npm -v,node安装后将会自动安装上npm,但不一定是最新的,可用命令 npm install -g npm,进行最新版本安装。安装好之后,就可以使用vue-cli进行初始化一个vue项目。3、使用淘宝NPM 镜像npm install原创 2021-03-05 17:21:22 · 194 阅读 · 0 评论 -
Element UI 的使用
官方文档:https://element.eleme.io/#/zh-CN/component/installation一、普通项目引入相关文件,使用elementui插件:(1)引入相关文件(2)可以直接使用了vue项目使用elementui安装 :npm install element-ui axios --save(1)main.js文件引入// Elementimport ElementUI from ‘element-ui’import ‘element-ui/lib原创 2021-03-05 16:59:54 · 288 阅读 · 0 评论 -
vue的使用(引用/创建vue项目)(一)
在程序开发中,有三种方式创建vue项目,本地引入vuejs、使用cdn引入vuejs、使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广泛。一、vue本地引用在官网下载vue.js,通过script标签引入。开发版本:https://vuejs.org/js/vue.js 包含完整的警告和调试模式生产版本:https://vuejs.org/js/vue.min.js 删除了警告,30.90KB min+gzip注意:在开发环境下不要原创 2021-02-28 15:11:48 · 1634 阅读 · 0 评论 -
vue-cli项目引用文件/组件/库 的注意事项(一)
vue引入的问题(1)main.js入口文件引入(项目中所有的页面都会加载main.js,所以用户放全局变量)// Elementimport ElementUI from ‘element-ui’import ‘element-ui/lib/theme-chalk/index.css’Vue.use(ElementUI)(2)style中引入css文件(3)script中引用js文件/组件/库// 引用js文件import {myfun} from ‘…/js/top.js’// 引原创 2021-03-05 16:57:28 · 165 阅读 · 0 评论