首先在package.json中配置eslint模块: 在终端运行命令:npm install 然后在build文件夹中web pack.base.conf.js配置eslint 接下来在在项目中新建一个 .eslintrc.js 文件,配置如下: 最后重启项目就可以了,会在终端会出现一堆错误-   注:vue的一些eslint问题可参考 http://zhenyong.site/2016/07/05/ESLint-in-Vue/…

一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习惯进行调整.因此在后面几章的学习中,我将会在整个项目基础上,按照自己的需求进行修改设定. PS:因为毕竟自己还是传统意义上的后端开发,所以这里最终搭建完成的前端项目模板,其实是按照 PanJiaChen 开源的 vue-admin-template 模板进行修改仿写,所以你可以把这个系列后续的文章当…

如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.org/docs/user-guide/configuring module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使…

maven 单独构建多模块项目中的单个模块, maven选项说明 -pl, --projects Build specified reactor projects instead of all projects -am, --also-make If project list is specified, also build projects required by the list -amd, --also-make-dependents If project list is specifie…

Maven单独构建多模块项目中的单个模块   说明: 1.可能存在的场景,多模块项目没有互相引用,那么此时可以单独构建单个项目,指定到子模块的pom.xml文件即可完成编译. 2.如果多模块项目各自都引用了,那么单独编译子模块的pom.xml文件会直接报错,解决方法就是编译父项目pom.xml. 3.如果编译父项目,那么可能会造成编译时间很慢,其中有些项目也不需要编译,解决方法如下: 解决方法: Maven选项: -pl, --projects Build specified reactor p…

ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的版本问题 目前ESLint的稳定版本是v4.19.1,如果你看过ESLint的官方文档,就会知道官网推出了ESLint v5.0.0-alpha.1,这是ESLint的一个主要版本升级. 由于这是预发布版本,ESLint尚未准备好用于生产,因此我们不会通过npm自动升级.next安装时必须指定标签:…

Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多,需要统一每个项目的代码规范,于是在此分享vue项目的几种代码格式化风格(default,standard,airbnb,prettier)的基本区别以及修改为prettier风格. 对比肉眼可见的格式化风格差异,并且以字符串单/双引号,每行结尾有无分号,object对象最后一项有无尾逗号作为判断依…

[首先安装node.js]: 1. 从node.js官网下载并安装node,安装过程很简单. 2. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 npm -v2.3.0 #升级 npm cnpm install npm -g 3.基于node.js,利用淘宝npm镜像安装相关依赖.由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/) npm install -g cnpm --registry=https://regist…

