vue小白炼成记
vue新入入门教程,记录自己从零开始学习的过程,既是做笔记,也希望能给其它新手提供引导
cici_cmh
活到老,学到老
展开
-
vu-element-ui img src 路径为assets 时加载动态图片失效的多种情况分析
项目需要基于当前天气类别,显示对应的天气符号,为img的src属性绑定,其中图片放在目录assets下,发现以下几种情况1)在代码中require必须用computed而不是method如下图,在method getIcon1中,为src 绑定 method getIcon1,getIcon1通过require引入图片,测试无法获取图片解决方法 是将method 变为computed计算属性,可以获取成功(既可以用相对路径也可以用绝对路径)2)通过data引入时,必须在...原创 2020-11-04 10:40:42 · 1567 阅读 · 0 评论 -
unknown mutation type: plan/SET_PLAN_INFO 以及多种方式调用分模块的mutaion
通过module分类管理 store时 调用mutation 出现错误原因:export 时命名空间写错,应该是namespaced:true,只有命名空间公开,才能用plan/SET_PLAN_INFO来调用2、页面中调用时,有多种调用方式a、直接调用this.$store.commit(‘plan/SET_PLAN_INFO’)b、引入mapMutations 在需要调用的组件import{mapGetters,mapMutations}from'vue...原创 2020-10-28 17:26:24 · 526 阅读 · 0 评论 -
vue-admin-template 多个跨域模式设置
通常在跨域时会涉及到从某个固定的服务器获取数据,比如计划信息从计划接口服务器获取(主要的跨域地址),但是天气信息从固定的气象接口服务器获取,图片信息从图片接口服务器获取,此时不能用原来的默认模式一、简单的方法(只讲开发模式下)1、直接在proxyTable中配置1)配置开发环境下默认计划服务器地址跨域2)配置开发环境下天气信息跨域简单模式时完整配置,如天气信息getWeather的实际完整地址3)修改开发环境的默认根目录地址为主要的跨域配置地址在根目录下找到.env.pr原创 2020-09-28 11:27:10 · 2155 阅读 · 0 评论 -
vue-admin-template 引入mapbox 矢量样式 sprite和font跨域配置
开发环境正常配置proxytable 没问题,但是build 后发布到正式环境总是有问题1、矢量地图 图标sprite 跨域访问不到正式项目cmh部署到http://[域名]:[端口]/hyair下,同时存放sprite图标和font字体的spriteUrl文件夹也存放到同一个服务器下,可分别通过http://[服务器域名]:[端口]/spriteUrl/spriteSVG/sprite.png访问到sprite,http://[服务器域名]:[端口]/spriteUrl/font/ 访问到原创 2020-09-25 17:37:58 · 539 阅读 · 0 评论 -
element-ui的el-select总是不显示label,而是显示value
element-ui的el-select总是不显示label,而是显示value,这个问题改了无数次,结果发现是没有为el-option赋值label,原创 2020-09-08 16:48:44 · 966 阅读 · 0 评论 -
element-ui 对话框中嵌套对话框及其遮罩层关闭问题
1、经常会遇到对话框中打开对话框,主要是两个对话框均设置:append-to-body="true"父组件对话框父组件中引入子组件子组件中对话框设置运行后这样即使是多个对话框逐层嵌套都可以。注意的是,在子组件中千万不能输入:modal-append-to-body="false",否则,当子组件关闭时,所有对话框的遮罩层都会被关闭,变成了没有遮罩层,如下图两层对话框关闭子对话框后,父组件的遮罩层同时也被关闭了下图第三层对话框关闭后,父组件和父组...原创 2020-09-07 15:38:20 · 3855 阅读 · 2 评论 -
vscode 中 svn检出的时候报 Unable to connect to a repository at URL错误
vscode检出时报错Unable to connect to a repository at URL ...1、明明提交了,也能看到提交日志,但是vscode右下角还是提示Unable to connect to a repository at URL ...报错,在网上查资料都是清理缓存,具体步骤:右键点击TortoiesSVN -> Settings -> Saved Data->clear清理本地缓存后点击确定,这时再在vscode中提交,提示需要输入svn用户名和密码,按要.原创 2020-09-01 11:15:43 · 1016 阅读 · 0 评论 -
vue-admin-template 自学3-Mock模拟
1、在api下新建脚本,在脚本中声明接口 这里要实现getMyCrafts,声明接口的url和method方式2、在mock中模拟数据,并模拟接口的具体实现 这里的url一定要和上一步中的接口生命中一样,在response中模拟接口的返回3、接口调用在需要调用接口的组件中先通过import{getMyCrafts}from'@/api/aircrafts' 引入接口声明中的接口,然后就可以通过引用getMyCrafts来调用请求了...原创 2020-09-01 10:40:12 · 356 阅读 · 0 评论 -
vue-admin-template 自学2-添加自定义登陆状态
项目需要在左侧菜单树的底部添加登陆状态显示,由于上一篇中已经屏蔽了默认的navbar状态菜单,这里,可以添加自定义的loginBar组件1、在sideBar文件夹下新建loginBar组件2、登陆状态的现实,对于已经登陆的,要显示登出log out 按钮,这里绑定isLogin 来显示,当组件初始化后,通过计算isLogin中获取登录token来获取登陆状态,从而切换 logout 菜单的现实3、退出登录实现d对于已经登陆的用户,显示了og out 按钮,点击log out,可实现退原创 2020-09-01 10:01:44 · 449 阅读 · 0 评论 -
vue-admin-template 自学1-基于路由修改页面登陆菜单布局
因项目需要,需要改变vue-admin-template 登陆后页面布局1、布局试图在layout/index.vue中,因为我这里的菜单不含二级子菜单,且不需要右上角的登陆试图,所以屏蔽掉二级子菜单和navbar2、修改路由router/index.js,删掉默认的dashboard,添加自己的默认页面3、在视图中添加geo组件实现,views/geo/index.vue组件,在组件中填写自己的实现4、基本上默认效果如下...原创 2020-09-01 09:44:44 · 962 阅读 · 0 评论 -
vscode 记录
1、颜色主题 推荐 Dracula2、头文件和函数注释 KoroFileHeadere3、格式 veture原创 2020-08-27 09:28:06 · 95 阅读 · 0 评论 -
vue-cli3 在qq浏览器不兼容
之前一直用google浏览器,发现在qq浏览器不显示内容,解决办法,直接使用cli-plugin-babel框架,具体安装如下npm i @vue/cli-plugin-babel安装后,项目跟目录下,会自动新增babel.config.js配置文件,重新运行项目即可...原创 2020-08-10 10:10:14 · 1266 阅读 · 1 评论 -
vscode 配置调试环境(内部调试+远程调试)
vscode 开发vue时,以前为了懒,直接利用浏览器的F12来进行调试,但每次找代码的具体位置比较繁琐,还是要遵循标准的调试方式。 1、首先安装vscode的扩展控件Debugger for Chrome2、配置调试参数 在vscode左侧的目录树中打开调试窗口,在打开的窗口中点击 小齿轮样式的设置 按钮,然后选择chrome, 然后选择要调试的项目,我这里选择hy3d,VSCode将会在工作区hy3d根目录生成.vscode目录,里面会有一个l...原创 2020-05-09 17:36:04 · 4201 阅读 · 0 评论 -
vue 发布到正式环境跨域配置(及部署后无法通过路由访问问题)
vue在本地跨域通过配置proxy没有问题,但是发布到正式环境后仍然存在跨域问题,只有通过跨域1、在vue.config.js文件中devServer下的proxy子节点添加正式环境跨域参数,这里在正式环境的跨域为api3s2、配置正式环境参数2.1 配置基于axios的请求跨域,新建axois的基础配置文件https.js,配置axios的默认url ,这样在正式环境,a...原创 2020-04-07 17:38:43 · 4507 阅读 · 0 评论 -
vue中矢量切片样式文件style.json 部署到正式环境
vue中通过mapbox脚本添加矢量切片,会存在跨域问题,需要修改的地方如下其中矢量图层不需要跨域处理,为图层在矢量切片服务器中的地址,但是sprite和glyph的地址需要做跨域处理sprite和glyphs在nginx.conf中的跨域处理如下...原创 2020-04-08 09:28:19 · 360 阅读 · 0 评论 -
vue 引入外部脚本(将脚本单独放在一个js文件中,避免vue文件臃肿)
.vue文件可以很好的模块化,但是对于从纯js前端转变过来的人可能会有点困难,尤其是习惯了html引入js脚本,在vue文件中,通常将脚本放在method中,但是有的时候如果方法过多,造成vue文件过大不利于管理,尤其是这些方法可能就是纯数据处理,对于组件关系不大,比如日期转换,大小写转换等,可以将其放在一个js文件中,export出去,然后在.vue文件中调用。demo:表示基于风速和风...原创 2019-11-13 13:46:21 · 2975 阅读 · 0 评论 -
vue配置接口url
接上一篇“vue配置axois多环境跨域访问”,aoxis在请求是要有url的,这里写ur的配置为了项目的需要,可以在src的common文件夹下新建api文件夹,在文件夹下新建index.js,在这里写配置文件import { xmmc } from './xmmc.js' //导入项目名称import commonWea from './commonWea/index.js'...原创 2019-11-04 09:52:32 · 3984 阅读 · 0 评论 -
vue配置axois多环境跨域访问
需求:项目的开发环境、演示环境和正式环境在不同的服务器,因此需根据需要自动配置axois的服务器路径,同时也要配置跨域访问1、项目中安装axoisnpminstallaxios--save2、配置axois在main.js文件中添加import axios from 'axios' //引入axiosVue.prototype.axios = axios;...原创 2019-11-04 09:19:35 · 858 阅读 · 0 评论 -
vue-cli3 调用jsonp
因为项目是对旧项目的重构,旧项目有用到jsonp格式,直接用axios调用会出现null字符串,而且返回的格式也不是json形式所以需要增加对jsonp的使用,具体如下:1、添加jsonp依赖npmijsonp--save-dev2、在页面中引用jsonpimport jsonp from "jsonp";3、在页面中使用用jsonp ...原创 2019-08-07 11:44:25 · 2079 阅读 · 0 评论 -
vscode 配置svn插件
1、首先要在桌面端安装svn的客户端TortoiseSVN,注意在安装的时候要选择Command line tools,否则,在vscode中安装后会报错“SVN not found”2、如果已经安装了客户端还是报Command line tools错误,说明在安装的时候没有选择Command line tools(默认是不红色的叉叉,代表不安装Command line tools),这时...原创 2019-08-02 10:03:33 · 82998 阅读 · 13 评论 -
vue 添加变量(非全局)
之前有说过vue 添加全局变量和全局函数,但有时并不需要在全局中用到,有时某个vue组件需要用到某个局部变量针对这种情况,可以将变量放在一个js文件中,如focused.js文件const focused = 1;const S = "dd"export { focused, S}在页面中有两种方式调用方式1:import { focused,S ...原创 2019-07-25 15:57:30 · 576 阅读 · 0 评论 -
vue-cli3 用路由配置多页面
之前有写过用vue.config.js中的pages节点配置多页,但是这样,每个页面都要有一个入口文件和入口vue(如app.js 和app.vue),对于多个同样的项目,尤其是要利用到共同的通用配置,其实只需要写一个入口文件,入口vue,每个页面个性化写自己的页面,可以充分做到既通用又模块化1、在src目录下新建router文件夹,文件夹下新建index.js,index.js中写每个页...原创 2019-07-18 15:54:31 · 7346 阅读 · 0 评论 -
关于vue-cli3 走过的坑
1、在vue-cli3中静态资源目录为public,而不是static,所以如果静态资源,可以放在public中 比如map.html 放在public下,运行npm run serve 后用http://localhost:8004/map.html可以访问得到,反之,放在static下则访问不到2、组件中调用方法奥,为了更好的组织,将方法放进某个文件然后暴露出来,供组件调用,不...原创 2019-07-18 13:49:11 · 281 阅读 · 0 评论 -
vue 配置jquery
1、安装jquery 依赖npminstalljquery–S2、在配置文件vue.config.js中添加jquery 配置在文件头部 添加定义const webpack = require('webpack')在配置中添加引用configureWebpack: {plugins: [new webpack.ProvidePlugin({jQuery: ...原创 2019-07-15 15:12:12 · 1834 阅读 · 0 评论 -
vue 引入iconfont自定义图标
1、在阿里的iconfont 页面(https://www.iconfont.cn)注册账号,新建项目,添加感兴趣的图标到自己新建的项目,修改图标的类名,下载项目到本地,解压2、在asset下的lib目录下新建iconfont目录,将步骤1中的文件拷贝到这个目录3、修改iconfont.css文件,修改引用文件的目录结构,主要是添加头部及修改默认的iconfont类的样式(下次下载...原创 2019-07-05 16:47:12 · 2697 阅读 · 0 评论 -
vue配置sass全局变量
vue配置sass全局变量很多时候sass的样式可以重复利用,或者颜色,背景、字体等都可以重复使用,因此可以将其设为全局变量,以便在sass中重复利用背景、颜色、圆角等变量$hy1bcol:rgba(51, 133, 255, 0.8); //背景$hy1fcolv: #FF9800; //突出颜色,黄橙色$hy1bsha:1px 2px 1px rgba(0, 0, 0, .15); ...原创 2019-07-05 16:12:42 · 815 阅读 · 0 评论 -
vue配置sass
1、安装sass依赖npm install node-sass --save-devnpm install sass-loader --save-dev2、新建scss文件,编写scss代码运行后,得到效果如下:原创 2019-07-05 15:57:46 · 88 阅读 · 0 评论 -
vue-cli3 配置多页
在网上看了很多例子,但是自己试总不成功,终于在github 中 下了一个可用,然后自己测试了下,可用,这里做个笔记1、在src 下新建pages目录,pages下具体的页面建具体的文件夹,然后添加app.js 和app.vue,这里app.js 等效于单页框架下的入口文件main.js,组件 app.vue 等效于单页下的app.vue,vue通过入口文件解析app.vue 并替换模板文件in...原创 2019-07-05 14:16:10 · 878 阅读 · 0 评论