Vue学习-1（2）使用@vue/cli创建项目

最新推荐文章于 2022-06-09 11:24:11 发布
原创 最新推荐文章于 2022-06-09 11:24:11 发布 · 119 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客提到cnpm不怎么维护了，同时指出yarn比npm稍快，还提醒不要用npm来安装yarn，为开发者在包管理工具的选择上提供了参考。

image-20201226174255718

yarn global add @vue/cli@4.1.2
npm install --global @vue/cli@4.1.2

image-20201226174541633

image-20201226174924684

修改'~/.vuerc'中"useTaobaoRegistry"为true

image-20201226175008557

image-20201226175215932

Use history mode for router？ NO
CSS pre-processor？SCSS(dart-sass)

image-20201226175418644
image-20201226175456455
image-20201226175543970
image-20201226175619028

  • cnpm不怎么维护了

  • yarn比npm稍快(别用npm装yarn)

脚手架、vue-cli与@vue/cli概念辨析
skysys的研究小屋
01-22 1791
脚手架 「为减少重复性工作而做的重复性工作」的工具 例子 你要写一个项目0，源语言为ES6，用了sass, 后端是node.你每次完成一部分功能，你都要用把ES6编译到ES5、编译sass、压缩html文件。每次修改代码都要做的编译ES6、sass、压缩html这些就是重复性工作。 后来你知道了gulp, 然后你写了个gulp脚本，每次有代码改动，一句gulp build就帮你完成了上面说的这些重复性工作. 你写的gulp脚本就是为减少重复性工作而做的工作。你写完这个项目0之后，你又要写项目1，还是ES6、
脚手架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/cli 创建项目
这天有点热的博客
11-25 217
学习Vue是根据《Vue.js项目开发实战》张帆写的。这本书看的，这本书是 node v8.6.0、npm 5.4.2；vue-cli好像是3.多的吧。自己查了一下，我这会新的是4.*。 首先就是安装vue-cli，发现用 npm install vue-cli --save-dev npm install @vue/cli --save-dev 都不行，最后改用了yarn才安装成功。 ...
使用vue-cli 构建一个项目
去他喵的博客
05-23 303
一.搭建环境vue-cli是Vue的脚手架工具，在使用vue-cli创建项目之前需要先下载好各种工具，建议使用命令行全局安装(-g)1. node.js 2. npm建议安装一个淘宝镜像  npm install -g cnpm --registry=https://registry.npm.taobao.org3. 安装vue-cli  cnpm install vue-cli -g检查以上各项...
vue第三天笔记05——使用vue-cli脚手架工具创建一个项目
lqh的博客
08-19 381
1.新建文件夹，命名不能是中文 2.打开该文件夹，在该文件夹路径下输入cmd，进入命令行 3.输入下面的命令 vue init 模板名项目名称(随便取名，要是英文) 模板名有三种： simple： 只有一个index.html文件，基本没用 webpack：可以使用(大型项目)Eslint 检查代码规范，单元测试 webpack-simple： 个人推荐使用, 没有代码检查 4.根据提示依次输入三行命令，便可以进入新建的项目 5.一些注意事项： （1）在项...
使用Vue/cli创建vue项目
FVZ的博客
10-06 200
Vue cli官网 1.安装vue/cli npm install -g @vue/cli 2.查看版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 vue --version @vue/cli 4.5.4 3.创建项目 1.执行vue create 项目名称 命令行窗口输入
使用vue-cli3.0创建一个项目
weixin_48187749的博客
06-09 343
使用vue-cli3.0创建一个项目
精选资源
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
如果yon没有使用Vue CLI创建的项目： vue create my-vue-app 将插件安装到您的项目中： cd my-vue-app vue add i18n :hammer: 注入的命令 vue-cli-service i18n:report （实验性） 报告缺少的区域设置消息键和
基于Vue-cli快速搭建项目的完整步骤
12-09
vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。 下面话不多说了，来一起看看详细的介绍吧 一、准备工作 在使用...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
qq_43456781的博客
10-10 6378
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset 文章目录Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset1. 介绍该系统的组件CLICLI 服务CLI 插件2. 安装升级项目依赖3. 基础-快速原型开发vue servevue build4. 基础-创建一个项目vue create使用图形化界面拉取 2.x 模板 (旧版本)5. 基础-插件和 Preset插件在现有的项目中安装插件项目本地的插件Pr
Vue学习（一）：Vue的安装及使用Vue Cli快速生成新项目的脚手架
看门猫的博客
03-18 262
Vue学习：Vue的安装及使用Vue Cli快速生成新项目的脚手架前言Vue的安装Vue Cli的安装 前言 Vue是一套用于构建用户界面的渐进式前端框架，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，利用Vue框架还可以迅速构建单页应用。详细信息请查看Vue的官方文档https://cn.vuejs.org/v2/guide/ Vue的安装 Vue的安装方法有很多，我是用...
vue前端面试刷题练习1 峰峰博客
程序员峰峰
03-15 1万+
一、选择题 1．在Vue实例中可以定义方法的是（ B ）选项。 A. el B. methods C. data D. computed 2．下列指令中，不能实现条件判断的是（ D ）。 A. v-if B. v-else C. v-show D. v-bind 3．下列代码的运行结果为（ B ） <div id="example"> <p>{{len}}</p> </div> <script type="text
利用vue-cli快速创建一个vue项目
只想好好敲代码的博客
02-01 1458
快速开始第一个vue项目 选择一个工作目录，并且用cmd进入该目录， # 创建你一个项目名称为 first-vue-project 的 vue 项目 vue create first-vue-project 接着你就会面临着第一个选择 default是指按照默认的选项去创建项目，Manually select features 是手动配置，我们选择手动配置。 选择你需要安装的第三方库，默认选...
如何使用vue-cli生成项目
菜籽的博客
12-20 5970
如何自动生成vue2.0+webpack项目！
使用vue-cli创建一个项目（一）
xf_123456789的博客
08-16 1724
在创建项目之前首先要清楚自己的目的，达成目标需要用到哪些工具，这样就可以避免总是google或者baidu翻阅资料了。 一、目的：使用vue脚手架工具vue-cli创建项目 二、工具 1、npm -- node package manager（nodejs官方包管理工具） 作用：类似于商店,可以将别人的代码包引入自己的项目（这里的vue-cli和webpack） 2、webpack（打包...
Vue学习-1（18）svgo-loader删除svg自带fill
hell_csdn的博客
01-01 2163
svg fill里有预设颜色，active不能生效 自动删fill颜色 加个loader svgo-loader yarn add --dev svgo-loader svg-sprite-loader-mod
Vue学习-1（13）如何 import 一个目录下某后缀的所有文件
hell_csdn的博客
01-01 1481
直接引入svg目录，不用一个个引入 let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext); importAll(require.context(path: '../assets/icons',true,/\.svg$/)); //只能relativePath //单元测试可能失败 try{ importAl.
Vue学习-1（10）Layout 组件 & slot 插槽（解决布局上html、css重复）
hell_csdn的博客
12-28 938
新建Layout.vue(只有html，css) 保留ts里的name，可以帮主ws快捷引入组件 Layout注册全局组件（main.js） nav可以改layout里局部引入了
Vue学习-1（16）active-class选中变色
hell_csdn的博客
01-01 617
IDE内git提交，右键项目 router-link标签又activeClass属性，默认为link-class-active，可以在标签，routes中修改选中时的class名(通常一样selected ，方便css设置)
run `npm fund` for details fanwei@192 eam % npm install @vue/cli-service@latest --save-dev npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: eam@1.0.5 npm WARN Found: @vue/cli-service@4.5.19 npm WARN node_modules/@vue/cli-service npm WARN peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.19 npm WARN node_modules/@vue/cli-plugin-babel npm WARN dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm WARN 3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project) npm WARN npm WARN Could not resolve dependency: npm WARN peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.19 npm WARN node_modules/@vue/cli-plugin-babel npm WARN dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: eam@1.0.5 npm WARN Found: @vue/cli-service@4.5.19 npm WARN node_modules/@vue/cli-service npm WARN peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.19 npm WARN node_modules/@vue/cli-plugin-babel npm WARN dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm WARN 3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project) npm WARN npm WARN Could not resolve dependency: npm WARN peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-router@4.5.19 npm WARN node_modules/@vue/cli-plugin-router npm WARN @vue/cli-plugin-router@"^4.5.19" from @vue/cli-service@4.5.19 npm WARN 1 more (the root project) npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: eam@1.0.5 npm WARN Found: @vue/cli-service@4.5.19 npm WARN node_modules/@vue/cli-service npm WARN peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.19 npm WARN node_modules/@vue/cli-plugin-babel npm WARN dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm WARN 3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project) npm WARN npm WARN Could not
最新发布
03-31
<think>嗯，用户遇到了Vue CLI插件与@vue/cli-service的依赖冲突问题，显示ERESOLVE错误。我需要先理解这个问题的常见原因。根据引用[1]到[4]，可能的问题是对等依赖版本不匹配，比如eslint-plugin-vue、Vue、Vant或ECharts的版本冲突。 首先，应该检查项目中的依赖版本是否兼容。例如，引用[1]提到降级eslint-plugin-vue到7.0.0版本可能解决冲突，而引用[3]指出@vue/cli-plugin-eslint可能对eslint版本有特定要求。此外，引用[2]和[4]都提到项目中的依赖包版本不一致导致的冲突。 解决步骤可能包括：1. 使用npm ls分析依赖树，找出具体冲突的包。2. 升级或降级相关依赖到兼容版本，比如升级@vue/cli-service到最新或与插件兼容的版本。3. 使用--legacy-peer-deps绕过冲突，但可能不稳定。4. 如果问题依旧，考虑创建新项目并逐步迁移依赖。 用户可能需要手动调整package.json中的版本，然后重新安装。此外，确保所有Vue CLI插件与核心库版本匹配也很重要。例如，如果@vue/cli-service是4.x，插件也应该是4.x版本。如果用户升级到Vue 3，可能需要使用Vue CLI 5.x。 还需要注意其他依赖如Vant或ECharts是否与Vue版本兼容，引用[2]提到Vant需要Vue 3，而ECharts可能需要特定版本。因此，全面检查所有相关依赖的版本兼容性是关键。</think>### 解决Vue CLI插件与@vue/cli-service依赖冲突的步骤 #### 1. 分析依赖树 通过命令查看具体冲突来源： ```bash npm ls @vue/cli-service eslint-plugin-vue vue ``` 若出现类似`UNMET PEER DEPENDENCY`警告，表示存在版本不匹配问题[^2][^3] #### 2. 版本兼容性处理 根据引用[1][3][4]建议： ```bash # 升级核心工具链 npm install --save-dev @vue/cli-service@latest # 同步更新相关插件 npm install --save-dev @vue/cli-plugin-eslint@latest eslint-plugin-vue@^7.0.0 # 显式指定Vue版本（若使用Vue 3） npm install vue@3.2.45 ``` #### 3. 强制安装模式 对于暂时无法解决的冲突，可尝试： ```bash npm install --legacy-peer-deps ``` 此模式会忽略部分peer依赖检查，但可能引发运行时问题[^4] #### 4. 依赖清理策略 ```bash # 清除缓存后重试 rm -rf node_modules package-lock.json npm cache clean --force npm install ``` #### 5. 项目级版本控制 在`package.json`中显式指定版本范围： ```json { "devDependencies": { "@vue/cli-service": "^4.5.19", "eslint-plugin-vue": "^7.0.0", "vue": "^2.6.14 || ^3.2.0" } } ``` ### 版本兼容对照表 | 组件 | Vue 2兼容版本 | Vue 3兼容版本 | |--------------------|------------------|------------------| | @vue/cli-service | 4.x | 5.x | | eslint-plugin-vue | 6.x | 7.x+ | | @vue/cli-plugin-eslint | 4.x | 5.x | ### 典型错误场景 1. **Vue 2项目安装Vant4**：需要强制指定Vant3版本 ```bash npm install vant@latest-2 ``` 2. **ESLint版本冲突**：引用[3]显示需保持`eslint@>=1.6.0 <7.0.0`范围 3. **Less加载问题**：引用[4]建议检查`less-loader`与webpack版本的兼容性
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值