-
Vue项目优化首页加载速度
一、路由懒加载 { path: '/index', component: () => import('@/views/index'), //懒加载-访问该页面才加载 } 这一步之后，打包后会发现很大的chunk-vendors.xxxxxxx.js不见了，其实是分成了不同的js文件 二、使用CDN引入 <script src="http…- 833
- 0
-
vuex最简单、最详细的入门文档
我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 : <!--父组件中引入子组件--> <template> <div> <a href=…- 697
- 0
-
Vue3.0 起步 快速搭建项目 系列一
常常说要开始学习，却总是止于嘴。 一起开始学习吧 . . . 1 安装脚手架 npm install -g @vue/cli # OR yarn global add @vue/cli 2 检查版本 Vue CLI v4.5.7 vue -V 3 搭建项目 vue create vue3.0 ? Please pick a preset: (Use arrow keys) //请选择预选项 &…- 983
- 0
-
Vue SEO的四种方案
众所周知，Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案，通过查找资料，大概有以下4种方法。 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染：Vue官网介绍 ，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。 使用SSR权衡之处： 开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外…- 995
- 0
-
VSCode打造成为开发神器
VSCode现在是世界上最为常用的编辑器之一，为什么被称为编辑器，是因为它不像IDE一样集成了大量开发环境的配置，必须你手动配置很多东西，才能将它打造成为一个趁手的生产工具。 VSCode最大的优势就在于它是完全免费的，你不需要支付任何费用，就可以得到一个开发各种代码的编辑器，也正因为它具有高拓展性，它可以用来编写Python、C++、C#、GO、Dart等一系列语言。 你可以通过下面的插件将VS…- 1k
- 0
-
2021 年你应该尝试的 8 个 React 库
1. react-select 一个厉害的，强大的表单下拉选择框的库 代表了一种开发功能强大的 react.js 组件的全新方式，这些组件在完全可定制的同时开箱即用。 突出的功能特性 灵活的数据处理方法，具有可定制的功能。 灵活结合 emotion 这个库(一个 css in js 的强大的库 ). 组件注入API，用于完全控制UI行为。 选项组、portal 支持、动画等。 安装: npm i …- 992
- 0
-
整理vue + element-ui常用的功能及代码片段
目录： 1 常用表头搜索：input+select+daterange 2 表格中对【上下架】、【排序】、【选择】进行编辑 3 使用vue-clipboard2实现复制链接的功能 4 使用vue-quill-editor实现富文本编辑 5 解决el-input类型为 type='number' 不显示上下箭头 6 解决当el-select选中值绑定为对象时处理 7 使用uplo…- 1k
- 0
-
前端工具VScode+NodeJs+Git下载配置
下载vscode需要用到node.js和git 一、安装NodeJs 1.下载Nodejs Node.js官网下载地址:https://nodejs.org/en/download/ Node.js历史版本下载地址：https://nodejs.org/zh-cn/download/releases/ tips:脚本语言需要一个解析器才能运行，JavaScript是脚本语言，在不同的位置有不一样的…- 2k
- 0
-
vue-cli3构建H5移动应用（vant+rem）
安装 cli3.x 版本 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过以下命令卸载它。 npm uninstall vue-cli -g 或 yarn global remove vue-cli 然后可以使用下列任一命令安装这个新的包： npm install -g @vue/…- 2.4k
- 0
-
微信小程序mpvue+Vant Weapp初始化
准备工作： 1.安装Node.js nodejs官网 //可查看node版本 $ node -v $ npm -v 2.安装淘宝镜像cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue-cli脚手架构建工具 $ cnpm install -g vue-cli 第一步、创建一个基于 mpvue-qu…- 985
- 0
-
vue:将px转化为rem，适配移动端vant-UI等框架(postcss-pxtorem)
1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 <meta name="viewport"…- 1k
- 0
-
vue快速删除node_modules文件夹
当安装了较多模块后，node_modules目录下的文件会很多，直接删除整个目录会很慢，下面介绍些快速删除node_modules目录的方法 方法一：使用rimraf模块的命令 1.在全局安装rimraf模块 npm install rimraf -g 2.然后通过其命令来快速删除node_modules目录： rimraf node_modules 这样就可以很快删除了node_modules- 1k
- 0
-
Vue取消eslint语法限制
1.出现警告 由于vue对语法的限制过于严格，以至于在编译运行的时候一直编译失败，当然也包括一些警告： 类似: clipboard.png 2.关闭方法： 在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则 clipboard.png 然后重新运行一下npm run dev或者构建命令 npm run build就…- 831
- 0
-
webpack+vue初始化项目
第1步：官网下载并安装nodejs nodejs官网:http://nodejs.cn/download/ 第2步：npm下载插件速度很慢，推荐安装淘宝镜像cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 第3步：创建项目 ①安装vue-cli脚手架构建工具 cnpm install -g vue-cli ②…- 808
- 0
-
WebSocket 实现数据实时刷新
WebSocket 是HTML5的一个新协议，WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 一、浏览器客户端 创建一个WebSocket 对象 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接…- 1.1k
- 0
-
富文本vue-quill-editor结合el-element实现自定义上传组件
需求一 图片上传 就是要一个富文本编辑器，然后有图片上传功能，因为vue-quill-editor是将图片转为base64编码，所以当图片比较大时，提交后台时参数过长，导致提交失败。 解决思路 将图片先上传至服务器，再将图片链接插入到富文本中 图片上传的话可以使用element或者iview，这里我以iview举例 图片上传区域要隐藏，自定义vue-quill-editor的图片上传，点击图片上传…- 819
- 0
-
Element UI 中国省市区级联数据
使用方法 1.安装 npm安装 npm install element-china-area-data -S 或者yarn安装 yarn add element-china-area-data 2.使用页面引入 import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText,…- 892
- 0
-
yarn和npm的区别、–save和–save-dev的区别
一、安装yarn (1)下载node.js,使用npm安装 npm install -g yarn (2)查看版本 yarn --version (3)yarn淘宝源安装 yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_site http://cdn.npm.taobao…- 1.9k
- 0
-
从0到1搭建webpack2+vue2自定义模板详细教程
前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用的最多，不过对于很多人来说，vue-cli 的配置还是过于复杂，对于我们了解细节实现不是很好，所以想自己从零开始搭建一个模板工程，也顺便重新认识一下webpack和vu…- 1k
- 0
-
dragula插件web端和移动端的拖拽排序
Dragula简介 Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单，浏览器兼容性好，能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。 代码演示： <script src="dist/dragula.js"></script> <link rel="stylesheet" hre…- 1k
- 0
-
快速删除node_modules文件夹
问题：windows下无法删除node_modules文件夹，提示文件名或扩展名太长无法删除，即使能够删除，速度也是不敢恭维。特此百度一番，找到了一个很好的方法解决这个问题，特此记录。 解决方法：使用npm的一个名为rimraf的模块进行删除 官方描述：The UNIX command rm -rf for node，即node环境下模拟unix或者linux下的rm -rf（…- 857
- 0
-
webpack介绍、配置、使用
一、webpack介绍 1、由来 由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。 2、介绍 webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack…- 785
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×