在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还能将我们的html(template).css.js文件通过模板编译的方式将这些文件打包成一个.vue的文件. 为什么在vue-cli项目中能使用.vue的文件? 比如有这之前的一个自定义的组件: Vue.component('app-header', { template: '<div>A cu…

前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# webpack 介绍:http://webpack.github.io/docs/what-is-webpack.html npm install -g webpack webpack-dev-server #在项目文件夹路径下,初始化npm项目 npm init #安装webpack和webpa…

1.读万卷书,行万里路. 2.书山有路勤为径,学海无涯苦作舟. 技术段: 相信很多刚接触前端的小伙伴,对一些自动化工具会感觉无可下手.现在前端的发展的势头,势必和后台形成一个对立面,独挡一面. 这篇文章我就写一些关于webpack的东西,学的不深,后续深入学习再更新博客. webpack是什么?为什么要使用webpack?其实做什么事都是一样的,一个东西的出现,必有它出现的意义. webpack功能很多,当初接触webpack是因为在开发的过程中遇到一个问题,在版本迭代的时候会存在一个缓存的问题…

在项目中的""和;经常会报错,真的很纠结,今天看到一个解决方法,可以不用卸载删除 在项目根目录中,新建一个.prettierrc文件,来移除分号,和替换为单引号. { "semi": false, "singleQuote": true } 这样就可以了,格式化也不会变为""了. 也可以禁用语法规则,修改.eslintrc.js文件:把报错的项禁用 module.exports = { root: true, env: { n…

如何在项目中安装webpack,webpack-cli? 前提:电脑安装了 node和npm包管理工具 1 创建项目文件夹或者在已有的项目中打开终端  输入相关命令: npm init 因为已经安装好了node 的 npm 包管理工具,使用npm 在项目中初始化,使得项目符合 node 规范. 根据终端提示一步一步输入后 这样项目文件夹中就会多出一个 package.json文件,一些项目的基本信息:项目名称,版本,描述和javascript脚本等. 可以添加比如下图中 "private&quo…

debug是一款控制日志输出的库,可以在开发调试环境下打开日志输出,生产环境下关闭日志输出.这样比console.log方便多了,console.log只有注释掉才能不输出. debug库还可以根据debug变量选择输出的日志.具体应用如下: 项目中安装debug库: npm install debug 项目中引用debug库:var debug=require("debug"); 项目中为debug添加环境变量 示例:如下: var debug=require("debug…

用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现成的后台可以调用,基本上都是自己写mock进行模拟. 在vue-cli搭建的项目中,框架上用的是express的web框架,要做一个mock是很方便的. 假设前端页面上需要获取所有的新闻列表,那么就需要mock一个能够返回所有新闻列表数据的接口. 接下来就在项目中实现mock功能. 脚手架生成项目…

"no-multi-spaces": 1, //禁止多个空格 "jsx-quotes": 1, //此规则强制在JSX属性中一致使用双引号或单引号 "react/jsx-closing-bracket-location": 1, //有多行属性的话, 新建一行关闭标签,为JSX语法使用下列的对齐方式 // bad <Foo superLongParam="bar" anotherSuperLongParam="…

以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而是字体,至于为什么使用字体图标而不是图片,相信web开发者多少都有所了解,简单列举几条: 多个图标字体合成一个字体文件,避免每张图片都需要联网请求: 字体可任意缩放,而图片放大会失真.缩小则浪费像素: 可通过css任意改变颜色.设置阴影及透明效果: 在实际项目中,开发者难免会需要自定义图标,此时该如…

1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init //进入问题配置页面 完成后,添加react-hook的eslint插件 npm install eslint-plugin-react-hooks --save-dev // 或者 yarn add eslint-plugin-react-hooks --dev 并且在配置文件中添加配置项: //…

1.推荐学习网站:Vue.js中国 2.Demo环境搭建: 2.1环境配置 安装nodejs环境,具体内容可以百度: 新建一个文件夹: mkdir VUE-ES6-WebPack 全局安装gulp: npm install gulp -g 全局安装webpack: npm install webpack -g 2.2webpack使用 在VUE-ES6-WebPack目录先新建一个webpack.config.js文件,然而,webpack是啥? 它本身是一个打包工具,可以把js.css.ima…

自己配置脚手架时候如何安装eslint语法规则, 第一步安装 官方推荐的安装包如下 eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node 在安装一个 eslint-plugin-html   //用于识别vue中html  注意 5.0以上不好使 第二步配置.eslintrc文件 第三步 如图配置 --ext就是指定检测的…

非常简单的操作方法!不用再去为了烦人的代码标准报错而苦恼了! 方法一:在项目根目录下增加 vue.config.js 文件 添加以下代码: module.exports = { lintOnSave: false } 方法二:在.eslintrc.js里注释掉 @vue/standard // '@vue/standard'…

export default function printFile(html) { let userAgent = navigator.userAgent; if ( (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) || userAgent.indexOf("Edge") > -1 || (userAgent.ind…

文章目录 1.在创建项目的时候不自动使用eslint 2.在package.json中删除所有的eslint,然后重新install 3.按照图片注释(亲测可用) 在使用eslin进行规则验证时,一点点小问题都报错 1.在创建项目的时候不自动使用eslint 2.在package.json中删除所有的eslint,然后重新install 这个方式我没有成功 大致的思路是:卸载这些eslint的依赖,然后重新install,重新加载依赖. 3.按照图片注释(亲测可用)…

在package.json文件中, 往往会有个类似于 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 这样的代码,我们只需要在些基础上添加--fix即可,即: "lint-fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .", 如下图: 修改保存,执行 npm run lint-fix…

操作: 菜单选择Proceject->Options->Delphi Compilerz在Conditional Defines(第一行)中添加预编译标识.例:VCL代码:uses{$IFDEF VCL}Vcl.Forms{$ELSE}FMX.Forms{$ENDIF} 注意定义是分大小写的…

分布式查询品牌页面时 controller路径正确访问,比如输入 http://localhost:8081/brand/findPage.do?page=3&rows=6 是可以正常显示数据 但是一加上前端页面 就无法正常显示数据 显示结果如下 控制台显示错误为 原因是: var app=angular.module('pinyougou', ['pagination']);模块的名称是 pinyougou但是 ng-app= pingyougou 名字不对 只需要将代码改为如下 就可正常显示…

摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJs及其衍生技术高速发展的同时,Nw和Electron的问世,更是为前端发展提速不少,依稀记得哪位前辈说过,“能用Js改写的,终将用Js改写”,这不,客户端来了!使用Electron也有一段时间了,各种简单复杂的问题,也都或多或少的遇见过,下决心整理出一套客户端模板出来,一是加深一下自己的理解,二是供…

摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着学习的态度,去介绍.总结一些常用到的配置及思路,有不恰当的地方,或者待优化的地方,欢迎留言.项目完整代码:https://github.com/luohao8023/electron-vue-template 下面开始~~~ 一.安装依赖 vue.webpack:不多说了 vue-loader:解析…

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web) 摘要:整个项目就剩最后一哆嗦了,但仅仅是当作demo模版来说,实际项目的话,还有很多需要细化的地方.项目完整代码:https://github.com/luohao8023/electron-vue-template,随博客更新. 一.打包客户…

用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默认环境都配置好了. 第一步先建立一个文件夹我这里是apronew; 第二步在文件夹里面打开git bash,然后敲命令行npm install --global vue-cli,全局安装 vue-cli,如果已经全局安装可不用再装一次: 第三步: 第二步成功之后,创建一个基于 webpack 模板的…