Vue CLI 最新v4.5.11 (实时更新)

1.创建项目 vue create 项目名

在这里插入图片描述
这里有三个预设

Default ([Vue 2] babel, eslint)  
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features  # 手动选择功能

第一个预设是我之前保存的,那么如何删除预设

2.删除预设
打开资源管理器,找到一个名为.vuerc的文件,里面保存着预设信息

在这里插入图片描述
清除presets里面内容即可

3.选择 Manually select features创建咱们手动去创建
在这里插入图片描述
在这里插入图片描述
按照我们自己的需求去选择

在这里插入图片描述
这里我选择几个自己所需要的

在这里插入图片描述
这里问路由是否选择历史模式history

vue 里面路由有两种显示模式是hashhistory,默认是hash

hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

一般情况下两种都可以满足实际需求,不过在微信中的支付、分享等,url作为参数传递,页面会把"#"后边的内容处理掉,后台取不到#后面的东西除非将url进行编码,然后后端配合进行解码,显然是不满足实际需求的,因此要用到history模式。另外如果你追求url的美观,不希望url中含有#号,那你可以选择使用history。

使用history需要前后端同时进行配置

我这里选择history

在这里插入图片描述
选择一个CSS预处理器(默认情况下支持postss、Autoprefixer和CSS模块)

我选择node-sass

在这里插入图片描述
选择一个linter/formatter配置

ESLint with error prevention only 只配置使用 ESLint 官网的推荐规则

ESLint + Airbnb config 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置Airbnb的规则

ESLint + Standard config 使用 ESLint 官网推荐的规则 + Standard第三方的配置 Standard 的规则

ESLint + Prettier 使用 ESLint 官网推荐的规则 + Prettier 第三方的配置Prettier

主要是做风格统一 代码格式化工具

这里我选择第一个官方推荐的就可以了

在这里插入图片描述
拾取其他lint特征
选择第一个就可
在这里插入图片描述
在哪里放置Babel、ESLint等的配置?

Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files #在专用配置文件中
In package.json 

我这里放在了package.json

babel的作用就是将浏览器不认识的高级javascript语法解析成低级的语法,来实现浏览器的兼容

在这里插入图片描述
是否将此保存为将来项目的预设?

选择允许然后保存位置啥的随意填写即可

注:

如果下载不成功报错command failed: npm install --loglevel error 这个报错有可能是sass版本过高咱们下载项目时吧预选的css预处理器先不勾选等在项目里面下载个版本低一些的或者把.vuerc文件删除后重新下载,不行安装个淘宝镜像总有解决的方案 sass版本过高安装不上是个主要问题

然后下载完项目 进入 cd 目录 npm run serve 运行

如何关闭eslint检验
首先在根目录下新建vue.config.js文件
在这里插入图片描述
上面sass报错没有下载,现在在项目中下载个版本低一些的

npm install node-sass@4.14.1 
npm install sass-loader@7.3.1
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/cli-plugin-eslint@4.5.11 npm ERR! Found: eslint@7.19.0 npm ERR! node_modules/eslint npm ERR! peer eslint@">= 4.12.1" from babel-eslint@10.1.0 npm ERR! node_modules/babel-eslint npm ERR! dev babel-eslint@"10.1.0" from the root project npm ERR! peer eslint@"^6.2.0 || ^7.0.0" from eslint-plugin-vue@7.5.0 npm ERR! node_modules/eslint-plugin-vue npm ERR! dev eslint-plugin-vue@"7.5.0" from the root project npm ERR! 2 more (vue-eslint-parser, the root project) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-eslint@4.5.11 npm ERR! node_modules/@vue/cli-plugin-eslint npm ERR! dev @vue/cli-plugin-eslint@"4.5.11" from the root project npm ERR! npm ERR! Conflicting peer dependency: eslint@6.8.0 npm ERR! node_modules/eslint npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-eslint@4.5.11 npm ERR! node_modules/@vue/cli-plugin-eslint npm ERR! dev @vue/cli-plugin-eslint@"4.5.11" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! C:\Users\lishi\AppData\Local\npm-cache\_logs\2025-07-22T13_00_29_482Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: C:\Users\lishi\AppData\Local\npm-cache\_logs\2025-07-22T13_00_29_482Z-debug-0.log
最新发布
07-23
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值