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

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

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

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

https://zh.nuxtjs.org/guide/installation/

这是nuxt.js的中文文档网址，大家可以仔细阅读。接下来我们会根据官方文档的说明来创建一个项目。

我们需要借助npx来完成项目的创建，(npx在NPM版本5.2.0默认安装),如果没有安装，那么你可以参考下面的网址来进行安装。
https://www.npmjs.com/package/npx

使用命令：

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 <项目名> 的方式创建。

第一步，会询问我们项目的名称，这里我们可以回车确认不进行修改，如果需要修改，在这里重新输入你想使用的项目名称即可。

其中 Linter/Formatter 是格式化规则插件。

后面的一个选项我就不再列了，根据你的喜好来设置。

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

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

yarn create nuxt-app <项目名>

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

这里我们先不管为什么错误，我们首先使用npm替代来进行，命令：

npm init  nuxt-app test-app

结果可以正常的创建项目：

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

打开错误中给出的链接地址:

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

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

运行：

 yarn run dev

在浏览器，输入：http://localhost:3000/ 访问项目。