vue2
vue2+webpack
Paul_Chan_
这个作者很懒,什么都没留下…
展开
-
大屏适配方案二——vw和vh
按照设计稿的尺寸,将px按比例计算转为vw和vh,转换公式如下。2、配置在vite.config.js配置less全局变量。1、新建文件:src/styles/index.less。3、在 vue 文件中使用。原创 2023-12-08 11:38:15 · 976 阅读 · 0 评论 -
大屏适配方案一scale()
在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕下展示,确定了实际屏幕比例,按照实际屏幕比例选择一个设计稿尺寸进行设计,设计稿出来后前端严格按照设计稿px进行开发页面即可。默认是挂载在 body 上的,这就导致ScreenScale 组件不能作用在 Modal 上,解决办法就是把 Modal 挂载到组件以内的位置上。在做大屏可视化项目的时候,一般设计稿会设计成1920 * 1080,但是页面写死1920 * 1080在2k、4k等分辨率的屏幕下是不适配的。原创 2023-12-07 11:41:21 · 842 阅读 · 0 评论 -
css深度选择器>>>、/deep/ 、::v-deep 、:deep()
>>>、/deep/ 、::v-deep 、:deep()原创 2023-11-30 17:08:40 · 4599 阅读 · 0 评论 -
H5 使用Vant自适应布局 (postcss-pxtorem)
1) 在src/utils/index.js下。4.main.js引入rem.js文件。2)然后在main.js。原创 2023-09-19 17:43:40 · 595 阅读 · 1 评论 -
前端记住密码功能
登录时记住密码功能原创 2023-08-15 16:29:01 · 190 阅读 · 0 评论 -
大屏系统 自适应布局 postcss-pxtorem
postcss-pxtorem原创 2023-07-27 11:52:38 · 669 阅读 · 0 评论 -
vue中权限路由使用
vue权限路由原创 2022-10-21 15:04:29 · 151 阅读 · 0 评论 -
vue组件的v-for循环中动态绑定ref
1、方法一:在vue组件的v-for循环中是无法动态绑定ref的,若强行绑定,当访问的时候会出现 undefined 的结果,但这不是说没有解决方法,在循环中写:ref=“xxx”,循环结束后,实际生成的是一个ref数组,当取循环中某一元素的ref时,使用下标即可,见下例:<!-- template --><li v-for="(list, index) in tagList" :key="index" ref="tagItem">{{list.value}}</li&g原创 2022-03-02 14:39:55 · 5927 阅读 · 2 评论 -
Vue2.0深度监听
Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?1、vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听。直接监听对象–代码如下:watch:{ obj:{ //监听的对象 deep:true, //深度监听设置为 true handler:function(newV,oldV){ co原创 2021-12-27 00:33:44 · 7796 阅读 · 0 评论 -
vue-router重写push、replace方法,解决相同路径跳转报错
问题描述:当页面再次进入同一个路由地址时,控制台报Uncaught (in promise) Error的错误// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (location, onResolve, onReject) { if (onResolve ||原创 2021-09-16 11:15:33 · 1023 阅读 · 0 评论 -
vue-cli2中引入及使用jQuery
1、安装 jQuerynpm install jquery --save2、webpack配置在build文件夹下找到webpack.base.conf.js文件,在开头第一行使用以下代码引入webpack,因为该文件默认没有引用。const webpack = require('webpack')在module.exports中添加一段代码plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery:原创 2021-02-20 12:01:02 · 1335 阅读 · 0 评论 -
Vue | Vue-ls插件
1、安装npm install vue-ls --save2、注册插件import Vue from 'vue'import Storage from 'vue-ls';options = { namespace: 'vuejs__', // key键前缀 name: 'ls', // 命名Vue变量.[ls]或this.[$ls], storage: 'local', // 存储名称: session, local, memory}; Vue.use(Storage, opti原创 2021-02-07 17:12:04 · 736 阅读 · 0 评论 -
vue-cli4.x配置环境变量
1、配置不同环境下的env文件2、给.env文件添加内容3、在package.json中添加不同环境对应的执行语句通过传递 --mode 来配置不同的模式配置完后执行对应的指令就会加载对应的环境变量,比如运行 npm run gtest加载的是.env.gtest文件4、使用通过process.env.变量的形式使用环境变量值,例如process.env.VUE_APP_API_BASE_URL...原创 2021-02-07 16:50:41 · 424 阅读 · 0 评论 -
vue-cli4.x引入jquery
1)安装:npm install jquery --save2)配置vue.config.jsmodule.exports = { chainWebpack: config => { config.plugin('provide').use(webpack.ProvidePlugin, [{ $: 'jquery', jquery: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquer原创 2021-01-30 17:12:23 · 340 阅读 · 1 评论 -
vue-cli4.x按需引入emement
1.使用npm安装element-uinpm i element-ui -S2.安装 babel-plugin-componentnpm install babel-plugin-component -D3.将babel.config.js修改为:module.exports = { presets: [ '@vue/cli-plugin-babel/preset' //跟官网的不同 ], "plugins": [ [ "component",原创 2021-01-30 15:45:19 · 188 阅读 · 0 评论 -
vue-cli4.x使用过程中注意事项
1、打包后不是放在服务器根目录下,则index.html访问的资源都需用相对路径。在vue.config.js文件配置:publicPath: './'(默认为'/')module.exports = { publicPath: './',}此外:所有引用public静态文件夹下资源都要以"./"开始(默认用'/')如在index.html引用静态js文件 2、跨域处理在vue.config.js文件配置代理module.exports = { devServer: { /原创 2020-12-09 18:39:25 · 326 阅读 · 0 评论 -
刷新后,store中数据丢失处理
//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventLi.原创 2020-08-07 17:37:43 · 3129 阅读 · 0 评论 -
记录项目中使用过的样式
** vue引入外部字体**1、下载所需要的字体,FZHZGB.ttf (方正汉真广标简体) 、FZZDHJT.ttf(方正大黑简体)2、在src下新建common文件,文件夹中包含以下文件3、打开font.css@font-face { font-family: 'FZHZGB'; //重命名字体名 src: url('FZHZGB.ttf'); //引入字体...原创 2019-11-04 11:39:21 · 218 阅读 · 1 评论 -
记录vue的一些应用
1.v-for渲染菜单列表,点击某一项菜单改变颜色html:<dl class="filter-price"> <dt>Price:</dt> <dd><a href="javascript:void(0)" @click="setPriceFilter('all')" v-bind:class="{'cur':priceChec...原创 2019-08-23 14:20:51 · 93 阅读 · 0 评论 -
手机访问开发环境中的Vue项目
1.修改config文件夹下的index.js文件:module.exports = { dev: { host: '0.0.0.0', // 原为: hotst: 'localhost' }}2.查询本地ip打开命令行工具输入ipconfig,回车查看本地ip3.npm run dev运行项目,项目运行成功后pc端和手机网页可输入http://ip:8...原创 2019-12-15 18:24:32 · 552 阅读 · 0 评论 -
vue router-link添加click事件无效
原因:router-link会阻止click事件,你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况解决方案:根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的...原创 2019-12-08 22:21:28 · 1014 阅读 · 0 评论 -
vue在IE下运行报错:vuex requires a Promise polyfill in this browser
解决方法:第一步: 安装 babel-polyfill( babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法)npm install --save babel-polyfill第二步:修改webpack.config.js文件module.exports = { context: path.resolve(__dirname, '../'), ent...原创 2019-12-08 19:41:37 · 306 阅读 · 0 评论 -
vue项目在IE下报错“ReferenceError: Promise未定义”的解决办法
问题原因:1.IE一些低版本的浏览器对于ES6语法不支持2.Promise是es6语法里为了解决异步函数多重嵌套的问题(回调地狱)说明: 或许你并不没有使用Promise,但是有可能你使用Axios等,其中原理也是Promise,进行了封装而已解决办法:1.安装最新的web-pack-server 命令行:npm install --save-dev webpack-server2...原创 2019-12-08 19:31:55 · 907 阅读 · 0 评论 -
vue项目每次打开的端口不同,指定端口失效
原因:portfinder新发布的版本异常解决方法:npm install portfinder@1.0.21原创 2019-12-08 19:08:39 · 538 阅读 · 0 评论 -
vue中使用axios模块加载数据
1.安装 npm install axios2.在main.js中引入import Axios from 'axios'Vue.prototype.$Axios=Axios3.get请求this.$Axios.get('http://jsonplaceholder.typicode.com/comments',{ params:{ ...原创 2019-12-08 18:45:58 · 881 阅读 · 1 评论 -
VUE-CLI2.0使用过程中注意事项
Vue使用过程中注意事项1.图片的引用新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1.图片的引用标签引用...原创 2019-03-27 19:11:22 · 633 阅读 · 0 评论