vue-cli
文章平均质量分 89
随便起的名字也被占用
卷心菜,即菜又卷,还是菜,继续卷。
展开
-
超实用:Vue 自定义指令合集
在Vue2.0中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通DOM元素进行底层操作,这时候就会用到自定义指令。你可以将一些css样式抽象到指令中,也可以将一些js操作放到指令中去执行。就使用上来说,指令不用像组件一样需要引入和注册,注册后使用非常简洁方便。对于在项目中常用到的指令,在此做了一个合集介绍,附源码可以直接在项目中使用。元素点击范围扩展指令 v-expandClick使用该指令可以隐式的扩展元素的点击范围,由于借用伪元素实现,故不会影响元素在...原创 2021-07-08 09:23:27 · 619 阅读 · 0 评论 -
基于Vue的前端架构,我做了这15点, 搭建vue框架所需的基础配置
转自:codexujuejin.cn/post/69014669944789401681.分解需求技术栈 考虑到后续招人和现有人员的技术栈,选择 Vue 作为框架。 公司主要业务是 GIS 和 BIM,通常开发一些中大型的系统,所以 vue-router 和 vuex 都是必不可少的。 放弃了 Element UI 选择了 Ant Design Vue(最近 Element 好像复活了,麻蛋)。 工具库选择 lodash。 建立脚手架 搭建..转载 2021-01-06 09:29:52 · 755 阅读 · 0 评论 -
[email protected] + 打包优化加载速度,打包去除console
vue-cli3打包生成环境移除console.log1.安装依赖npm install babel-plugin-transform-remove-console --save-dev2.babel.config.js文件【先配置不同的环境变量VUE_APP_ENV】 const plugins = ["@vue/babel-plugin-transform-vue-jsx"]// 生产环境移除consoleif(process.env.VUE_APP_ENV === 'prod原创 2020-12-04 11:37:17 · 858 阅读 · 0 评论 -
vscode开发vue项目自动整理代码
安装必要的插件配置文件{ "window.zoomLevel": 0, "px-to-rem.px-per-rem": 100, "workbench.editor.enablePreview": false, //打开文件不覆盖 "search.followSymlinks": false, //关闭快速预览 "files.autoSave": "af...原创 2020-04-14 14:06:30 · 1951 阅读 · 0 评论 -
uni-app快速入手 ——(3)生命周期
应用生命周期uni-app支持如下应用生命周期函数:函数名 说明 onLaunch 当uni-app初始化完成时触发(全局只触发一次) onShow 当uni-app启动,或从后台进入前台显示 onHide 当uni-app从前台进入后台 onError 当uni-app报错时触发 onUniNViewMessage ...原创 2020-03-14 16:07:47 · 465 阅读 · 0 评论 -
uni-app快速入手 ——(1)学会搭建基础项目,如何建uni-app项目和运行
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。DCloud公司拥有420万开发者,几十万应用案例、6.5亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课...原创 2020-03-05 13:43:53 · 9397 阅读 · 1 评论 -
uni-app快速入手 ——(2)uni-app 事件处理、事件绑定、事件传参,uni-app事件对应web事件
uni-app 的事件处理器几乎全支持Vue官方文档:事件处理器// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件{ click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touche...原创 2020-03-05 13:42:47 · 2513 阅读 · 2 评论 -
vue-cli项目中 eslint语法检测在单文件中关闭检测的几种方式
一. 安装 npm install eslint二. 配置 ESLint的配置有三种方式:1、.eslintrc.*文件的配置 首先你需要初始化配置文件。eslint init这将会在你的当前目录下生成一个.eslintrc.*文件。.eslintrc的后缀可以是.js、.yalm、.yml和.json中的任意一个。以.json格式为例。.eslintrc.json...原创 2019-01-22 11:12:09 · 3757 阅读 · 1 评论 -
vue-cli3.0创建项目,vue-cli3.0各项配置与安装, vue-cli3.0 上手教程 (一)
目录1. 安装 vue-cli3.0 ,可以使用下列任一命令安装这个新的包:2.打开终端,创建一个项目3. 配置 自己选择4. 项目构建完成 启动项目4.1启动成功4.2运行报错 无报错 忽略5.安装axios6. 配置 vue.config.js6.1全局 CLI 配置 文档6.2配置跨域代理vue-cli 3.0 官网教程vue-...原创 2019-01-22 16:21:41 · 6196 阅读 · 2 评论 -
vue-cli3.0创建项目,vue-cli3.0各项配置与安装, vue-cli3.0 上手教程 (二)
一、解决模板编译的问题在升级脚手架到vue-cli3.0版本的时候出现了这个报错:[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render function...原创 2019-03-08 14:19:28 · 490 阅读 · 1 评论 -
vue-cli3.0创建项目,vue-cli3.0各项配置与安装, vue-cli3.0 上手教程 (二)之 登录加密——如何在vue项目中使用md5.js及base64.js
在做登录的时候对密码会进行简单的加密。简单采用MD5和base64加密,或者采用组合加密,盐值加密等,如何在vue项目中使用md5.js及base64.js一、在项目根目录下安装npm install --save js-base64npm install --save js-md5二、在项目文件中引入 全局在main.js中引用import md5 from "j...原创 2019-03-25 10:38:20 · 815 阅读 · 0 评论 -
vue 组件间的事件传值之(EventBus)
许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用,但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习,Vue组件数据通讯常常会有父子组件,兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。父子组件通讯原则为了提高组...原创 2019-03-29 10:25:39 · 2646 阅读 · 0 评论 -
vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件
背景:vue项目中用到echarts图表,页面上有侧边栏,侧边栏收缩图表不能自适应,想通过监听内容部分的宽度让图表resize,试过window带的resize,只能监听浏览器窗口大小变化,为了监听某元素区域的变化而使echarts的尺寸重置。本次解决采用element-resize-detector可以完美的解决思路:因为收缩侧边栏的时候右侧的区域会自动适应,但是echarts不...原创 2019-04-12 17:40:56 · 36119 阅读 · 28 评论 -
vue-cli3+element搭建后台管理项目
一、安装需要的插件(1)创建项目vue create admin_project(2)安装elementnpm i element-ui -S(3)安装js-base64 js-md5 用于账号登录注册npm install --save js-base64npm install --save js-md5(4)安装默认样式清除normalize.c...原创 2019-04-26 14:59:01 · 2382 阅读 · 1 评论 -
vue项目中 页面生成pdf并下载,vue 中页面转PDF
方法一第一步、安装插件// 第一个.将页面html转换成图片npm install --save html2canvas// 第二个.将图片生成pdfnpm install jspdf --save 第二步、定义全局函数,创建一个htmlToPdf.js文件在指定位置.例如放在('src/utils/html2pdf')// 导出页面为PDF格式import html2...原创 2019-06-29 16:54:15 · 21998 阅读 · 17 评论 -
vue中移动端网页 自定义触屏事件,点击、滑动、左滑、右滑、下滑、上滑、长按事件
事件主要是监听touchstart、touchend与touchmove事件,事件这样可以获取用户触屏结束后的位置,这样就可以计算出用户在屏幕上滑动的方向v-tap: tap点击事件 v-swipe: swipe滑动事件 v-swipeleft: swipeleft左滑事件 v-swiperight: swiperight右滑事件 v-swipedown: swipedown下...原创 2019-01-18 11:11:31 · 8587 阅读 · 4 评论 -
vue-cli 兼容ie,vue项目兼容ie9.ie11
1、首先npm install --save babel-polyfill2、然后在main.js中的最前面引入babel-polyfillimport 'babel-polyfill'3、在index.html 加入以下代码(非必须)<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">...原创 2019-01-04 20:52:17 · 6647 阅读 · 0 评论 -
vue-cli 项目运行时报错处理,'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序,更换电脑运行本地的vue-cli项目报错处理
在做vue-cli 脚手架搭建项目时,把本地项目拷回自己的电脑上运行报错,后来经查阅解决,报错信息'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序或批处理文件。npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] dev: `webpack-dev-server --inli...原创 2018-10-20 21:29:19 · 3113 阅读 · 1 评论 -
vue-cli webpack打包后加载资源的路径问题
vue项目,访问打包后的项目,输入路径后,页面加载空白。这时会有两类问题,都是路径问题。1.一个是css,js,ico等文件加载不到,是目录里少了dist打开页面时一片空白解决办法:config/index.js文件的build->assetsPublicPath的默认值改为 './'assetsPublicPath:资源的根目录。这个是通过http服务器运行的url...转载 2018-11-12 17:47:27 · 2245 阅读 · 0 评论 -
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
//路由跳转后,页面回到顶部router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0;})在网上查了一下,网友说还可以试试在main.js入口文件配合vue-router写上面这个; 另一种方法:export default n...原创 2018-11-12 18:24:32 · 6958 阅读 · 2 评论 -
vue-cli+webpack在生成的项目中使用bootstrap方法(一)
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行。那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下。脚手架生成项目执行命令用webpack模板生成一个名为vuestrap的项目(名字任意)vue init webpack vuestrap在出现的各提示选项中,没什么要求,为了...转载 2018-12-19 14:05:47 · 368 阅读 · 0 评论 -
vue-cli+webpack在生成的项目中使用bootstrap方法(二)
vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多。当然是可以更省力些,可以通过npm安装bootstrap,然后用import直接导入bootstrap的方式进行整合,因为vue-loader能自动从node_modules下加载库,非常方便。完整过程实现一遍。脚手架...原创 2018-12-19 14:10:30 · 232 阅读 · 0 评论 -
推荐优秀的Vue UI组件库,记录一下方便以后查看
强烈推荐优秀的Vue UI组件库Vue是一个轻巧,高性能,可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。在选择的Vue UI组件库的过程中,通...转载 2018-12-06 17:19:08 · 1138 阅读 · 0 评论 -
在vue项目中使用地图api,在vue-cli搭建的项目中使用高德地图定位
在开发vue项目中遇到需要定位显示,需求是:需要根据后台返回的数据动态的将订单定位到产生的位置;然后根据现实的位置;高德地图提供的api 可以调用,用高德地图插件,解决方案非常传统:将高德地图通过cdn的形式引入到项目的index.html文件中,然后即可全局调用AMap。具体文档点击 高德地图开放平台 查看。现在在vue项目中使用,有几个问题不得不考虑:项目中其实只有几处需要用到地图...原创 2018-12-07 00:28:45 · 11652 阅读 · 24 评论 -
vue组件的生命周期
vue组件的生命周期Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。1、beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用。2、created 实例已经创建...原创 2018-12-07 10:45:09 · 90 阅读 · 0 评论 -
echarts系列——在vue工程化项目中如何使用echarts
安装echarts依赖npm install echarts --save点击查看 echarts官网安装教程 创建图表全局引入main.js// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts map.vue//html<div id="myChart...原创 2018-12-07 14:53:10 · 1139 阅读 · 3 评论 -
vue axios封装httpjs,接口公用配置拦截
做一下记录,在vue项目中配置公用的请求https,(1) 位置,在src中新建 src/utils/http.jsimport axios from 'axios' // 引用axiosimport { MessageBox, Message } from 'element-ui'import Qs from 'qs' //引入数据格式化import router from '@...原创 2018-12-18 17:22:06 · 5182 阅读 · 0 评论 -
基于vue-cli中基于element-ui的Upload 上传文件,异步上传
做项目时遇到上传excel文件到后台,项目使用的是elementUI组件,直接使用element的Upload上传,但是需求是需要用户选择完文件,并且输入文件描述,然后一起上传到后台,类似于form表单提交 (1).vue html <div class="user-search-body"> <el-form inline ...原创 2018-12-18 19:52:06 · 6704 阅读 · 2 评论 -
vue构造函数,判断当前点击事件是否是某一指定元素外的点击事件,判断当前点击事件是否不是其本身
html<div v-clickoutside="handleClose"></div>//当点击此div外的任何元素 将会触发 v-clickoutside="handleClose"的 handleClose构造点击函数const clickoutside = { // 初始化指令 bind (el, binding, vnode) { ...原创 2018-12-24 20:27:44 · 5617 阅读 · 3 评论 -
vue项目中使用 webpack优化之HappyPack 实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做。我们需要Webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力,HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。由于 JavaScript 是单线程模型,要想发...转载 2019-01-04 15:51:02 · 6261 阅读 · 0 评论 -
vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式 ,vue项目使用组件后 scoped样式覆盖不了组件内部样式解决,/deep/和 >>>
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题。但是想要修改还是有方法的:1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式。2.使用深度作用选择器,可以通过vue-loader提供的新写法 vue-l...原创 2019-01-04 20:23:27 · 1312 阅读 · 0 评论 -
Vue-cli项目中使用mockjs模拟数据
vue-cli项目中如何使用在项目中安装mockjs、axios(http请求库) cnpm install mockjs axios --save 在项目中新建一个mock.js文件,用于定义接口返回的数据 在main.js引入mock.jsmock.jsconst Mock = require('mockjs') // 获取mock对象const Random = M...原创 2018-10-19 11:16:03 · 831 阅读 · 1 评论