Vue学习（起步）-- Nuxt.js搭建美团网

欢迎阅览

作者介绍：
本人Java特工，代号：Cris Li ； 中文名：克瑞斯理
地址: https://www.jianshu.com/u/c508b0afaaee
CSDN地址: https://blog.csdn.net/jianli95
个人纯洁版博客: https://lijian69.github.io/blog/

---

Vue项目的创建

一、Vue项目的创建

本博客主要采用最新的Vue-cli4脚手架进行Vue项目的创建

1.安装Node.js

这一步比较简单，直接进入nodejs的官网，进行下载就行，如果你是windows的话，一路进行确认即可。
最后结束分别使用以下两个命令验证nodejs是否验证成功。

C:\Users\jian.li>node -v
v10.15.3
C:\Users\jian.li>npm -v
6.4.1

2.vue脚手架安装

这里因为npm下载的速度太慢，我们需要配置为淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后，采用 ** cnpm ** 指令进行vue-cli脚手架的安装，安装命令如下：

cnpm install -g @vue/cli
# OR
yarn global add @vue/cli

3.查看当前vue版本

查看版本
vue -V  #这里是大写的V

4.创建第一个vue项目

vue create project-name

当出现以下选择结构的图片时候，如果你是新手建议你选择default默认，enter即可；

image.png

三、项目创建好后

cd project-name // 进入项目根目录
npm run serve // 运行项目

四、在浏览器输入http://localhost:8080,就可以看到运行的界面了

Nuxt.js项目的创建

nuxtjs简介：

Nuxt项目的前期准备(后者最新版本即可)

image.png

nuxt2项目安装可以使用官方提供的脚手架create-nuxt-app,由于git bash无法上下选择，所以window用户建议用cmd来搭建项目，首先输入指令

$ npx create-nuxt-app mt-app
//mt-app替换成你需要的项目名

接下来会有官方提供的一些配置选项，我使用的是以下配置

image.png

项目的项目结构图如下所示：

image.png

序号	文件名	含义
1	assets	这里存放的静态资源,采用@import "@/a/b.scss"
2	Components	这里存放Vue的各种组件
3	Layouts	这里存放的时通用的页面模板填充
4	Page	Body页面的内容 一般除去header footer的页面，是由components中的vue组件组成的；并且它和Layout的页面模板组成整个页面

后续采用Nuxt.js实现美团网的搭建（敬请期待......）