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

谁践踏了优雅 2023-09-23 13:17 64阅读 0赞

![在这里插入图片描述][a55a2ef5e9a24c35ab40edf2b3e5d8e0.png]

## 前言 ##

本来是打算结合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.

**具体操作**  
`桌面新建文件夹用于存放你创建的项目`  
![在这里插入图片描述][1cd0499f70ea4d3c93ce6c4ccb9ddc76.png]  
`打开cmd，定位到你的文件夹`

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

![在这里插入图片描述][ad548fe1f032404c8dcaa5f32e0cf6d0.png]  
`然后执行`

> npm init vue@latest

`一直回车即可`  
![在这里插入图片描述][eb4fb3ce431844c0b0eeaff9dff642b6.png]  
`创建后我们查看下`  
![在这里插入图片描述][2fbabb8ce3224f6b95222330af7595cb.png]

`我们run一下`

npm run dev

`报错？`  
![在这里插入图片描述][d7b3032ac4bd4f589fc87a05e241c671.png]  
`小问题别慌，因为路径错了`  
`cd一下新的路径，因为刚刚创了两个文件夹`  
`执行`

npm install

npm run dev

![在这里插入图片描述][a581269c88384079bab6ffd37a9c90b0.png]

`打开浏览器`  
![在这里插入图片描述][53fd9aa0daf74ed0849db300cacff0c5.png]  
`vue3安装成功`

## 二、编写代码 ##

我们修改一下欢迎界面为hello word![在这里插入图片描述][f63580c6f5a7402382060d713015d693.png]  
观察下前端  
![在这里插入图片描述][fe49969f50664c70860ee25b17f69761.png]  
好的 没的毛病

现在进行打包

cnpm run build

![在这里插入图片描述][34df3f16280545528b35e8b0fd91e49f.png]

打包后的文件在项目的dist目录下  
![在这里插入图片描述][9da81da43d9d4e26962457623f86c2e7.png]  
双击index.html看看，一片空白  
![在这里插入图片描述][32c39e0c42e6483bba5e0e11f09acd1b.png]

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

放到宝塔上或者有nginx、apache的环境即可打开  
![在这里插入图片描述][63d571e0ae0f4212830a4acdfba6914b.png]

[a55a2ef5e9a24c35ab40edf2b3e5d8e0.png]: https://img-blog.csdnimg.cn/a55a2ef5e9a24c35ab40edf2b3e5d8e0.png
[1cd0499f70ea4d3c93ce6c4ccb9ddc76.png]: https://img-blog.csdnimg.cn/1cd0499f70ea4d3c93ce6c4ccb9ddc76.png
[ad548fe1f032404c8dcaa5f32e0cf6d0.png]: https://img-blog.csdnimg.cn/ad548fe1f032404c8dcaa5f32e0cf6d0.png
[eb4fb3ce431844c0b0eeaff9dff642b6.png]: https://img-blog.csdnimg.cn/eb4fb3ce431844c0b0eeaff9dff642b6.png
[2fbabb8ce3224f6b95222330af7595cb.png]: https://img-blog.csdnimg.cn/2fbabb8ce3224f6b95222330af7595cb.png
[d7b3032ac4bd4f589fc87a05e241c671.png]: https://img-blog.csdnimg.cn/d7b3032ac4bd4f589fc87a05e241c671.png
[a581269c88384079bab6ffd37a9c90b0.png]: https://img-blog.csdnimg.cn/a581269c88384079bab6ffd37a9c90b0.png
[53fd9aa0daf74ed0849db300cacff0c5.png]: https://img-blog.csdnimg.cn/53fd9aa0daf74ed0849db300cacff0c5.png
[f63580c6f5a7402382060d713015d693.png]: https://img-blog.csdnimg.cn/f63580c6f5a7402382060d713015d693.png
[fe49969f50664c70860ee25b17f69761.png]: https://img-blog.csdnimg.cn/fe49969f50664c70860ee25b17f69761.png
[34df3f16280545528b35e8b0fd91e49f.png]: https://img-blog.csdnimg.cn/34df3f16280545528b35e8b0fd91e49f.png
[9da81da43d9d4e26962457623f86c2e7.png]: https://img-blog.csdnimg.cn/9da81da43d9d4e26962457623f86c2e7.png
[32c39e0c42e6483bba5e0e11f09acd1b.png]: https://img-blog.csdnimg.cn/32c39e0c42e6483bba5e0e11f09acd1b.png
[63d571e0ae0f4212830a4acdfba6914b.png]: https://img-blog.csdnimg.cn/63d571e0ae0f4212830a4acdfba6914b.png