vue-cli使用ESLint记录

脚手架与ESLint
最新推荐文章于 2025-10-10 03:53:06 发布
原创 最新推荐文章于 2025-10-10 03:53:06 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在项目搭建过程中，选择使用ESLint进行代码检测。作者在创建项目时决定采用ESLint来确保代码质量，并从标准预设中选择了Airbnb规范。

脚手架搭建中选泽使用ESLint

Project name :项目名称

Project description:项目描述

Author ：作者

install vue-router？是否安装vue路由

Use ESLint to lint your code?是否使用ESLint代码检测工具

pick an ESLint preset
Standard (https://github.com/standard/standard)
Airbnb(https://github.com/airbnb/javascrpt)
none(configigure ir yourself)

选择ESLint预设
标准（https://github.com/Standard/Standard）
Airbnb（https://github.com/Airbnb/javascrpt）
无（自行配置）

选泽了第二个

二、为uniapp项目配置基于airbnb风格的Eslint代码检查规则
weixin_39915504的博客
07-22 3246
Eslint 可以约束团队的代码风格统一，有过协同开发的小伙伴们应该深有体会，团队中开发者代码风格迥异，有时甚至可以称作 “五彩缤纷”，我用小驼峰，你用下划线，他用大驼峰，更有甚者，拼音、拼音简写、拼音加英语单词，简直不堪入目、不知所云；...
脚手架vue-cli和@vue/cli的搭建及区别
qq_37635012的博客
04-14 1万+
vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架，首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装，node安装完之后，node自带的包管理工具npm也就安装好了，我们win系统直接开始在cmd窗口输入node -v查看node版本号，如下图能看到版本号说明node安装成功:...
VUE 两种创建项目详解
soulman1234的专栏
05-09 4036
VUE 两种创建项目详解 Vue init webpack 创建项目选项详解 一、Project name :项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。 二、Project description:项目描述，直接回车 三、Author ：作者 四、vue build 构建方式（暂且这么解释） 　　两个选择（上下箭头选择，回车即为选定）(是使用阉割版的vue还是使用完整版的vue 第一个是完整版的 第二个是阉割版的) 　　1.Runtime + Compiler:recommended fo
02-Vue.js环境准备-使用vue-cli快速搭建项目(cli2)
热门推荐
光脚丫思考的专栏
09-05 3万+
一、概述 在用Vue.js构建大型应用时，推荐使用npm安装，npm能很好的和webpack等打包工具配合使用。如果使用npm过程中安装速度过慢，可以考虑使用淘宝镜像的cnpm来代替npm。 首先Vue的安装依赖于Node.js，要保证你的计算机上已经安装过Node.js。可以参考前面的文章：https://blog.youkuaiyun.com/GJYSK/article/details/108210708 如何查看Node是否安装或者Node版本呢？ 进入cmd，输入命令：node -v，回车查看，node最好使
一文了解ESlint使用(vue2)
最新发布
ASS___的博客
10-10 539
在使用插件的时候版本使用正确是非常重要的,如果是二开项目重构的话需要自己找对一个的版本。
eslint在vuecli中的使用
前端劝退工程师
05-25 1431
.editorconfig 文件详细备注 # 最顶级的配置,相当于根 editorconfig 直到查找到root=true 才会停止查找不然会一直向上查找 root = true # 通配符 表示匹配/之外任意字符串 [*] #编码格式 charset = utf-8 # tab 表示hard-tab 硬件tab 是一个tab键 / space表示soft-tab 软件tab 是四个空格space indent_style = space # index_style设置了space 就由index_siz
【简易教程】基于Vue-cli使用eslint指南
夏2同学的博客
12-20 1191
【简易教程】基于Vue-cli使用eslint指南 插件安装 首先在vscode插件中搜索eslint和prettier。 啥也不管，这俩必须得装。 插件简介 vscode插件库里的eslint是用来在你写代码的时候就直接给你报错。（vue-cli中的eslint是在浏览器中报错） prettier是代码格式化插件，用来辅助eslint，否则你调了花半天，一格式化全没有。 实战演练 # 创建一个vue项目 vue-cli@2.9.6，更高版本请使用create创建项目。 vue init webpack
使用 Vue-cli3 实现多个页面启动器.zip
12-01
使用Vue-cli3实现多个页面启动器，可以让开发者更加便捷地管理和编译包含多个入口文件的Vue项目。本文将详细介绍如何使用Vue-cli3创建多页应用，并设置项目的各种配置，包括代码检查、热重载、生产环境压缩以及标题...
Vue教程｜搭建vue项目｜Vue-CLI新版脚手架
baidu_21035953的博客
11-29 1372
通过实战方式，介绍Vue项目的完成构建过程，从环境搭建、脚手架搭建到脚手架构建项目的完整过程
electron+vue-cli 开发桌面应用
YumOS的博客
11-08 985
Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。 本文是我在学习Electron时记录的笔记，方便日后查看。 本文将通过Electron和vue-cli3，在完全保留vue开发web应用的习惯下，搭建桌面应用。 官方网站： Electron:使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 Vue:渐进式JavaScript 框架 Vuex:专.
Vue教程｜搭建vue项目｜Vue-CLI2.x 模板脚手架
baidu_21035953的博客
11-29 1628
通过实战方式，介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程，从环境搭建、脚手架搭建到脚手架构建项目，另外分享了工程结构各文件的具体用途，方便大家了解和掌握
构建Vue项目的三种方式 day1
zzq的博客
02-26 708
引用Vue.js 把从官网下载回来的Vue.js放在项目文件夹中并且用Script引用即可，如下图: CDN 对于制作原型或学习，可以这样使用最新版本： <script src="https://cdn.jsdelivr.net/npm/vue"></script> 对于生产环境，推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： <scri...
Vue教程-4-Vue CLI快速入门
狼行千里吃肉
10-29 1273
目录 Webpack与脚手架 Vue cli使用 安装CLI3 Vue-CLI2新建项目 Vue-CLI2目录结构 扩展 如何关闭ESLint规范？ Runtime + Compiler与Runtime-only区别 template解析流程 template工作流程 结论 Vue-CLI3与Vue-CLI2的区别 Vue-CLI3新建项目 Vue-CLI3目录结构 查看CLI3项目配置文件 UI配置：vue ui 修改配置文件 直接新建配置文件 版本为何与packag
Vue搭建
猴子年华的专栏
09-18 713
Vue搭建
Vue 命令行工具 Vue-CLI 详解
wgchen
04-21 3万+
阅读目录阐述vue全家桶vue-cliVue CLI 的安装① 默认安装 vue/cli 脚手架 3② 默认安装失败，解决mode版本问题③ nvm下载太慢问题解决④ 安装 Node ^12.0.0⑤ 从新安装 VueCli 脚手架 3④ 拉取 2.x 模板 (旧版本)⑤ 安装vue指定版本⑥ 博主node版本初始化项目① vue init命令讲解② 项目初始化③ 目录结构详解④ 运行项目node 安装适合小白1 去node官网下载2 下载完成后双击安装包，跳出安装弹窗，点击Next从新来过vue-cli
vue.js入门环境搭建
qq_32328207的博客
06-12 289
1.安装node.js npm是nodejs下的一个包管理工具，它可以很方便的帮你管理（可以简单理解为下载）各类前端的框架或插件。 （1）首先进官网下载node.js。（http://nodejs.cn/download/) （2）测试 node -v 2.安装 vue-cli VUE的脚手架工具 npm install -g vue-cli    (1)  测试 vue -...
vue的安装
cherry_zhang18的博客
07-30 680
用Vue创建一个新的项目 vue的安装 Vue.js不支持IE8及以下版本。因为Vue.js使用了ECMAScript5特性，IE8显然不能模拟。 Vue.js支持所有兼容ECMAScript5的浏览器。 在用Vue.js构建大型应用时，推荐使用npm安装，npm能很好的和webpack等打包工具配合使用。如果使用npm过程中安装速度过慢，可以考虑使用淘宝镜像的cnpm来代替npm。下文中仅使...
使用脚手架（vue-cli）进行自动化项目构建
cug-jdc的博客
09-16 1127
02121
创建脚手架vue cli项目
xiaoxiamimm的博客
12-01 154
1.vue init webpack my-project 第4步的时候选择no, 第5步的lint是限制的意思，eslint对es代码进行限制。就是对js代码进行限制，ESLint是一个JavaScript代码静态检查工具. 选择y Standard (https://github.com/standard/standard) 这个是标准的，我们一般选择这个 Airbnb (https://github.com/airbnb/javascript) 这个是爱彼迎公司的标准 none (
error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: mas-creator-admin@0.1.0 npm error Found: @vue/cli-plugin-eslint@5.0.8 npm error node_modules/@vue/cli-plugin-eslint npm error dev @vue/cli-plugin-eslint@"^4.1.0" from the root project npm error npm error Could not resolve dependency: npm error dev @vue/cli-plugin-eslint@"^4.1.0" from the root project npm error npm error Conflicting peer dependency: eslint@5.16.0 npm error node_modules/eslint npm error peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-eslint@4.5.19 npm error node_modules/@vue/cli-plugin-eslint npm error dev @vue/cli-plugin-eslint@"^4.1.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error
05-11
### 问题分析 `npm ERR! ERESOLVE could not resolve` 是由依赖冲突引发的常见错误。这种情况下，通常是因为项目的 `package.json` 文件中定义的依赖版本范围与其他包的要求不一致所致。此外，`sass-loader` 模块未找到的问题可能源于以下几个方面： - **Sass 编译器缺失**：`node-sass` 或 `dart-sass` 尚未正确安装。 - **Node.js 版本不匹配**：当前使用的 Node.js 版本与项目所需的绑定环境不符。 - **Peer Dependency 冲突**：某些插件或工具（如 Vue CLI 插件）与其依赖项之间的版本要求存在矛盾。 --- ### 解决方案 #### 方法一：强制忽略 Peer Dependency 冲突 通过在安装命令中附加标志位来绕过依赖冲突警告。这种方法虽然简单快捷，但在实际生产环境中可能会带来隐含的风险。 ```bash npm install --legacy-peer-deps ``` 此选项允许 npm 忽略 peer dependency 不兼容的情况，并继续完成安装过程[^2]。 #### 方法二：手动调整依赖版本 针对已知的依赖冲突（例如 `webpack` 和 `less-loader`），可以显式地修改 `package.json` 中的相关条目以确保一致性。例如： 1. 打开 `package.json` 文件； 2. 定义明确的版本约束条件，避免模糊表达引起歧义。假设需要支持 Webpack 4.x 及其配套组件，则应写成如下形式： ```json { "dependencies": { "webpack": "^4.46.0", "less-loader": "^7.3.0" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.4.4", "@vue/cli-service": "^4.4.4" } } ``` 3. 清除现有节点模块目录及相关锁定文件后再重新拉取最新依赖集合： ```bash rm -rf node_modules package-lock.json && npm cache clean --force && npm install ``` 上述操作有助于消除因自动协商算法失误而导致的异常状况[^5]。 #### 方法三：升级至 Dart Sass 相较于传统的 `node-sass` 实现方式，基于纯 JavaScript 开发而成的 `dart-sass` 提供了更高的稳定性与易用性。推荐替换原有配置为以下内容： ```bash npm uninstall node-sass npm install sass --save-dev ``` 这样不仅简化了跨平台部署流程，还有效规避了许多历史遗留的技术难题[^3]。 #### 方法四：检查日志记录定位根本原因 如果前述几种途径均未能彻底根治顽疾的话，不妨借助详尽的日志信息进一步挖掘深层次隐患所在之处。查阅路径类似于下面所示位置： ``` C:\Users\<用户名>\AppData\Local\npm-cache\_logs\ ``` 从中提取关键线索辅助诊断最终得出结论[^4]。 --- ### 总结说明 综合来看，解决此类复合型技术挑战往往需要结合多种策略灵活应对。一方面要注重基础架构层面的优化改进；另一方面也要善于利用现代化工具集提升工作效率减少不必要的麻烦困扰。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值