使用vue-cli@3.3.0创建项目

原创 已于 2022-04-01 20:17:30 修改 · 340 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2022-04-01 19:25:12 首次发布
本文档详细介绍了如何创建一个Vue3项目，包括Vue CLI的版本确认、项目创建过程、遇到的降级问题及解决方案，如删除.vuerc和.npmrc文件，以及如何使用npm降级并安装指定版本。最后，讨论了项目目录结构和启动项目的步骤。

目录

1. 确认vue版本（最新的已经到了5.0以上）

2. 来到创建的项目目录下，新建一个vue项目vue3

2.1 会遇到的报错

2.2.1 vue create

2.1.2 npm install

 3. 配置好以后就会开始下载相应的脚手架，形成新的项目​

4. 项目新建成功。使用npm install，下载所有的依赖

5. 项目目录结构

6. 启动项目

1. 确认vue版本（最新的已经到了5.0以上）

安装之前先卸载旧版本

npm uninstall -g @vue/cli

安装3.0及其以后版本

npm install -g @vue/cli@x.x.x

安装3.0以前的旧版本

npm install -g vue-cli@2.x

此时查看vue版本

vue -V

2. 来到创建的项目目录下，新建一个vue项目vue3

vue create vue3

配置如下

2.1 vue-cli降级会遇到的报错

由于一开始装的最新版本的vue-cli（5.0+），降了版本以后会出现一些问题。

2.2.1 vue create

 将个人文件夹下的.vuerc文件删除就好了

 重新运行

2.1.2 npm install

删除个人文件夹中的.npmrc文件

对npm降级

npm i --legacy-peer-deps 

 3. 配置好以后就会开始下载相应的脚手架，形成新的项目

4. 项目新建成功。使用npm install，下载所有的依赖

5. 项目目录结构

6. 启动项目

在package.json中找到启动命令，启动。

一般是npm run serve

