Vue3实践（3）：使用vue-cli创建Vue3.0项目

最新推荐文章于 2024-06-30 08:24:00 发布

原创最新推荐文章于 2024-06-30 08:24:00 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 3.0 同时被 2 个专栏收录

101 篇文章

订阅专栏

vue.js

85 篇文章

订阅专栏

本文介绍了如何使用vue-cli创建Vue3.0项目，包括遇到的依赖问题及解决办法。首先，通过vuecreate命令初始化项目，若出现版本不匹配错误，可以使用npm全局安装最新vue-cli。在项目创建过程中选择Vue3.0选项，然后运行npm run serve启动项目，最终在http://localhost:8080/预览成功。

使用CDN还是有很多不方便的，比如要使用到组件等等...所以我们还是使用vue-cli来创建Vue3.0的项目

使用脚手架命令创建项目

	vue create vue3_test

过程中如果报错，且报错如下：

No matching version found for @vue/cli-plugin-babel@~5.0.0.

升级vue-cli可解决

	npm i -g @vue/cli@next

后面还有一步是否选择 vue3.0的操作记得选 (忘记截图了)

然后就是等待 ----------
在这里插入图片描述
完成,打开项目文件

运行项目

	npm run serve

waiting …

启动完成，打开 http://localhost:8080/
在这里插入图片描述
成功打开

end

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

2025专业AI写手!

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-cli3创建Vue项目

程序员柒的博客

02-09

3204

本文讲解了如何使用vue-cli3创建属于自己的Vue项目，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。下面案例可供参考。

使用Vue CLI方式创建Vue3.0应用程序

最新发布

pan_junbiao的博客

07-04

1403

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。新版本的 Vue CLI 的包名由原来的 vue-cli 改成了 @vue/cli。在开发大型项目时，需要考虑项目的组织结构、项目构建和部署等问题。如果手动完成这些配置工作，工作效率会非常低。为此，Vue.js 官方提供了一款脚手架生成工具 Vue CLI，通过该工具可以快速构建项目，并实现一下项目的初始配置。

参与评论您还未登录，请先登录后发表或查看评论

项目中遇到的问题及解决方式

玛已的小空间

03-02

6414

记录开发中遇到的一些问题

使用 vue-cli 创建 vue3 项目

CS饭的博客

07-31

1036

使用vue-cli创建vue3项目。

vue-cli 创建vue3项目

Gblfy_Blog

01-23

3600

文章目录一、环境准备二、核心组件2.1. axios封装2.2. vuex2.3. vue-router 一、环境准备前提： # 安装node环境 node -v npm -v # 安装镜像源工具 npm install nrm -g nrm ls # 使用淘宝镜像源 nrm use taobao nrm ls # 卸载旧脚手架工具 npm uninstall vue-cli -g or yarn global remove vue-cli # 安装新版的脚手架工具指定版本@vue/cli@

vue-cli-plugin-browser-extension:适用于vue-cli 3.0的浏览器扩展开发插件

05-13

vue-cli 3.x的浏览器扩展开发插件它有什么作用？这旨在作为的替代品（现在，使用此插件已预设为）。该插件为您的vue应用程序更改了serve命令。此新命令仅用于在测试您的浏览器扩展时运行livereload服务器。 ...

精选资源

vue-cli3.0-vueadmin：基于vue-cli3.0 + vue + elementUI + vuex + axios +权限管理的后台管理系统

02-06

项目基于vue-cli3.0进行构建，并使用了vue全家桶vue vuex axios vue-router elementui，增加了按钮级别的权限控制脚手架版本： * vue-cli-3.0 用到vue相关的生态链模块： vue vue-router vuex axios 项目要点 ...

精选资源

vue3.0 vue-quill-editor.rar

09-19

在结合Vue3.0和Vue-Quill-Editor时，可以通过Vue CLI创建项目，并安装所需的依赖。 Element UI是基于Vue2的UI库，提供了多种样式组件，如表格、按钮、提示等，用于快速构建企业级前端应用。虽然Element UI主要针对...

vue-cli V3.0版本的使用详解

10-17

通过本文，我们来详细介绍如何使用Vue-cli V3.0版本创建和配置Vue项目。 1. Vue-cli V3.0版本概述 Vue-cli V3.0是Vue.js官方提供的一个完整、灵活的Vue.js项目脚手架，它通过预设的配置能够快速开始项目开发。随着V...

jenins运行前端vue工程流水线报错：sh: vue-cli-service: not found npm ERR code 127 npm ERR path /var/jenkins_hom

代码改变世界！

12-12

3401

jenkins构建前端vue流水线报错构建工具不存在

vue-cli创建一个vue3项目

wushijun5200的博客

12-17

188

【代码】vue-cli创建一个vue3项目。

Vue-cli创建Vue3项目

爱吃香菜君的博客

06-04

767

那么，在开始 Vue.js 3.0 的开发之前，我们需要先创建一个 Vue.js 3.0 项目。在后续的开发中，我们可以按照 Vue.js 的开发文档进行开发，并且使用 vue-cli 提供的命令行工具来进行构建和打包。vue-cli 是一个由 Vue.js 官方提供的命令行工具，可以帮助我们快速创建 Vue.js 项目。在选择中，我们选择了默认的配置，并且选择了 Vue.js 3.0 版本作为我们的项目模板。安装完成 vue-cli 后，我们就可以使用它来创建 Vue.js 3.0 项目了。

通过 vue-cli 创建一个 vue3 的项目

桂如的博客

08-07

885

通过vue-cli创建一个vue3项目

vuecli创建vue3项目

qq_34568657的博客

03-19

414

*第二步：**勾选下面带有*号的，经验最好把Linter/Formatter勾掉，不然会出现eslint报错。配置文件是放在独立的配置文件中（选项一），还是放在package.json中（选项二）。**第五步：**使用cscc还是less，根据个人习惯选择，本人选择scss。**第四步：**意思为是否用history模式来创建路由，选择yes。**第七步：**是否保存此次配置，用于将来的项目，选择no。**第六步：**配置文件的存放位置。**第一步：**在文件夹中输入。**第三步：**选择3.x。

Vue3实战：Vue-cli 快速创建vue3项目

dingdingdandan

06-08

1747

- `Vue CLI` 是一个基于 Vue.js 进行快速开发的完整系统。 - `CLI (@vue/cli)` 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。...

vue-cli创建vue3

bestyinjun的专栏

08-07

301

vue-cli创建vue3

Vue CLI脚手架创建Vue3项目

乾坤鸟的博客

09-19

1782

1、打开命令窗口切换到项目保存目录。 2、选择Vue 3创建。 3、等待创建，提示Successfully created project创建成功。 4、创建好的项目目录。 5、用开发工具idea、vscode等打开hello-vue3项目开发就可以了，按个人喜好我用的是idea。 6、启动成功，发挥创造吧~~~~第一次运行时先初始化安装。 7、yarn命令没有安装的小伙伴可以参考这个。

通过Vue CLI快速创建一个Vue 3项目，并简单介绍项目结构

有我更精彩的博客

06-30

1340

├── public├── src接下来我们将详细介绍每个目录和文件的用途。通过 Vue CLI 创建 Vue 3 项目是一个非常快捷和高效的过程。它不仅生成了必要的文件和目录，还使您能够专注于编写代码而不是配置项目。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。