第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目

已于 2024-04-30 14:37:40 修改
阅读量1k 收藏 9
点赞数 35
分类专栏： Vue学习之路 文章标签： vue
于 2024-04-27 15:59:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SugarToffee/article/details/138251384
版权

第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目
第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解
第Ⅰ章-III Vite 创建vue3 项目
第Ⅰ章-IV npm yarn pnpm 包管理器
第Ⅰ章-V package.json文件详解

第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目

Vue是一款用于构建用户界面的 JavaScript 渐进式框架1。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue3 发布于2020年9月18日。

Vue3特点

  • 更快的渲染速度 优化了编译和运行时性能，虚拟DOM的算法，静态分析2和摇树优化3的方面。
  • 更小的包 引用了ES模块的代码拆分技术，使得库的体积更小，提高了页面加载速度和性能。
  • TypeScript支持
  • 组合式API Composition API 提供了更灵活，更强大的组件复用和逻辑阻止方式，使得组件逻辑更易于维护和理解。
  • 先进的响应式系统

MVVM

一种软件架构模式，用于构建用户界面。它将用户界面分为三个部分。

  • Model 模型。代表应用程序的数据和业务逻辑。它负责管理数据的状态和行为，单不直接处理用户界面的显示。
  • View 视图。视图式用户界面的可视化部分。负责展示数据和与用户交互。视图通常是由用户界面元素组成。
  • ViewModel 视图模型。模型与视图之间的连接层。它负责将模型的数据转换为试图可以现实的格式，并处理用户界面的交互行为。视图模型通常包含了试图需要展示的数据，并提供了一些方法和命令处理用户输入和触发相应操作。

Vue中的体现

  • 数据绑定 支持双向数据绑定，可以将视图和视图模型中的数据进行绑定，使得数据变化自动反映到视图上，同时用户在视图上的操作也能更新到视图模型中的数据。
  • 指令和事件处理 轻松地在视图模板中处理用户地数据和交互行为。这些指令和事件处理可以直接绑定到视图模型中的方法或属性，实现视图和视图模型之间的交互。
  • 计算属性和监听器 根据视图模型中的数据动态计算属性地值，并在数据发生变化时出发相应地操作，实现视图模型地逻辑处理功能。

Vue3 安装

安装Node.js

使用Vue.js，需要使用npm(Node.js包管理器)来安装Vue CLI(Vue命令行界面) Vue CLI是一个官方提供的工具，用于快速搭建Vue项目，管理依赖项，构建项目。Vue CLI本身是基于Node.js运行的。

Node.js官方网站

Vue3 需要Node.js 16.17.0或更高的版本

使用npm或yarn安装Vue3

npm 安装node包含了npm
安装 yarn

npm install -g yarn

npm 安装vue3

npm install vue@next

yarn 安装vue3

yarn add vue@next

提示：这种方式不支持其他附加功能 ts支持 vuex vue router 插件系统等等。

Vue Cli创建一个Vue3项目

npm 安装vue cli

npm install -g @vue/cli

yarn 安装vue cli

yarn global add @vue/cli

使用Vue Cli 创建 新的Vue3项目

vue create my-project

可以选择自定创建
在这里插入图片描述

  1. Babel: es6转es5
  2. TypeScript:支持ts
  3. Progressive Web App (PWA) Support:渐进式web应用
  4. Router:路由
  5. Vuex:管理状态
  6. CSS Pre-processors：CSS预处理
  7. Linter / Formatter：代码规范
  8. Unit Testing：单元测试
  9. E2E Testing：端到端测试
cd my-project
npm run serve

cd my-project
yarn serve

这样一个简单的 vue3项目就创建好了。

  1. 允许开发者在需要的时候逐步采用其功能的框架。 ↩︎

  2. 编译和打包阶段，对代码进行分析并提取出有用的信息，而无需实际执行代码。在前端中，静态分析通常用于检测潜在的问题，优化代码结构，查找未使用的代码等。从而帮助开发者发现潜在的错误。 ↩︎

  3. 打包阶段，确定哪些代码不会执行，最终从打包文件中删除，减少打包文件体积。 ↩︎

