【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.
1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

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

1
2
3
4

然后执行

npm init vue@latest

一直回车即可

创建后我们查看下

我们run一下

npm run dev
1

报错？

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

npm install
1

npm run dev
1

打开浏览器

vue3安装成功

二、编写代码

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

好的 没的毛病

现在进行打包

cnpm run build
1

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

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

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

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