黑马 Vue3学习 小兔生鲜项目1 创建项目

1.  首先进入vscode.自己创建一个专门的文件夹用来学习

我这边的是

 D:\wzzy\vue3shopping

注意，以后凡是与代码有关的，你的文件路径都不要出现中文字符！

2.  然后按Ctrl+J 打开命令行
输入node -v  按回车，检查node的版本，这边需要node的版本大于16

然后输入npm init vue@latest   按回车，然后系统会安装并执行 create-v

这将创建一个新的Vue项目，并对其进行初始化设置，然后是选择配置你的vue项目的配置，对于其中的一些配置选项，我解释一下:

"Add JSX Support?" 意思是“添加JSX支持？”。JSX是一种JavaScript语法扩展，用于编写React组件。在开发React应用程序时，需要在开发环境中添加对JSX的支持，以便可以正确编译和渲染React组件。

"Add Vue Router for Single Page Application development?"意思是：为单页应用程序开发添加Vue路由器？ Vue Router是Vue.js官方提供的路由管理器，可以帮助构建单页应用程序（SPA）。在开发Vue.js单页应用程序时，需要使用Vue Router来实现多个组件之间的页面切换和参数传递。因此，需要向开发环境添加Vue Router的支持，以方便开发人员使用Vue Router来构建他们的单页应用。

Pinia是一个用于Vue.js应用程序的状态管理库，提供了一种简单而强大的方式来管理应用程序中的状态。如果开发人员希望使用Pinia进行状态管理，则需要在开发环境中添加Pinia的支持。因此，选择"Yes"即表示要添加Pinia支持，而选择"No"则表示不添加支持。

Add an End-to-End Testing Solution?

no

Cypress
Playwright"

在软件开发中，端到端测试是一种测试方法，可以测试应用程序的完整流程，包括用户界面和后端系统之间的交互。如果开发人员希望添加端到端测试解决方案，则可以选择Cypress或Playwright之一。选择"No" 表示不添加该解决方案。在选择之后，可以通过使用箭头键来选择选项，并按下回车键来提交选择。

然后我们就配置好了我们的第一个vue项目。

看下图

然后我们先安装依赖，注意，我们要先打开新建的那个vue3项目，先在命令行里面输入

ls  按回车进行查询

这边我建的时候输入的是项目名是demo1

然后cd demo1 就打开了我的项目

 

然后在命令行里面输入： npm i

 按回车

 

然后等待依赖安装好 ，在终端输入npm run dev

就可以启动我们的项目了，这是可以按Ctrl+鼠标点击链接可以在浏览器上看到效果