![]()
欢迎阅览
欢迎阅览
作者介绍：
本人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 | 这里存放的时通用的页面模板<nuxt />填充 |
| 4 | Page | Body页面的内容 一般除去header footer的页面，是由components中的vue组件组成的；并且它和Layout的页面模板组成整个页面 |
后续采用Nuxt.js实现美团网的搭建（敬请期待......）
