《Vue2 基础知识》
记录工作中遇到的知识点
AvatarGiser
这个作者很懒,什么都没留下…
展开
-
Vue2.x 中使用 echarts
安装注意我使用的是4.6.0 版,使用 5.x 版会报错。具体原因参考此篇(Vue 中使用 Echarts5.0 的一些问题(vue-cli 下开发)_sanye丶的博客-CSDN博客),这个大佬说的很清楚 。npm i echartsvue 文件中导入import echarts from "echarts";使用let option = { xAxis: { type: 'category', data: ['Mon', 'Tue'.原创 2021-12-04 17:04:57 · 757 阅读 · 0 评论 -
插件 sortablejs:HTML元素可拖动排序
插件 sortablejs:HTML元素可拖动排序原创 2023-02-10 16:42:22 · 771 阅读 · 0 评论 -
03基于 Vue2.x 的 Vuex3.x .
本文是基于 Vue2.x 的 [Vuex3.x](https://v3.vuex.vuejs.org/zh/) 版原创 2022-09-09 17:59:18 · 338 阅读 · 0 评论 -
Vue 用户30分钟未操作,页面跳转到登录页
【代码】Vue 用户30分钟未操作,页面跳转到登录页。原创 2022-08-23 16:29:16 · 1523 阅读 · 0 评论 -
基于 vue-element-template 框架添加 tagsview
基于 vue-element-template 框架添加 tagsview原创 2022-07-26 11:03:28 · 1068 阅读 · 2 评论 -
vue-element-template 框架嵌入 vue2.x 项目中
需求在某个已开发的 vue2.x 项目中嵌入轻量级的后台管理框架下载注意官网提供了多个方案模板,我使用的是基础模板 vue-admin-template嵌入下载 vue-admin-template工程,注意我当时下载的是 v4.4.0。代码结构如下步骤一:1. 直接将红框文件拷贝到你的项目中;2. 将 getters.js 文件中的信息拷贝到你的项目中;步骤二安装插件npm i js-cookienpm i normalize.cs....原创 2022-05-25 16:39:20 · 1794 阅读 · 2 评论 -
Vue2.0 使用 https 启动工程设置
项目工程根目录下,找到文件 vue.config.js。设置module.exports.devServer.https: truemodule.exports = { productionSourceMap: false, configureWebpack: { devtool: 'source-map' }, // 它支持webPack-dev-server的所有选项 devServer: { https: true, //.原创 2022-04-25 20:59:13 · 3826 阅读 · 0 评论 -
vuex 简单使用
设置import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { // 是否显示 visible: true }, mutations: {// 同步操作,可修改 setVisible (state, value) { state.visible = value }, }, getters:原创 2022-04-12 14:25:25 · 153 阅读 · 0 评论 -
Vue.extend + vm.$mount 动态加载组件
前提是组件模板已定义好,例如组件AComponents.vue<template> <h1>这是 A 组件.</h1></template><script>export default { name: 'AComponents',}</script>主页中调用<template> <div class="extend-main"> <button @clic.原创 2022-01-21 17:29:50 · 612 阅读 · 0 评论 -
Vue 以插件方式注册全局组件
这里以 Element UI 为例,且将组件改了别名导出方式一import { Button, Checkbox, Input } from 'element-ui'const elements = [ Button, Checkbox, Input ]// 方式一let GmElements = {}GmElements.install = function(Vue, options) { elements.forEach(el => { // 组件原创 2022-01-19 10:37:12 · 675 阅读 · 0 评论 -
Vue-Cli2.x 和 Cli3.x 配置跨域请求代理,设置请求头(有区别)
Vue-Cli2.x文件 /config/index.js,属性dev.proxyTableVue-Cli3.x文件 /vue.config.js,属性 devServer.proxy原创 2021-11-09 11:39:28 · 897 阅读 · 0 评论 -
Vue 组件的静态方法(自用)
一、例子父组件 Parent.vue<template> <div></div></template><script>import Child from '../Child.vue'export default { name: 'Parent', data() { return {} }, mounted() { // 调组件的静态方法 Chi原创 2021-10-13 14:35:01 · 1197 阅读 · 0 评论 -
Vue 中获取路由名称
注意1. 名称相对于路径多了一个 /2. $route 与 $router 的区别,前者是当前路由信息对象,后者是全局VueRouter实例// 当前路由的名称, 如 'index'let name = this.$route.name;// 当前路由的路径,如 '/index'let path = this.$route.path;介绍一个古老的方式// 获取路径let split = window.location.href.split('/');let pa...原创 2021-09-15 18:00:14 · 4872 阅读 · 0 评论 -
Vue router 默认加载 views 文件夹下全部vue文件
默认将 src/views 文件夹下的全部 vue 文件加载为路由页。修改文件 src/router/index.js 即可:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 遍历 views 文件夹下的全部 vue 文件const requireViews = require.context('../views', true, /\w+\.vue$/);// 获取所有组件对象,遍历设原创 2021-07-21 11:51:41 · 2622 阅读 · 2 评论 -
Vue CLI 小知识点
官网非常详细,仅在此记录!CLI: Command-Line Interface,命令行界面,俗称脚手架。介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:通过@vue/cli实现的交互式的项目脚手架。 通过@vue/cli+@vue/cli-service-global实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service),该依赖: 可升级; 基于 webpack 构建,并带有合理的默认配置; 可以通过项目内的...原创 2021-07-21 11:34:27 · 217 阅读 · 0 评论 -
Vue 中加载图片 public 和 src/assets 文件夹下的区别(采坑)
HTML<img :src="imgUrl">一、public 文件夹路径设置时无需添加 public/,默认加载 public 文件夹下的图片。 不需要使用 require,否则就变成在 src/assets 文件夹寻找。 系统编译后,可替换图片;this.imgUrl = 'images/test.jpg';// 或this.imgUrl = './images/test.jpg';二、src/assets 文件夹需要使用 require,运行时就加载;.原创 2021-04-30 11:28:04 · 7300 阅读 · 0 评论 -
Vue 中获取 package.json 信息
// 注意 package.json 文件无需 export,直接 importimport config from '../package.json' // 获取版本号let version = config.version;// 获取插件vue-router 的版本号let baseVersion = config.dependencies['vue-router'];知识扩展一、package.json 中~和^的区别"devDependencies": { "...原创 2021-03-17 15:48:13 · 4964 阅读 · 0 评论 -
vue-drag-resize 拖拽缩放插件
一、前言项目需求,在网上找到一个好用的插件。中文详解:链接git:链接二、效果三、源码<template> <div class="main"> <vue-drag-resize :w="vw" :h="vh" v-on:resizing="resize" > <div class="box" :style="{ width: `${vw}px`, height: `${vh}px` }"&g原创 2021-03-04 17:12:20 · 5585 阅读 · 4 评论 -
Vue router 自动设置 views 文件夹下的组件(小技巧)
适用场景:如果 src/views 文件夹下都是路由页,可在 src/router/index.js 中设置自动获取。import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 遍历 views 文件夹下的全部 vue 文件const requireViews = require.context('../views', true, /\w+\.vue$/);// 获取所有组件对象,遍历设置.原创 2021-02-26 13:38:58 · 2097 阅读 · 0 评论 -
Vue 中的别名设置与使用(采坑)
一、设置vue.config.js 文件,set 方法,第一个参数是自定义别名,第二个参数是原始路径module.exports = { // 资源路径简写 chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('@stylus', resolve('src/assets/stylus')) .set('@components', resolve('原创 2021-02-24 15:23:58 · 2207 阅读 · 2 评论 -
Vue 中添加拖动指令
一、源码直接上核心代码, my-drag.js(重点)注意:事件onmousemove 和onmouseup 使用的是 document,不能使用 el,否则会有拖动卡顿问题。但事件onmousedown 使用 el 。import Vue from 'vue'; Vue.directive('gmDrag', { //1.bind:只调用一次,指令第一次绑定到元素时调用。 //2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象 ...原创 2021-01-22 10:40:21 · 448 阅读 · 0 评论 -
Vue ElementUI 安装与引入
目录一、安装二、全局引入 (main.js)三、使用一、安装npm i element-ui -S二、全局引入main.js 文件// js 文件import ElementUI from 'element-ui'// 样式文件import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)三、使用参考官网:https://element.eleme.cn/#/zh-CN/compon...原创 2021-02-23 09:18:08 · 427 阅读 · 0 评论 -
Vue axios 安装与引入
目录一、安装二、引入一、安装Vue 项目中安装npm i axios -S安装成功后可在 package.json 文件中查看安装的版本二、引入全局引入,赋在 Vue 的原型上。main.js 文件中注册。import Vue from 'vue'import App from './App.vue'import axios from 'axios';Vue.prototype.$axios = axios;new Vue({ axios, r原创 2021-02-24 11:52:41 · 6936 阅读 · 0 评论 -
Vue router 二级默认路由设置
一、起因打开默认地址 / (http://localhost:8080/),home 页面有空白,因为没有指定子页面。// router.jsconst childRoutes = [ { name: "index", path: "/index", component: () => import(`../views/index.vue`) }, { name: "about", pat原创 2021-02-23 11:53:27 · 2061 阅读 · 0 评论 -
Vue 获取事件的 event 对象(2种方式)
方式一:默认获取不填写时,默认第一个参数就是 event 对象。<template> <div> <button @click="onClick">点击</button> </div></template><script>export default { methods: { onClick(e) { console.log(e原创 2021-02-23 11:30:54 · 14238 阅读 · 1 评论 -
Vue router 非懒加载和懒加载
目录一、起因二、配置1. 非懒加载1.1. import1.2. require2、懒加载2.1. import2.2. require一、起因修改路由配置时报下图错误,所以这里浅研究路由的配置。二、配置1. 非懒加载1.1. importimport Vue from 'vue'import Router from 'vue-router'import index from '@/view/index'Vue.use(Router)原创 2021-02-22 11:51:52 · 1011 阅读 · 0 评论 -
Vue 中使用 codemirror
一、安装官网地址:https://codemirror.net/npm 插件地址:https://www.npmjs.com/package/vue-codemirrorvue 项目中安装,npminstallvue-codemirror--save可在 package.json 文件中看到,当前是 4.0.6 版二、使用1、引入这里是局部引入,vue 文件中引入主题dracula 是目前我觉得还比较好看的样式,可在路径 node_modules\codem...原创 2021-02-08 16:23:17 · 9457 阅读 · 5 评论 -
Vue router 安装与引入
一、背景一直都是在 vue create 中直接选中安装router。今天新建vue项目,忘了选 router,结果就不知怎么手动创建了。。。只好拿出默认安装的vue项目对照修改,也在此也记录一下。二、安装npm install vue-router --save三、配置src 文件夹下新建 router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import index from '..原创 2021-02-08 13:42:50 · 1308 阅读 · 0 评论 -
Vue 跨域问题
目录一、环境二、配置一、环境node 12.18.4@vue/cli 4.5.10二、配置vue.config.js,配置 devServer.proxy 属性module.exports = { devServer: { host: 'localhost', port: 8086, // 端口号 https: false, open: true, //配置自动启动浏览器 p原创 2021-02-07 10:36:23 · 132 阅读 · 0 评论 -
Vue 中的图片加载(采坑)
1、importimport remarkIcon from './redflag.png';L.icon 中使用 iconUrl 用 import 的图片let icon = L.icon({ iconUrl: remarkIcon, iconSize: [16, 16]});2、require<img :src="require('./redflag.png')" alt="">3、urlcss 使用 url.remar...原创 2021-01-27 14:38:54 · 589 阅读 · 0 评论