Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。
我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。
为了快速入门,Nuxt.js 团队创建了脚手架工具 create-nuxt-app。
现在以nuxt.js@2.14版本为例,说明如何Nuxt创建项目的。
确保安装了 npx(npx 在 NPM 版本 5.2.0 默认安装了):
$ npx create-nuxt-app <项目名>
或者用 yarn :
$ yarn create nuxt-app <项目名>
它会让你进行一些选择:
1、programning language选择编程语言,这里选择JavaScript;
![](https://img-blog.csdnimg.cn/20200915155855405.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
2、Package manager, 选择安装包管理工具,这里选择yarn;
![](https://img-blog.csdnimg.cn/20200915160129643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
3、UI framework选择UI框架,这里选择Ant design Vue
![](https://img-blog.csdnimg.cn/20200915160408135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
4、 Nuxt.js modules,选择Nuxt.js模块,这里三个全选;
![](https://img-blog.csdnimg.cn/20200915161110810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
5、 Linting tools;选择检查工具,这里选择全选;
![](https://img-blog.csdnimg.cn/20200915161242563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
6、 Testing framework选择测试框架,这里选择jest
![](https://img-blog.csdnimg.cn/20200915161508926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
7、Rendering mode渲染模式,这里选择通用模式,使用nuxt的目的就是要利于ssr,因此选择通用模式。
![](https://img-blog.csdnimg.cn/20200915162010260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
8、 Deployment target部署目标,这里选择serve,服务端部署
![](https://img-blog.csdnimg.cn/20200915162408262.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
9、 Development tools开发工具,这里全选
![](https://img-blog.csdnimg.cn/20200915162745104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70)
然后,一路回车,nuxt项目便可创建成功;