加载中......
输入验证码,即可复制
微信扫码下载好向圈APP, 登陆后即可进入消息页面查看验证码
只需要3秒时间
前言

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 包,如下图:

2022年最新Vue项目搭建教程-1.jpg

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

2022年最新Vue项目搭建教程-2.jpg

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

2022年最新Vue项目搭建教程-3.jpg

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项目就创建好了。

2022年最新Vue项目搭建教程-4.jpg

接下来可以按照提示,启动项目。
cd vue-demonpm installnpm run dev在ide中启动项目
在VCSode中打开刚创建的Vue项目目录,如下图:
打开终端,输入以下指令:
npm install
2022年最新Vue项目搭建教程-5.jpg

稍等片刻,待所有的包安装完成后,在终端输入以下指令:
npm run dev
2022年最新Vue项目搭建教程-6.jpg

看到以上提示,项目启动成功。
打开浏览器,在地址栏输入 http://localhost:3000 即可打开项目。全新的Vue3初始页面,如下图:

2022年最新Vue项目搭建教程-7.jpg

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

2022年最新Vue项目搭建教程-8.jpg
广告圈
7254 查看 0 0 反对

说说我的看法高级模式

您需要登录后才可以回帖 登录|立即注册

还没人评论此主题哦

相关阅读