Vue3.0——Vue3简介、Vue3带来了什么、拥抱TypeScript、新的特性、Vue3.0环境集成
qq_52301431的博客
09-16 1525
2020年9月18日，Vue.js发布3.0版本，代号:One Piece（海贼王）耗时两年多，2600+次提交，30+个RFC，600+次PR，99位贡献者。
Vue 学习笔记 (一) -- 初识 VueCli 3
陈增庆的博客
10-01 5541
Vue 学习笔记 – 初识 VueCli 3 简介 接触 Vue 已经有一段时间了，之前做项目都是套用自己之前配置好的项目模板，最近突发奇想想要再重新配置一下项目，然而。。。 zengqingdeMacBook-Pro:Vue zengqing$ vue init webpack hello-world Command vue init requires a global addon to ...
安装vue的cli3.3.0脚手架
qq_41444226的博客
01-15 655
前提条件：电脑安装好node.js 安装node.js的参考地址：https://www.jianshu.com/p/03a76b2e7e00 1.安装cnpm(国内镜像速度快) npm install -g cnpm --registry=https://registry.npm.taobao.org 注意：可以利用cnpm -v命令查看 是否安装成功 2.通过cnpm安装cli cnpm i...
vue-cli3.3结合nginx部署到服务器上，并设置开机自启
h1astro的博客
10-21 677
Nginx下载 官网下载：http://nginx.org/en/download.html 或者直接在linux执行命令：wget http://nginx.org/download/nginx-1.12.2.tar.gz 这里下载的版本是1.12.2 安装步骤 安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 解压缩 tar -zxvf linux-nginx-1.12.2.tar.gz cd nginx-1
vue-cli3.3版本 vue.config.js的基础配置
业余前端的职业经历
01-30 1177
在最新的vue-cli3.3版本以上 没有 config文件夹 个webpack的配置 减少了项目的文件数量 虽然减少了学习的压力 但是想要搞懂 还是得有之前webpack的知识 可能这个时候就疑问了 那我的webpack设置在哪里书写呢 这个时候官网说的是给了一个可选的 vue.config.js文件 你可以将配置写到这个文件中 在创建好的vue项目下 新建一个 vue.conf...
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
10-15
作者在文章中提到了使用Vue UI来创建项目，Vue UI是Vue CLI的一个图形界面工具，它可以帮助用户更便捷地创建和管理项目。 **Vue UI使用** 要启动Vue UI，只需要在命令行中输入： ```bash vue ui ``` 然后浏览器...
浅谈vue-cli加载不到dev-server.js的解决办法
11-28
在Vue.js开发中，我们经常会使用Vue CLI工具来快速搭建项目环境。然而，在更新到较新的VueWebpackTemplate时，可能会遇到“vue-cli加载不到dev-server.js”的问题。这是因为旧版本中，开发服务器的配置通常在dev-...
npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: dsms-ui@2.3.0 npm ERR! Found: webpack@4.47.0 npm ERR! node_modules/webpack npm ERR! webpack@"^4.0.0" from @vue/cli-plugin-babel@3.12.1 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"^3.3.0" from the root project npm ERR! webpack@"^4.0.0" from @vue/cli-plugin-eslint@3.12.1 npm ERR! node_modules/@vue/cli-plugin-eslint npm ERR! dev @vue/cli-plugin-eslint@"^3.3.0" from the root project npm ERR! 4 more (@vue/cli-service, compression-webpack-plugin, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! vue-loader@"^15.7.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: webpack@5.101.3 npm ERR! node_modules/webpack npm ERR! peerOptional webpack@"^5.27.0" from css-loader@7.1.2 npm ERR! node_modules/css-loader npm ERR! peer css-loader@"*" from vue-loader@15.11.1 npm ERR! node_modules/vue-loader npm ERR! vue-loader@"^15.7.0" 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! See E:\node.js\install\node_cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! E:\node.js\install\node_cache\_logs\2025-09-15T06_17_52_471Z-debug-0.log
最新发布
09-16
如果项目是通过 Vue CLI 创建的，更新工具链可能自动解决依赖问题（引用[2]）： ```bash npm update -g @vue/cli vue upgrade ``` --- ### 验证解决方案 执行安装后，运行以下命令验证依赖冲突是否解决： ```bash...
Vue-cli快速入门：构建Vue项目详解
本篇文章详细介绍了使用vue-cli构建Vue.js项目的完整步骤，以帮助开发者快速上手并创建一个可扩展的项目结构。首先，确保已安装Node.js和npm，因为它们是构建Vue应用的基础。 1. 安装vue-cli：通过npm全局安装vue-...
uni-app系列（一）用cli创建支持Vue3Vite的uni-app项目
m0_67401153的博客
03-05 564
更新HBuilderX编译器到3.3.0+，HBuilderX 3.3.0+的编辑器支持基于 Vite 编译到小程序平台。 至此，uni-app在App/H5/小程序全平台支持Vue 3.0开发，且全平台支持Vite编译器。 用cli创建支持Vue3/Vite的uni-app项目 1、命令行创建 Vue3/Vite 工程 # 创建以 javascript 开发的工程 npx degit dcloudio/uni-preset-vue#vite my-vue3-project # 创建以 types
纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
weixin_34199335的博客
09-20 305
vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识，肢解重组成为可以堆砌的知识。 学会工具并不难，思考如何运用这些工具，才是编程或者工作中最难的部分。 我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支。 =================...
vue-cli3中 vue.config.js 文件 --本地版本@vue/cli ^3.3.0
南思琼海
12-12 4025
module.exports = { //部署应用的基本url 可用 process.env.NODE_ENV 环境变量控制 baseUrl: '/', //指定生产环境目录 outputDir: 'dist', //指定生成静态资源的生成目录 assetsDir: 'static', //指定生成的index.html的输出名 indexPath:'index....
HTML期末学生大作业-奶茶网页作业html+css+javascript
2401_84411522的博客
04-26 496
关于我们
Vue——《3.3、Vue脚手架》
奋斗的小前端
03-07 685
Vue的脚手架（Vue CLI: Command Line Interface）是Vue官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成htmlcssjs代码，并且可以将这些代码自动发布到它自带的服务器上，为我们Vue的开发提供了一条龙服务。注意：Vue CLI 4.x需要Node.js v8.9及以上版本，推荐v10以上。
vue3.0的变化汇总
qq_38935512的博客
11-23 695
vue3.0的变化汇总
全面总结 Vue 3.0 的新特性！手把手教你如何入门Vue3.0（适合小白的保姆级教程）【尚硅谷vuejs3.0笔记】
南北极之间
08-01 3176
什么是hook？——本质是一个函数，把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势复用代码,让setup中的逻辑更清楚易懂。
Vue 3.3 正式发布 [浪客剑心]
热门推荐
陈书予
05-13 1万+
特征和弃用信息来源地址今天，我们很高兴地宣布发布 Vue 3.3“浪客剑心”！此版本专注于改进开发人员体验 - 特别是 与 TypeScript 的使用。与Vue 语言工具（以前称为 Volar）的 1.6 版本一起，我们解决了将 Vue 与 TypeScript 一起使用时许多长期存在的痛点。以前，在 和 的类型仅支持本地类型，不能使用 import，并且仅支持类型字面量和 interface。这是因为 Vue 需要能够分析 props 接口上的属性，以生成相应的运行时选项。这个限制现在在 3.3 中
vue升级3.0以上及其他指令
sinat_34842383的博客
08-08 1343
卸载旧的vue2.0 npm uninstall vue-cli -g 或 yarn global remove vue-cli 。 安装新的vue3.0 将npm的仓库地址改为淘宝镜像：npm config set registry https://registry.npm.taobao.org --global 然后执行：cnpm install -g @vue/cli” 。注意是cnpm了，不是npm。 npm install出现"Unexpected end of JSON input while
vue-cli3+来袭，教你怎么安装Vue cli 3+
蓝冰凌的博客
01-16 1946
Vue cli 3.0最新版发布了，增加了许多的新的功能和方法，但是Vue cli 3+的安装方法与以前有所不同，下面我向大家介绍Vue cli 3+的安装方法。 Vue cli 3+的包名发生了变化，从vue-cli更改为了@vue/cli。如果你以前安装过低版本的Vue cli，你需要先用npm卸载vue-cli。否则安装Vue cli 3+会报错。 npm uninstall vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值