vue+koa2 美团开发实战1-创建项目

痛定思痛。 2022-03-08 12:16 289阅读 0赞

这篇开始的文章我会从头开始学习着去做一个高仿美团的网站，内容包括前后端的一些基础知识，当然了，由于本人也是抱着学习的心态，将这个过程以博客的形式记录下来，其中的不足希望大家可以谅解。如果能有幸得到各位大神们的指点，荣幸之至。

在最近的一段学习过程中，感觉最深的就是将各种框架组合在一起的复杂性。索性，各路大神们为我们提供了一些十分便捷的轮子能够让我们进行快速开发。

首先来说一下我们采用的技术：vue+koa2，项目工程的创建我们会借助nuxt.js来帮助我们快速构建一个前后端一体的项目。

[https://zh.nuxtjs.org/guide/installation/][https_zh.nuxtjs.org_guide_installation]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]  
这是nuxt.js的中文文档网址，大家可以仔细阅读。接下来我们会根据官方文档的说明来创建一个项目。

我们需要借助npx来完成项目的创建，(npx在NPM版本5.2.0默认安装),如果没有安装，那么你可以参考下面的网址来进行安装。  
[https://www.npmjs.com/package/npx][https_www.npmjs.com_package_npx]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]

使用命令：

npm install -g npx
    yarn global add npx

安装完成后，在cmd窗口可以使用：

npx -v

来查看版本号，如果安装成功，你会顺利的看到npx的当前版本号。

使用npx来创建一个项目，语法如下：

npx create-nuxt-app <项目名>

官方文档还提供了另外一种创建方式：

yarn create nuxt-app <项目名>

接下来，我们分别使用这两种方式进行项目的创建。

**npx创建项目**

首先，进入我们要创建项目的目录，然后使用`npx create-nuxt-app <项目名>` 的方式创建。

![在这里插入图片描述][20190315110937344.png]  
第一步，会询问我们项目的名称，这里我们可以回车确认不进行修改，如果需要修改，在这里重新输入你想使用的项目名称即可。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 3]  
其中 Linter/Formatter 是格式化规则插件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 5]  
后面的一个选项我就不再列了，根据你的喜好来设置。

设置完成后会自动创建相关文件和安装相关的依赖包。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 6]

接下来，我们使用yarn方式进行创建。

yarn create nuxt-app <项目名>

按照这种方式创建，我得到了一个错误，这里先给大家贴出来。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 7]  
这里我们先不管为什么错误，我们首先使用npm替代来进行，命令：

npm init  nuxt-app test-app

结果可以正常的创建项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 8]

我们在来分析使用yarn的方式为什么会报错呢？

打开错误中给出的链接地址:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 9]

那么我们就先安装脚手架create-nuxt-app，然后创建项目，看看能否成功。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 10]

如果小伙伴们在使用中也遇到了这样的问题，不放按照上面的步骤试试。

运行：

yarn run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 11]

在浏览器，输入：[http://localhost:3000/][http_localhost_3000] 访问项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 12]

[https_zh.nuxtjs.org_guide_installation]: https://zh.nuxtjs.org/guide/installation/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]: /images/20220308/479ba5d24e6646b98797a15a3920cd55.png
[https_www.npmjs.com_package_npx]: https://www.npmjs.com/package/npx
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]: /images/20220308/e23d45f2d20c4f69b8319cbad51e8a0c.png
[20190315110937344.png]: /images/20220308/33edcea400aa4718b8c4d48d9c2d7d68.png
[2019031511125296.png]: /images/20220308/278c22bdf2d642db9c74d418eb1ffa4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]: /images/20220308/919e3a5fb6ac4a948be961c706c13438.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 3]: /images/20220308/96377a3e66d040d6be5c325e6ca59747.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 4]: /images/20220308/659179a846254ba18f66e7d886e20dee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 5]: /images/20220308/a6d15ed45c4c4d4eb0fb2e730cc3f656.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 6]: /images/20220308/4c73c26eed26484cad2396fc663873dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 7]: /images/20220308/465e6ba5d62e475884af47af7be3e318.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 8]: /images/20220308/5487e0d14836450fa8491fe045f73101.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 9]: /images/20220308/d068f4e8645348f9843aee7125254403.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 10]: /images/20220308/d5500afbf98d45aaab350fdd083f399f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 11]: /images/20220308/d241a07a74ae43cda85ed393a6175831.png
[http_localhost_3000]: http://localhost:3000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 12]: /images/20220308/c1195eda96bc45f2adf32ae23ea78465.png