顾西昂
关注
  • 35
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-simple-uploader for vue3源码
04-22
vue3大文件分片上传源码，基于vue-simple-uploader进行修改
第Ⅰ章-III Vite 创建vue3 项目
顾西昂的博客
04-28 406
因为Vite支持在index.html文件中使用模板语法和插值，这样可以更灵活地配置入口文件。快速的冷启动 利用了原生ES模块的特性，在冷启动时，只需要构建和服务当前需要的模块，而不是整个应用程序。这大大减少了启动时间，使开发者可以更快地惊醒开发和调试。热模块替换(HMR) 可以在不刷新整个页面的情况下实时修改后地模块，提高了开发效率。最佳的安装方式将vite作为项目的开发依赖。npm 卸载全局安装vite 清理缓存。yarn 安装vite 开发依赖项。npm 安装vite 开发依赖项。
第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解
顾西昂的博客
04-27 797
一.自定义创建项目配置二.文件结构publicindex.htmlrobots.txtsrcassetscomonentsrouterstoreviewsApp.vuemain.tstests.gitignoreyarn.lock选择自定义后Babel: es6转es5TypeScript:支持tsProgressive Web App (PWA) Support:渐进式web应用Router:路由Vuex:管理状态CSS Pre-processors：CSS预处理。
第V章-Ⅰ Vue3路由vue-router初识
顾西昂的博客
05-04 1161
路由组件就像任何其他 Vue 组件，但它们通常与路由路径关联。每个路由规则映射到一个组件。path:'/',
第Ⅱ章-Ⅰ Vue3基础语法
顾西昂的博客
05-02 327
在这里，v-bind:src 和 v-bind:alt 分别绑定了 imageUrl 和 imageAlt 变量的值。@click 是 v-on:click 的缩写，用于将 click 事件绑定到 handleClick 方法。在这个示例中，{{ message }} 插入了 message 变量的值。在这里，v-if 根据 isVisible 变量来决定是否渲染 div。在这里，v-for 根据 items 列表来循环渲染 li 元素。用于将组件的属性或DOM元素与变量绑定。
第IV章-Ⅰ Vue3组件与组件通信
顾西昂的博客
05-03 1654
单向数据流（Props）：保证了数据的可预测性和管理性，是最常用的通信方式，适用于父子组件。事件通信（Emit）：允许子组件向父组件发送消息，是实现子向父通信的标准方法。跨层级通信（Provide/Inject）：解决了深层嵌套组件间的通信问题，避免了繁琐的 props 传递。
第III章-ⅠVue3进阶语法
顾西昂的博客
05-03 1477
ref 用于创建一个响应式的引用对象，其主要用途是维持一个内部值，并确保 Vue 的响应式系统能够追踪到其变化。区别：Vue 3 中的 computed 使用组合式 API 进行定义，而 Vue 2 中是通过选项 API 的 computed 属性进行定义。区别：Vue 3 中的 watch 使用组合式 API 定义，而 Vue 2 中是通过选项 API 的 watch 属性定义。v-model 修饰符在 Vue 3 和 Vue 2 中的作用一致，但 Vue 3 提供了更灵活的多属性绑定方式。
第VI章-Ⅰ Vue3生命周期探讨
最新发布
顾西昂的博客
05-05 402
在 Vue 3 中，生命周期钩子定义了组件在其创建、挂载、更新和销毁等过程中会执行的操作。这些钩子允许开发者在组件不同的阶段执行特定的代码逻辑。以下是 Vue 3 生命周期钩子的详细解释，以及如何在选项式 API 和组合式 API 中分别使用它们。选项式 API：生命周期钩子直接在组件对象上定义。组合式 API：生命周期钩子作为函数引入，并在 setup 函数中调用。
第Ⅰ章-VI 熟练掌握ES6新特性以及盲点
顾西昂的博客
05-01 1093
ECMAScript6(简称ES6)是Javascript语言的第六个版本，2015年发布，也称为ESMAScript2015或ES2015。它引入了大量的新特性，新语法和新功能。极大的丰富了JavaScript语言的能力，使其更适合现代化开发。由于 Symbols 是唯一且不可枚举的（不会出现在 for…getAge() {// 输出 30// 只输出 "name"symAge 属性通过 Symbol 添加，不会出现在 for…in 等枚举中，因此可以用于定义私有属性。
第Ⅰ章-V package.json文件详解
顾西昂的博客
04-29 1459
必须时唯一的。并符合npm对名称的命名规则在发布到npm registry[^1] 时会用作包的标识符[^1] npm用来存储和管理软件包的几种式存储库使用语义版本控制 如1.0.0常用的脚本包括 start(启动项目) test(运行测试) build(构建项目) preview(vite提供的轻量级预览服务器 预览)},vite-tsc 这一步运行TypeScript编译器tsc确保项目在Node.js12以上版本运行。
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev ...
vue3-treeselect:vue 3的树选择组件（下一个）
04-13
vue3树选择 具有嵌套选项的多选组件支持 。感谢及其源代码和库，以此作为vue 2的基础。 从他的资料库中取得重大变化： 属性value => modelValue 事件input => updated:modelValue 现在将插槽与特征带有嵌套选项的...
vue-notification:使用Vue3的NotificationToast组件
03-28
@ dafcoe / vue-notification 使用Vue3构建的易于使用，可自定义的通知/吐司库。 在页面上查看操作。安装使用yarn或npm将软件包安装为项目依赖项： $ yarn add @dafcoe/vue-notification--- or ---$ npm install --...
awesome-vue-3：与Vue 3相关的精选精彩清单
02-06
awesome-vue-3：与Vue 3相关的精选精彩清单
vue-cli3.X快速创建项目的方法步骤
10-15
主要介绍了vue-cli3.X快速创建项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
datav-vue:一个基于Vuejs3的数据可视化（DataV）项目
04-10
一个基于 Vue3.x 的数据可视化项目 :flexed_biceps: Vue 3. 0+ :fire: TypeScript 4.2+ 安装与使用 # 初始化项目 yarn bootstrap # 跑起来！ yarn serve # 构建发布 yarn build 创建组件 yarn gc [component name] ...
vue3-captcha（vue3行为验证码）
06-20
vue3-captcha（vue3行为验证码）
vue-cli创建vue3项目
08-10
使用vue-cli创建Vue.js 3.0项目的步骤如下： 1. 首先，确保你已经安装了Node.js和npm（Node.js的包管理器）。 2. 打开命令行终端，并通过以下命令全局安装vue-cli： ``` npm install -g @vue/cli ``` 3. 通过以下命令检查vue-cli的安装是否成功： ``` vue --version ``` 4. 在命令行终端中进入你想要创建项目的目录，并执行以下命令来创建一个新的Vue.js 3.0项目： ``` vue create my-project ``` 其中，my-project是你想要给项目命名的名称，你可以根据自己的需求进行修改。 5. 在创建项目的过程中，你可以选择手动配置项目或者使用默认配置。如果你选择手动配置项目，你可以按照提示逐步选择所需的配置项。 6. 当项目创建完成后，进入项目目录： ``` cd my-project ``` 7. 最后，通过以下命令来运行Vue.js 3.0项目： ``` npm run serve ``` 这将会启动一个开发服务器，并在浏览器中显示你的Vue.js应用程序。 通过以上步骤，你就成功使用vue-cli创建了一个Vue.js 3.0项目。你可以按照Vue.js的开发文档进行开发，并且使用vue-cli提供的命令行工具来进行构建和打包。123 #### 引用[.reference_title] - *1* *3* [Vue-cli创建Vue3项目](https://blog.csdn.net/weixin_43551923/article/details/130935438)[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^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）](https://blog.csdn.net/m0_46374969/article/details/120291155)[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^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值