vue学习笔记-Vite创建工程-01

最新推荐文章于 2025-07-30 16:36:32 发布
最新推荐文章于 2025-07-30 16:36:32 发布
阅读量310 收藏 6
点赞数 11
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20244015/article/details/137353723
本文介绍了如何在VSCode中安装Node.js和Vue3，创建项目文件夹，通过npm创建并配置Vue项目，安装依赖，以及在终端中启动dev服务器进行预览的过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.安装node.js

node.js：node.js

2.安装vscode

vscode：vscode

3.创建项目文件夹

4.vscode打开项目文件夹

选择刚刚创建的项目文件夹

5.vscode中打开终端

默认打开终端快捷键：Ctrl+Shift+`

6.终端中输入新建vue3工程命令
npm create vue@latest

根据提示架构vue项目

7.安装依赖

重新打开vscode，打开文件夹>选择刚刚构建的vue项目文件夹，快捷键唤出终端，输入以下命令进行依赖安装

npm install
8.安装vue支持插件

9.vscode项目下终端输入以下命令开启nodejs项目试调

npm run dev

复制地址到浏览器打开即可预览效果

vue-advanced-chat 学习笔记
qq_38220914的博客
03-19 703
很明显，该组件的运行逻辑很简单，遵循以下规则：•修改组件的属性对象值，可以改变组件的显示。•当组件接收到用户操作时，通过上报消息通知父组件。实际开发中，只需要关注：•组件的属性对象值的数据格式。•组件上报消息的参数格式。后续如果有需求的话，我将进一步整理此组件的完整使用方法。
Vue3实战笔记（01）--- 使用vite初始化项目
山花的博客
05-04 607
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任，本系列笔记从零开始学习开发一套后台管理系统，从实战出发，记录开发过程中遇到的问题和心得，旨在掌握Vue3 的核心特性和开发技巧。前端UI框架使用Vuetify，以快速构建美观且功能强大的应用程序。
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
热门推荐
qq_44423029的博客
08-17 6万+
超详细步骤vite创建vue3项目，技术栈vue3+ts+vite+element-plus+pinia，跟着做就搭出来了（保姆级）
vite创建项目
qq_15806553的博客
12-11 6444
vite创建项目
使用vite创建vue3+Ts+Naive项目
刘慧丽的博客
08-05 778
vue3+ts+vite+naive ui
SQL 插入时直接插入当前时间
小游
12-13 2500
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 直接使用now() 比如 insert into a key values now()
使用vite搭建Vue3项目
GHkmmm的个人博客
08-05 1万+
全局安装create-vite-app # yarn yarn global add create-vite-app@1.18.0 # npm npm i -g create-vite-app@1.18.0 创建项目目录 # oreo-ui是项目名称 cva oreo-ui create-vite-app oreo-ui 根据提示安装对应依赖 1.cd oreo-ui 2.npm install(or `yarn`) 3.npm run dev(or `yarn dev`) 预览项目 在浏览器输入
【2024】前端学习笔记18-vite项目工程化
皮皮的博客
11-06 479
记录了怎么使用vite构建一个项目，介绍了初始化项目后默认的一些目录和文件的作用
（9）Vue脚手架的使用（Vite、vue-cli、create-vue）
緑水長流*z
04-24 1669
作为后端程序员，我们熟悉项目初始化工具，比如 Spring Initializr，它可以帮助我们快速搭建一个具有Spring环境的项目结构，另外还支持我们勾选自己需要的功能，如模板引擎、Redis环境、Spring Security、测试单元等。 前端脚手架其实和它们非常相似，只不过它是针对前端开发的，即快速帮我们搭建一个整合好了Vue（React、Angular）环境的项目结构，同时也允许我们勾选自己所需要的前端功能，如Vue-Router、Pinia、Vitest等。
Vue学习笔记六--Vue3学习
铁马冰河入梦来
01-10 3376
Vue3.0最新语法
Vue3学习笔记＜-＞创建第一个vue项目（2）
athjyh的博客
06-27 754
vue3+vite+js 创建第一个vue项目
ruoyi-admin和ruoyi-vue3笔记-gl-wms物流管理项目
TY121810的博客
07-24 1240
gl-wms物流管理项目。
VUE3（一）安装+使用vite创建一个项目
camellia的博客
02-08 3857
VUE3.0第一篇。主要还是看一看官方的手册，做一个笔记。 官方文档网址： https://www.vue3js.cn/docs/zh/guide/introduction.html 这里看一下vue3.0的安装以及创建第一个项目。 官方对js包管理为我们提供了两个选择，npm和yarn。我这里比较倾向使用yarn。 关于yarn的介绍，请移步《js包管理工具yarn》 一：安装vue3.0 yarn global add @vue/cli@next 安装成功如下图所示： 二：创建项目 1：创建一个名为
Vue3 中 toValue 与 unref 深度解析：异同、场景与最佳实践
最新发布
前端知识分享喵
07-30 754
Vue3中的toValue和unref都是响应式数据解包工具，但存在关键差异：unref仅解包ref对象，而toValue在unref基础上增加了对函数类型的支持，会自动执行函数并返回结果。toValue更适合处理动态计算和多种输入类型的场景，如组合式函数参数标准化；unref则在简单解包和性能敏感场景更具优势。开发者需注意两者对reactive对象和函数参数的不同处理方式，根据实际需求选择合适工具。
Vue 框架 学习笔记
Hismybestlove的博客
07-27 904
本文总结了Vue框架的核心知识点，包括：1. 基础概念：渐进式框架、两种使用方式、Vue实例创建流程、模板语法和响应式特性。2. 常用指令：详细介绍了v-html、v-show/v-if、v-for、v-on、v-bind、v-model等10个指令的功能和用法。3. 组件开发：组件结构、注册方式（全局/局部）、数据传递（Props）、组件通信（自定义事件/插槽）、生命周期钩子和动态组件。4. 进阶特性：计算属性、侦听器、依赖注入和异步组件。5. 工程化应用：项目结构、应用实例创建和公共资源管理。文
Vue3判断对象是否为空方法
weixin_42498594的博客
07-28 262
访问（组合式 API 中）。
element UI的el-table组件，实现可以拖动
qq_60654563的博客
07-28 201
表格。
vue(5)-组件
Naiveyouzhi的博客
07-30 191
如果一个页面需要的是number数字，你就不能传字母中文string，我们就可以用到props，此时如果需要数字传的是字母的话，控制台就会报错。prop和data都可以向当前组件提供数据，区别就是data可以随便改，prop不能直接改，要遵循单向数据流。图中只给baseone加这个样式，就在baseone中style加scoped。全局样式在组件中起全局作用，局部样式可以加scoped属性来只作用于当前组件。一.组件三大组成部分（结构/样式/逻辑）（2）非空校验、默认值、自定义校验。
安装如下依赖（package.json 未包含）：vueelement-plusecharts@element-plus/icons-vue
weixin_53538280的博客
07-30 307
安装如下依赖（package.json 未包含）：vueecharts安装指定的依赖（Vue、Element Plus、ECharts 和 Element Plus 图标）
vue3学习笔记
03-13
<think>好的，我现在需要帮助用户寻找关于Vue3的学习资料或笔记。首先，用户已经提供了一些参考引用，其中提到了创建Vue3工程的方法和npm版本的要求。我需要结合这些信息，整理出一个结构清晰的回答，并生成相关问题。 首先，我应该检查用户提供的引用内容。引用[1]提到了基于vue-cli创建Vue3工程，以及学习建议，比如多练习和查看官网。引用[2]则涉及npm版本的要求。这些都是学习Vue3的基础，需要包含在回答中。 接下来，我需要确保回答符合系统级指令的要求。比如，所有行内数学表达式要用$...$，但这里可能不涉及数学公式，所以可能不需要。但需要检查是否有其他格式要求。独立公式用$$...$$，但同样可能不适用。需要确保LaTeX语法正确，但问题主要关于Vue3，可能用不上数学表达式，这点需要注意。 回答需要用中文，结构清晰，分步骤解决问题。用户需要教程和笔记，所以应该列出官方资源、推荐教程、实践项目、社区资源、笔记技巧等。同时，每个部分末尾如果有引用到用户提供的引用内容，需要添加引用标识，如[^1]或[^2]。 然后，生成相关问题。根据用户的需求，相关问题可能涉及学习路线、官方文档重点、项目推荐、常见问题解决、调试技巧等。这些问题需要与Vue3学习相关，并且能够帮助用户进一步深入学习。 现在，我需要组织内容。首先，介绍官方文档和工具，提到vue-cli创建工程和npm版本要求，引用[1]和[2]。然后推荐免费教程，如B站视频和实战课程，接着是书籍和付费课程。实践项目部分可以建议TodoList、电商后台等。社区资源包括GitHub、掘金、Stack Overflow。最后，笔记技巧部分，强调多练习，参考引用[1]。 在生成相关问题的时候，需要确保问题覆盖学习路线、文档重点、项目实践、常见问题、调试工具、Vue3新特性以及与其他框架比较等。这样用户可以有方向地继续学习。 最后，检查是否符合所有格式要求，没有使用任何markdown，正确添加引用标识，语言自然口语化，没有使用专业格式。确保LaTeX部分如果有的话正确，但在这个问题中可能不需要，所以可以忽略。确认回答结构清晰，分点明确，帮助用户逐步找到所需资料。</think>以下是关于Vue3的学习资料和整理建议，结合实践经验和参考资料： ### 一、官方核心资源 1. **Vue3官方文档** 必读部分：响应式基础、组合式API、Teleport组件、Vite工程配置 示例代码： ```javascript // 组合式API示例 import { ref, computed } from 'vue' export default { setup() { const count = ref(0) const double = computed(() => count.value * 2) return { count, double } } } ``` 2. **Vue CLI工具** 创建项目时注意npm版本需≥8.0（可通过`npm install -g npm@latest`升级） ```bash vue create vue3-demo ``` ### 二、高效学习路径 1. **新手入门阶段（1-2周）** - 完成官方交互式教程 - 实现基础功能：组件通信、路由配置 - 参考案例：TodoList + 天气查询API对接 2. **进阶提升阶段（3-4周）** - 掌握Vuex状态管理 - 学习TypeScript集成 - 实战项目：电商商品管理系统 ### 三、精选学习资源 || 资源类型 | 推荐内容 | 特点 | |---|---|---|---| |1|视频教程|B站「尚硅谷Vue3教程」|项目驱动教学| |2|开源项目|vue3-element-admin|后台管理系统模板| |3|工具链|Vite + Pinia + VueUse|现代开发套件| ### 四、典型问题解决方案 1. **响应式数据失效** 使用`toRefs`解构props： ```javascript import { toRefs } from 'vue' export default { setup(props) { const { title } = toRefs(props) return { title } } } ``` 2. **组件通信优化** 优先使用provide/inject代替多层prop传递
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值