![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
freewlt
这个作者很懒,什么都没留下…
展开
-
vue全家桶之vue-cli简介和npx 的基本使用
vue-cli是一个脚手架可以快速去构建基于vuejs项目(快速的组织一些页面的结构,引入 vuejs 单组件的管理方式)。注意:目前 vue-cli 的版本是4.x(刚刚升级上来的,之前一直使用的都是 2.x 版本,并且 2.x 的版本的使用和3.x版本的使用稍微有些不一样的)。vue-cli的安装npm install -g @vue/cli# ORyarn global add @vue/cli注意无论使用的 npm 或者 yarn 都是全局。现在我们需要注意一些事情,现在企业开发项转载 2021-12-01 15:52:43 · 885 阅读 · 0 评论 -
h5 底部按钮兼容 iPhone (解决底部横杠遮挡问题)
iOS特性方法(推荐),小程序也可用padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <ti原创 2021-03-25 16:59:50 · 1985 阅读 · 0 评论 -
vue移动端适配
基础点:rem相对根节点<html>字体的大小。所以不用px;根字体:<html>字体的大小px;px:你就当成cm(厘米)这样的东西吧;基准:750设计稿;目标一 、手机适配:就是页面上的尺寸,无论高度,还是宽度,还有字体,随屏幕的宽度变化!这里是屏幕宽度!是不是想到了vw,对,就是这个意思;——最大程度在各个尺寸屏幕上还原设计稿目标二、px转换成rem:一般UI给的设计稿宽度大小是750,所以,我们想直接写上面UI标记的尺寸;——最大程度减少工作为什么选择rem.原创 2021-02-08 16:50:32 · 136 阅读 · 0 评论 -
vue - 针对单个 js 文件禁用 ESLint 语法校验
在 Vue-cli 创建的项目中,使用了 ESLint 规范代码,在使用一些老版本的vue库的时候,语法不符合ESLint会导致项目报错无法通过编译。如何针对单个 js 文件禁用 ESLint 语法校验,但整个项目依然保留 ESLint 的校验规则?解决方案:在代码顶部添加一行注释,即可禁用 ESLint 语法校验/* eslint-disable */...原创 2021-01-26 17:30:07 · 381 阅读 · 0 评论 -
vue项目手机端适配
1、安装 flexible和 postcss-px2remyarn add lib-flexible --saveyarn add postcss-px2rem --save2、 引入lib-flexible在项目入口文件main.js 中引入lib-flexibleimport ‘lib-flexible’注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!3、配置原创 2021-01-05 15:43:57 · 3767 阅读 · 0 评论 -
Vue CLI 3 配置之 productionSourceMap
问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,这些文件导致文件过大,加载比较缓慢,那么怎么去掉这些文件呢?运行yarn build 开始打包后会在项目目录下自动创建dist目录,打包好的文件(包括.map)都在其中解决办法:在 vue.config.js 中添加一个参数productionSourceMap:false把这个改为false。不然在最终打包的文件中会出现一些map文件map文件的作用:项目打包后,代码都是经过压缩加密的,如果运..原创 2020-08-31 09:47:41 · 1001 阅读 · 1 评论 -
vue-cli配置开发、测试、生产环境
场景描述:为了在测试过程中,不用反复修改环境信息。xian1.根目录创建.env.dev、.env.test、.env.pro文件(开发、测试、生产)2.文件内容及字段说明NODE_ENV:可以设置为其他值,比如"test",但是打包后的目录结构和"production"不一样,所以还是设置为"production",通过"VUE_APP_MODE"变量来区分环境 VUE_APP_MODE:线上测试环境 VUE_APP_API_URL:api调用地址3. .env.dev内容...原创 2020-08-26 14:18:05 · 838 阅读 · 0 评论 -
Error: ENOENT: no such file or directory, scandir ‘E:\MyWorkSpaces’
在使用npm安装node-sass的时候,可能会出现如下的报错:Error: ENOENT: no such file or directory, scandir 'E:\MyWorkSpaces\GitResource\node_modules\.npminstall\node-sass\3.7.0\node-sass\vendor' at Error (native)解决方案是执行以下方法:npm rebuild node-sass...原创 2020-08-06 12:21:40 · 387 阅读 · 0 评论 -
Vue项目更丝滑的几个小技巧
数据不响应,可能是用法有问题:比如下面这段代码:<template><div><div><span>用户名:{{userInfo.name}}</span><span>用户性别:{{userInfo.sex}}</span><span v-if="userInfo.officialAccount">公众号:{{u...转载 2020-07-21 09:42:27 · 350 阅读 · 0 评论 -
Vue刷新页面的三种方式
原始方法: location.reload(); vue自带的路由跳转: this.$router.go(0) 前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。 所以,我们选择第三种方式: 首先在App里面写下如下代码: <template> <el-container class="home"> <router-view class="main" v-if="isRouter...原创 2020-06-29 11:14:26 · 254 阅读 · 0 评论 -
vue中input输入框触发功能父子组件传值
子组件:<template> <div class="inputTip"> <el-input v-model="currentValue" @input="childClick"></el-input> <el-tooltip class="item" effect="dark" :content="msg" placement="top"> <i class="el-icon-warning-outl原创 2020-06-15 14:29:26 · 2402 阅读 · 0 评论 -
前端常用60余种工具方法
1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) =>转载 2020-05-29 09:44:39 · 216 阅读 · 0 评论 -
vue 菜单路由重复点击报错
原因:未知解决方法:在当前页面添加:import Router from 'vue-router'const originalPush = Router.prototype.push;Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)};原创 2020-05-26 11:37:32 · 328 阅读 · 0 评论 -
vue基础知识点
说说你对MVVM的理解 Model-View-ViewModel的缩写,Model代表数据模型,View代表UI组件,ViewModel将Model和View关联起来。 数据会绑定到viewModel 层并自动将数据渲染到页面中,视图变化时候会通知viewModel层更新数据。 vue2.x响应式数据/双向绑定原理 Vue数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。其中,View变化更新Data,可以通过实践监听的方式来实现,所以Vue数据双向绑定的的工作主要是如.原创 2020-05-25 11:52:07 · 417 阅读 · 0 评论 -
vue项目中有时间文件路径上有@,代表什么意思?
使用 import utils from '@/assets/js/utils.js'@这东西代表着到src这个文件夹的路径。这里就不用一步步找父元素利用相对路径写很长很久来写了。而是利用@直接定位到了src目录下。然后找这个utils.js是在src的那个文件里面...原创 2019-12-04 14:13:12 · 176 阅读 · 0 评论 -
vue项目的日期格式化
export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth()...原创 2019-12-03 09:38:03 · 450 阅读 · 0 评论 -
vue 页面间传值
同级传参的两种方式1.query穿参,或者params传参使用 this.$router.push({path: '/', query: {参数名: '参数值'})this.$router.push({name: '/', params: {参数名: '参数值'})注意1: 使用params时不能使用path接收: var a = this.$route.query.参数名...原创 2019-12-02 15:22:49 · 148 阅读 · 0 评论 -
Vuex- Action的 { commit }
Vuex 中 使用 Action 处理异步请求时,常规写法如下: getMenuAction:(context) =>{ context.commit('SET_MENU_LIST',['承保2','核保2']) } } 我们也可以使用如下简化写法,如下: actions:{ getMenuActio...转载 2019-11-27 15:41:41 · 607 阅读 · 0 评论 -
vuex中store存储store.commit和store.dispatch的区别及用法
代码示例:this.$store.commit('loginStatus', 1);this.$store.dispatch('isLogin', true)规范的使用方式:// 以载荷形式store.commit('increment',{ amount: 10 //这是额外的参数})// 或者使用对象风格的提交方式sto...原创 2019-11-27 15:35:55 · 1220 阅读 · 0 评论 -
vue项目中加载慢的时显示{{}}
/*css样式*/[v-cloak] {display: none;}<!--html代码--><div id="app" v-cloak><ul><li v-for="item in tabs">{{item.text}}</li></ul></div>//js代码new Vue({...原创 2019-11-26 14:33:03 · 524 阅读 · 0 评论 -
Vue项目怎么在手机上面测试
1.修改config文件夹下面的index.js文件找到host: ‘localhost’,修改为:host: ‘0.0.0.0’module.exports = { dev: { host: '0.0.0.0', port: 8083, }}2.运行在命令行输入:npm run dev然后复制链接到浏览器,将ip地址变为你的ipconfig之后得...原创 2019-11-26 12:14:02 · 424 阅读 · 0 评论