【Vue3】搭建vue3项目以及环境

前言

本来是打算结合vue3和spring boot出一期登录项目实战的，但是由于vue3没有我想象的简单，最后阉割了下，后面我们通过uniapp小程序出一期

---

一、安装环境创建vue3项目

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令 (不要带上 > 符号)：

npm init vue@latest

然后创建项目名，一直回车nononono即可，如下所示

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

具体操作
桌面新建文件夹用于存放你创建的项目

打开cmd，定位到你的文件夹

C:\Users\MAC>cd C:\Users\MAC\Desktop\vue-project

C:\Users\MAC\Desktop\vue-project>

然后执行

npm init vue@latest

一直回车即可

创建后我们查看下

我们run一下

npm run dev

报错？

小问题别慌，因为路径错了
cd一下新的路径，因为刚刚创了两个文件夹
执行

npm install

npm run dev

打开浏览器

vue3安装成功

二、编写代码

我们修改一下欢迎界面为hello word
观察下前端

好的 没的毛病

现在进行打包

cnpm run build

打包后的文件在项目的dist目录下

双击index.html看看，一片空白

是因为配有配置到nginx 或者是apache

放到宝塔上或者有nginx、apache的环境即可打开