stylelint是一个强大的现代 CSS 检测器,可以让开发者在样式表中遵循一致的约定和避免错误.拥有超过170条的规则,包括捕捉错误.最佳实践.控制可以使用的语言特性和强制代码风格规范.它支持最新的CSS语法,并且灵活可配置. 1. 安装 yarn add stylelint stylelint-config-standard stylelint-config-rational-order stylelint-order stylelint-scss stylelint-webpack-pl…

如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经不再维护,以及 --fix 之后 .vue 文件只剩下 <style> 部分等.我在踩完坑跑通出满意的效果后,维护一份新的指引,以备后续项目使用,顺便分享一下. 为什么选择用 stylelint ? 这个问题有两层含义,一是为什么要使用这个样式代码风格检查工具,二是与其他工具相比,为什么选择 st…

最近刚换了新工作,这两天也没有业务上的需求,做了一些前端工程化方面的东西.要在现有的项目中集成 husky+commitlint+stylelint,也不能对现有代码产生影响. 使用 lint 的目的: 拒绝错误代码被提交到代码仓库 修复.美化代码 简单介绍一下库: 我们在创建 vue 项目的时候,eslint 已经集成好了,根据我们自己的需求修改 eslint 规则配置. 规则地址:https://eslint.vuejs.org/rules 查看规则效果地址:https://mysticat…

前言 vue项目在用旧版本的vue-cli创建的时候,会询问是否添加eslint的检查, 后来的版本在创建的时候是直接添加了eslint检查. 有时候我们开发习惯不是那么严格的时候, 会不在意这些缩进什么的要求, 这时候在开发前端项目的时候就悲催了.项目紧还老是编译不过去.所以直接关闭得了 操作 在文件 config/index.js中有    dev.useEslint的配置.这里配置为fase即可 2. 如果项目里还有eslint检查, 那就要考虑是不是编译器里的eslint检查了.例如 w…

最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了一下,发现可能是optimize-css-assets-webpack-plugin这个插件的问题,导致打包时这个属性和注释混在了一起(个人猜测),其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可,如下图: 也就是说在使用“-webkit-box-orient: vertical;”需要这…

ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../assets/common/common.css";//自定义.css的样式路径 </style> js文件的引入 在main.js中: import API from './assets/api/api.config.js' Vue.prototype.$API = API; P.S.:传…

这是什么 vue-automation 是一款开箱即用的 Vue 项目模版,它基于 Vue CLI 4 众所周知,虽然 Vue CLI 提供了脚手架的功能,但由于官方的脚手架过于简单,运用在实际项目开发上的时候,我们还需要做很多事情,而 vue-automation 就是来解决这一痛点,让你的开发效率至少提升 50% 以上 特点 默认集成 vue-router .vuex 和 axios 全局 SCSS 资源自动引入 全局组件自动注册 支持 SVG 图标,CSS 精灵图自动合成 支持 mock…

# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQuery npm install jquery 2.安装Bootstrap npm 以上两步,也可以先在package.json 配置文件中指定版本号,然后运行 npm install 安装完了以后项目是跑不起来的,尽管二者都已经安装成功了,但还是会报错 "Bootstrap's JavaScript…

手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来,所以其中的一些步骤说法为了表达正确会进行一定参考. 一. 项目使用技术.框架简单介绍 我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事…

概述 vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加载的测试服务器 vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具 安装 下面…