创建vue3项目详细步骤(2022最新Vue3项目搭建教程)

 分类:vue教程时间:2022-08-20 07:30:01点击:

2022年最新Vue3项目搭建教程,2021年8月5日,Vue正式发布3.2版本,同时,Vue的作者尤雨溪还在个人微博称:“ < script setup > + TS + Volar = 真香 ”;2022年1月22日,Vue官方宣布Vue3成为了新的默认版本

如今的Vue3已经势不可挡,当然,搭建一个全新的Vue3项目也有了全新的方式,今天就带大家熟悉一下Vue3项目的全新搭建方式。

先决条件

熟悉命令行

安装node.js

搭建过程

找到一个你想要创建Vue项目的目录(本文以D:\i-work为例)。在此目录打开命令行,输入以下命令:

npm init vue@latest

回车,如果是第一次用这种方式创建Vue3项目,命令行会提示安装 create-vue 包,如下图:


输入【y】,确认安装。安装完成后会自动进入Vue项目创建,如下图:

接下来会让我们依次输入以下几个问题的答案,帮助创建项目:

Project name:项目名称,默认值:vue-project,可输入想要的项目名称,此处不建议中文。

Add TypeScript? 是否加入TypeScript组件?默认值:No。

Add JSX Support? 是否加入JSX支持?默认值:No。

Add Vue Router for Single Page Application development? 是否为单页应用程序开发添加Vue Router路由管理组件?默认值:No。

Add Pinia for state management? 是否添加Pinia组件来进行状态管理?默认值:No。

Add Vitest for Unit testing? 是否添加Vitest来进行单元测试?默认值:No。

Add Cypress for both Unit and End-to-End testing? 是否添加Cypress来进行单元测试和端到端测试?默认值:No。

Add ESLint for code quality? 是否添加ESLint来进行代码质量检查?默认值:No。

完成以上步骤,一个全新的Vue3项目就创建好了。

接下来可以按照提示,启动项目。

cd vue-demonpm installnpm run dev

在ide中启动项目

在VCSode中打开刚创建的Vue项目目录,如下图:

打开终端,输入以下指令:

npm install

稍等片刻,待所有的包安装完成后,在终端输入以下指令:

npm run dev

看到以上提示,项目启动成功。

打开浏览器,在地址栏输入 http://localhost:3000 即可打开项目。全新的Vue3初始页面,如下图:

到此为止,我们的Vue3项目就搭建完成了。新建的Vue3项目目录结构如下图:

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: