Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。 使用sass可以使我们的样式代码变的更简洁，更具有易读性 首先，我们创建完vue项目之后 尝试在项目中使用sass语法运行后发现果不其然报错了在使用scss之...
前言 eslint是一种代码风格管理的工具，可以制定一些代码编写规范，在vue项目中经常用到，本文就给大家分享了开发项目中使用的eslint校验规范，供参考：示例代码 module.exports = {root: true,parserOptions: {parser: babel-eslint,sourceType: module},env: {browser: true,node: true,es6: true,},extends: [plugin:vue/essential, eslint:recommended],rules: {// 等级分为三级： 0-不显示；1-显示警告warning; 2-显示错误err...
一、项目初始化创建webpack模板项目如下所示： MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been c...
在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。（欢迎纠错，谢谢。） 1. 安装插件 cross-env，npm install cross-env --save -dev，用于配置命令行输入命令。 2. 修改package.json里的script命令： 配置了test（测试），ready（预发布），prod（正式）三种环境，npm run build 默认设置成 npm run build:prod，也可以根据自...
表格中我们经常需要动态加载数据， 如果有多个页面都需要用到表格， 那我希望可以有个组件， 只传数据过去显示， 不用每个页面都去写这么一段内容： <el-table :data="tableData" border size="mini" fit highlight-current-row height="500"><el-table-column type="index" align="center" fixed></el-table-column><el-table-column prop="DHM" min-width="140px" label="时间" align="center"></el-table-column><el-table-colu...
在进入一个页面的时候，一般在获取数据的同时，会先显示一个 loading ，等请求结束再隐藏 loading 渲染页面，只需要用一个属性去记录请求的状态，再根据这个状态去渲染页面就好了 async handler() {this.loading = trueawait fetch()this.loading = false }虽然是很简单的功能，可是要处理的地方多的时候，还是很繁琐的，就想着能不能统一设置处理请求的 loading ，然后页面根据 loading 的状态决定要显示的内容，就根据自己的想法...
有一句话叫“前人栽树后人乘凉”，还有一句话叫“如果说我看得比别人更远些，那是因为我站在巨人的肩膀上”。前一句是国人的俗语，后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢？是因为我刚开始用vue的时候，使用的是vue-cli来搭建vue项目，快速又好用；我刚开始用react的时候，使用的是create-react-app来搭建react项目，方便又省事。使用这些已有的脚手架来搭建项目，无可厚非，对于新手来说，也确实能快...
由于新建项目发版打包时间大概需要 30分钟 ，发版时 严重 拖慢 下班 时间，所以特意查看了相关文档来优化打包速度，争取早点下班，^_^。 分析打包文件 要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？ 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装npm i webpack-bundle-analyzer -D使用修改 webpack.prod.conf.js 文件const BundleAnalyzerPlugin = require(webpack-...
Vue-draggable 的github传送门 : https://github.com/SortableJS/Vue.Draggable 一. 下载依赖包：npm install vuedraggable -S 二. 在需要使用的当前界面引入依赖，注册组件： import draggable from "vuedraggable"; export default {components: {draggable,} 三. 在template 中建立表格，分别写出thead 部分不变， 此处需要将draggable 渲染成tbody，不然draggable会被解析成div 影响样式。（渲染方法：<draggable v-model="...
演示地址https://my729.github.io/picture-crop-demo/dist/#/ 前言vue版本：3.6.3 https://cli.vuejs.org/zh/cropperjs: 1.5.1 https://github.com/fengyuanchen/cropperjselementUI https://element.eleme.io/#/zh-CN使用 cropperjs插件 和 原生canvas 两种方式实现图片裁剪功能 使用cropperjs插件安装cropperjsyarn install cropperjs 初始化一个canvas元素，并在上面绘制图片<canvas :id="data.src" ref="canvas"></canvas> // ...
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码，供大家参考，具体内容如下 api.js import axios from axios const baseURL = http://XXX// 全局的 axios 默认值 axios.defaults.baseURL = baseURL// 登录请求 const loginCheck = params => {return axios.post(/login, params).then(res => {return res.data}) } export { loginCheck }store.js import Vue from vue import Vuex from vuexVue.use(Vue...
前言在使用vue.js开发前端项目时，再结合webpack搞起各种依赖、各种插件进行开发，无疑给前端开发带来了很多便捷，就在解决跨域这个问题上，相信众多用vue.js的前端同僚们同我一样尝到了甜头，开发环境全靠proxyTable一通配置简直不要太酸爽。还不明所以然的新手们可能还没搞清我说的是什么，就是下面这几行配置: proxyTable: {/api: {target: http://113.113.113.113:5000, //假的接口地址哈changeOrigin: true,pathRewrite: {^/a...
与其说是优化 Vue，不如说主要是在 webpack 打包的配置中做些文章，使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程，其中的内容也许并不适合于每个项目，但整体思路是差不多的。 定位问题 要想进行优化，首先我们得清楚问题所在。即：是哪些代码/依赖包导致最后的编译文件过大？ 这里，我们需要使用 webpack-bundle-analyzer 工具。修改 package.json 文件，添加： "analyze": "NODE_ENV=production npm_co...
搭建缘由 源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后，每个人再去从私服pull一下项目才开始开发。但是每次初始化工程都是一步步的造轮子，一个个依赖去安装，新建一个个不同功能的文件夹，而每个负责人所初始化的项目目录、以及模块引入方式参差不齐，以至于开发中后期因每个人开发风格的不同导致git提交时总会产生各种各样的“冲突”，也会产生后期代码维护成本增加，所以就有必要考虑一下做一个统一的...
背景 你还在为处理Uncaught (in promise) ReferenceError烦恼吗？你还在为捕获异常反复的写try catch吗？你还在为每一个promise写catch吗？是时候一站式统一处理异常！！！（针对vue项目）全局异常捕获Vue.config.errorHandler = function (err, vm, info) {// 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。// handle error// `info` 是 Vue 特定的错误信息，比如错误所在的生...