Vue3 项目搭建

已于 2023-01-13 17:14:58 修改
阅读量300 收藏
点赞数
文章标签： vue.js javascript 前端
于 2023-01-13 16:57:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongshuteng/article/details/128676705
版权
本文介绍了如何使用VueCLI创建Vue3项目的基础步骤，包括在命令行中使用`npminitvue@latest`初始化，`cd`进入项目目录，安装依赖，用VSCode打开，并通过`npmrundev`启动开发服务器，在浏览器中预览应用。项目文件目录结构和创建过程也进行了简要说明。
摘要由CSDN通过智能技术生成

Vue3 项目搭建

Vue3 一百个案例目录

项目搭建基础版

在桌面（或 D盘或某个项目文件夹）打开命令行工具(cmd 或 PowerShell)，输入命令：

npm init vue@latest

命令运行截图：

create-vue-project

然后运行：

cd admincat       # 进入项目目录
npm i             # 安装依赖
code .            # VSCode 打开
npm run dev       # 运行开发服务器

浏览器打开：http://127.0.0.1:5173/

create-vue-project-preview

创建项目完成。

项目文件目录参考

新建的项目文件夹可能没有这么多，部分文件夹都给出了说明，仅供参考。

vue-folder-struct

参考文章

你的甜心森
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vite是什么？怎样使用Vite创建Vue3项目？【详细教程】
zy1992As的博客
10-06 3947
Vite(读音：/vit/)是一个轻量级、运行速度快的前端构建工具，它支持模块热替换(Hot Module Replacement，HMR)，可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。
Vite 脚手架 搭建 Vue项目
灵魂学者的博客
07-22 2157
在之前讲过搭建 Vue 项目的脚手架 Vue-Cli，Vue-Cli目前是处于这个维护阶段，随着Vue3的到来官方推荐使用 Vite 来搭建Vue项目，Vite是一个轻量级的、速度极快的构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。那么本篇就来使用Vite脚手架搭建Vue项目，同时也提供在VScode中需要安装哪些插件可以帮助使用者来更好的编写代码。
Vue3使用IP地址访问（解决 ERR_CONNECTION_REFUSED）
宋冠巡的博客
03-04 1万+
Vue3使用IP地址访问（解决 ERR_CONNECTION_REFUSED）
黑马程序员前端 Vue3 小兔鲜电商项目——（一）初始化项目
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-21 7575
黑马程序员前端 Vue3 小兔鲜电商项目——（一）初始化项目
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
热门推荐
逆境清醒的博客
03-19 6万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
vue3项目搭建
weixin_47353884的博客
06-16 2121
新建空白文件夹 通过 Git Bash Here 打开黑窗口 vue create vue3(项目名) 项目配置 :
Vue3项目搭建全过程
qq_52013792的博客
07-23 1万+
vue3项目搭建一条龙
Vue3项目搭建教程
qq_39877681的博客
11-30 1708
Vue3项目搭建教程
vue3 项目搭建以及使用
jerryyang_2017的博客
03-30 4687
创建vue3项目 创建一个基于vite开发的vue3项目
Vue3项目搭建超详解
HH112586的博客
07-27 1534
vue3项目搭建超详细教程
springboot3+ vue3前后端分离项目搭建代码
04-05
总的来说，"springboot3+ vue3前后端分离项目搭建代码"是一个全面展示现代Web开发技术的实例，涵盖了后端服务、前端界面、以及二者之间的协作。对于想要学习或深入理解Spring Boot和Vue 3的开发者来说，这是一个极好...
vite 创建Vue3项目搭建基本框架
liguoyuan819的博客
07-27 934
Vue3现在已经开始变为Vue的默认版本，总结一下Vite+Vue3+Typescript搭建项目流程。
【Vue3项目搭建至布局】
qq_55054495的博客
02-04 4764
这篇文章内容是从vue3项目构建到实现一个简单的布局，用到组件化原理和路由 vue3创建项目： vue create 项目名称 Manually select features 选择手动选择功能 选择Vue version,babel,TypeScript,Router,Vuex, 选择3.x 下面一路回车等待项目创建完成 创建项目成功后vscode打开 组件化布局（.vue编写->使用页面导入->注册->使用） 在components文件夹下创建Header.vue,Side..
手把手带你搭建vue3项目
dandelion_zjw的博客
05-13 1089
这里写自定义目录标题项目准备cli卸载安装Node创建项目（一）vue create [project-name]1.选择模板2.选择配置项（1）选择vue版本（2）是否使用class风格组件语法（3）是否使用babel语法转义（4）是否使用history路由模式（5）CSS预编译（6）eslint校验规则（7）eslint在什么时候进行校验（8）单元测试（大多数不需要）（9）E2E方案（一般不需要）（10）babel postCSS eslint的配置保存在哪3.保存配置4.waiting......5.
基于vue3和audio封装的简易音频播放器
weixin_43734732的博客
08-23 294
【代码】基于vue3和audio封装的简易音频播放器。
vue ref和reactive区别
最新发布
灰海
08-25 382
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Ant Design Vue 快速上手指南与常见问题排查
windowshht的博客
08-22 1155
Ant Design Vue 是一款功能强大的 Vue 组件库，能够帮助开发者快速构建高质量的用户界面。通过本文的快速上手指南，您可以轻松地在项目中集成 Ant Design Vue，并解决常见问题。希望这篇文章能为您的开发工作提供帮助，提升您的开发效率。如需深入了解 Ant Design Vue 的更多功能和组件，请参考Ant Design Vue 官方文档。
vue export的用法
weixin_41203765的博客
08-23 358
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
knowLedge-无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
2301_76671906的博客
08-23 374
无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
vue3项目搭建推荐
08-23
对于搭建Vue3项目，推荐使用Vue脚手架来快速构建项目。首先，进入你想要存放Vue3项目的目录，在命令行中运行以下命令： ``` vue create vue3-project ``` 其中，vue3-project可以替换为你想要取的项目名。这个命令会创建一个Vue3项目的基础结构和配置文件。 Vue脚手架是一个基于Vue.js进行快速开发的完整系统，可以实现快速搭建标准化项目的目的。它支持通用所有Vue版本，并且带来了很多新的特性，比如更好的性能、更小的包体积、更好的TypeScript集成和更优秀的API设计。 总结起来，推荐使用Vue脚手架来搭建Vue3项目，可以快速构建项目并享受到Vue3带来的新特性和优势。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue3项目搭建全过程](https://blog.csdn.net/qq_52013792/article/details/125950115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3项目搭建超详解](https://blog.csdn.net/HH112586/article/details/126009527)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值