Vue前端框架
openight
这个作者很懒,什么都没留下…
展开
-
vue端计算大文件的sha256
浏览器端计算大文件的sha256值,超大的导致网页崩溃,采用分段计算原创 2022-08-02 15:54:26 · 963 阅读 · 1 评论 -
Vue或JS 实现假分页
在网上找了一些实现假分页的例子,发现都比较繁琐,等于把在后端的分页重新拿到前端,比较麻烦。想了一下,自己实现了一个简便的。computedPage () { let start = this.pageSize * (this.pageIndex - 1) let end = this.pageSize * this.pageIndex this.list = [] for (let i = start; i < end; i++)原创 2020-07-22 11:20:00 · 597 阅读 · 0 评论 -
Vue 产品定制 用最小的代价实现差异化打包
运行NPM拆分根据需要将产品拆分成一个标准版和多个定制版,修改package.json,将老版本的内容替换成新版本,也可以同时存在"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", --老版本 "dev:standard": "cross-env BRANCH_ENV=standard webpack-dev-server --inline -原创 2020-06-11 11:19:31 · 672 阅读 · 0 评论 -
vue指令模式 添加埋点
埋点也叫浏览足迹,有多种类型,如浏览页面、点击、搜索等等。我使用Vue的自定义指令来添加埋点,使用起来比较简单方便,下面是我的代码Dom代码:<div class="main" v-track="{act:'browse'}"></div><el-button v-track="{act:'click'}">Test</el-button>指令代码:import Vue from 'vue'// 埋点指令Vue.direct原创 2020-05-29 15:56:48 · 1427 阅读 · 0 评论 -
elementUI form表单验证 跳过某一项
selectValidField () { let isPass = true this.$refs['ruleForm'].validateField('a', (err) => { if (err) { isPass = false } }) this.$refs['ruleForm'].validateField('b', (err) =&...原创 2020-04-15 18:12:19 · 2277 阅读 · 0 评论 -
Vue的模仿用户输入文字的组件,动态值
vue-typer是一个很好玩的模仿用户输入效果的vue组件。它可以支持输入再擦除的动画。支持多种文字输入模式,可自定义组件的样式。安装通过NPM安装$ npm install --save vue-typer插件应用将vue-typer注册到组件使用的例子// ES6 import { VueTyper } from 'vue-typer'// Common...原创 2020-01-08 14:35:15 · 445 阅读 · 0 评论 -
vue组件发布到npm,类似element-ui
1.创建webpack-simple类项目vue init webpack-simple demo2.目录3.编写组件packages/timer就是编写的组件,跟普通组件无差别,这里只是用于测试4.修改package.json画红线部分即是需要修改或新增的内容5.修改webpack.config.js画椭圆红线部分需要注意,画方线部分需要修改或新增6.在src...原创 2019-08-12 14:44:12 · 177 阅读 · 0 评论 -
Vue 自定义指令 (疑难阶级)
简介除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:当页面加载时,该元素将获得焦点 (注意:autofocus在移动版 Safari 上不工作)。事实上,只要你...原创 2019-07-09 10:10:41 · 330 阅读 · 0 评论 -
nuxt 安装node-sass失败
设置全局镜像源npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/,之后再执行npm i node-sass --save就好了原创 2019-05-13 14:38:18 · 707 阅读 · 0 评论 -
nuxt端口占用,如何更改?
通过在 package.json 中进行配置:"config": {"nuxt": { "host": "127.0.0.1", "port": "3333"}},"scripts": {"dev": "nuxt"}原创 2019-05-14 10:11:37 · 810 阅读 · 0 评论 -
使用nuxt.js构建一个vue项目
使用nuxt2.0官方脚手架,我们需要全局安装npx,输入npm i -g npx 随后切换到想要创建项目的路径输入npx create-nuxt-app 项目名称 再随后会出现一堆配置项,可以集成koa,element-ui等模块,按需选yes或no即可 注意:选择axios的时候是敲空格键,不是回车键 有可能我们需要输入npm i --update-binary ...原创 2019-05-14 09:58:45 · 796 阅读 · 0 评论 -
cordova + Vue 开发 APP 生成原生安装包
什么是 cordovacordova 是由 Apache 基金会支持的,使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架。其支持调用手机系统(Android、IOS、Windows phone)原生 API,它可以将你写的 Web 程序包裹进原生的 APP 壳中,也就是我们常说的 Hybrid APP (混合应用)。本文是一个前端开发者如何从 0 开始结合 Vue...原创 2018-10-28 21:07:39 · 904 阅读 · 0 评论 -
Vue 动态生成数据字段
1.父组件定义data里面的数据字段,异步请求获取数据(一种配置数据,一种实际数据)data () { return { config: [], list: [] };}2.子组件接收数据props: { config: Array, list: Array},data () { return { newConfig: [], ...原创 2018-10-29 16:43:48 · 2926 阅读 · 0 评论 -
Webstorm 代码格式化 es6语法支持
空格不一致,比如:data() ,es6应该是data (),少了个空格解决方法:1.将webstorm升级至2017.3及以上版本2.在 .eslintrc.js 上右键,菜单底部有一个 "Apply ESLint Code Style Rule" 点它,之后自动格式化就会按照 eslint 的规则了3.重新使用代码格式化快捷键,查看问题是不是解决了补充:如果想要快捷修复ES...原创 2018-11-03 19:59:08 · 5267 阅读 · 0 评论 -
Vue开发环境搭建及使用vue cli(脚手架)生成项目
Vue开发环境搭建 node安装 官网:https://nodejs.org/en/ 下载相应系统及架构的安装包,之后傻瓜式安装即可。 安装好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。 安装淘宝npm镜像 由于npm是...原创 2018-11-28 14:15:38 · 202 阅读 · 0 评论 -
Vue SSR之服务端渲染
目录准备工作开始折腾1. 首先安装 ssr 支持2. 增加路由test与页面3. 在src目录下创建两个js:4. 修改router配置。5. 改造main.js6. entry-client.js加入以下内容:7. entry-server.js8. webpack配置9. webpack 客户端的配置10. webpack 服务器端的配置11...原创 2018-12-13 14:36:22 · 739 阅读 · 2 评论 -
Vue调试神器vue-devtools在Chrome上安装
1.到github下载:git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包 1 2 cd vue-devtools cnpm install 3.修改manifest.json文件把"persistent":false改成true...原创 2018-12-21 09:41:47 · 207 阅读 · 0 评论 -
vue项目兼容IE11
1、npm安装babel-polyfillnpm install babel-polyfill --save-dev2、在入口文件main.js中引入import 'babel-polyfill'3、在webpack.config.js配置文件中做修改,即可。entry: { app: ["babel-polyfill", "./src/main.js"]}4....原创 2018-12-11 16:39:10 · 2142 阅读 · 1 评论 -
nodejs 端口号被占用
怎么查看端口的占用情况,怎么知道哪个程序占用了这个端口呢?使用如下方式:C:\>netstat -aon|findstr "9050" TCP 127.0.0.1:9050 0.0.0.0:0 LISTENING 2016看到了吗,端口被进程号为2016的进程占用,继续执行下面命令: C:\>tasklis...原创 2019-01-30 10:35:35 · 920 阅读 · 0 评论 -
Vue项目发布后,元素的背景图片路径找不到问题终极解决方案
1、在webpack.prod.conf.js文件里output里面添加:publicPath:'./'2、在utils.js文件里添加 publicPath:'../../'3、在config/index.js文件里,添加assetsPublicPath:'./'原创 2019-05-05 13:46:01 · 1434 阅读 · 0 评论 -
Vue中切换页面时的过渡动画
Vue中切换页面时的过渡动画定义层级监控路由跳转编写样式定义层级我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画。import Vue from 'vue';import Router from 'vue-router';import Home from '@/pages/home/Home';imp...原创 2018-10-25 13:55:39 · 11442 阅读 · 5 评论