vue3新建项目

本文指导如何初始化Vue3项目并体验新特性。首先,确保安装最新VueCLI,然后通过命令行或图形化工具创建项目。接着,使用npm或yarn安装`@vue/composition-api`。在使用新特性前,需在项目中引入并使用`Vue.use()`安装插件,即可开始使用Composition API进行组件开发。

1.初始化项目

vue3中提供两种新建项目方法:

1、首先,我们确保安装了最新的Vue CLI

npm install -g @vue/cli
#OR
yarn global add @vue/cli

2.创建项目

使用命令行新建

vue create my-project

#OR

使用vue3特有的图形化工具创建

vue ui

3.在项目中安装 composition-api 体验 vue3 新特性

npm install @vue/composition-api --save
#OR
yarn add @vue/composition-api

4.在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

安装插件后,您就可以使用新的 Composition API 来开发组件了。

### Vue3 新建项目必要的依赖安装 对于一个新的 Vue 3 项目而言,在创建之后通常会有一些基础的开发依赖项需要被安装,以确保项目的正常运行和发展。这些依赖不仅有助于构建过程中的效率提升,也能够支持更丰富的功能实现。 #### 基础依赖安装 当使用 `vue create` 命令初始化了一个新的 Vue 3 应用程序后,默认情况下已经包含了部分核心库的支持[^1]。然而为了更好地管理和扩展应用,建议手动添加一些常用的工具包: - **@vue/compiler-sfc**: 这是一个编译单文件组件(SFCs)所必需的peer dependency, 特别是在采用Vue 3 或者 Vue 2.7+ 的时候[^4]。 ```bash npm install -D @vue/compiler-sfc ``` - **TypeScript (可选)**: 如果计划在项目里引入 TypeScript,则可以通过如下命令来增加对它的支持: ```bash npm install typescript vue-tsc --save-dev ``` - **Router 和 Vuex/ Pinia**: 对于大多数实际应用场景来说,路由管理器(`vue-router`)以及状态管理模式(Pinia or Vuex)几乎是不可或缺的部分。Pinia 是官方推荐的状态管理库之一,适用于 Vue 3. ```bash npm install vue-router pinia ``` - **ESLint + Prettier**: 编码风格的一致性和代码质量控制非常重要,因此配置 ESLint 及其插件可以帮助团队成员遵循统一的标准;而Prettier则用于自动格式化代码。 ```bash npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev ``` - **Unit Testing Framework**: 单元测试框架如 Jest 或 Mocha 配合 Chai 断言库能有效保障应用程序逻辑无误。 ```bash npm install jest @vue/test-utils jsdom --save-dev ``` 以上就是一般情况下为一个全新的 Vue 3 项目准备的基础依赖清单。当然具体需求可能因不同业务场景有所差异,可以根据实际情况灵活调整所需模块的选择。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值