初识nuxt.js

众所周知，如今前端SPA模式开发有三大框架三足鼎立：Angular、React、Vue；这三个框架非常优秀、并且生态各方面都比较好，而我独宠Vue。
其中原生Vue渲染模式是CSR，这种渲染模式不利于搜索引擎的搜录；而我司项目比较依赖搜索引擎的流量、加上后端初转前端的我只会Vue,搜索了大量资料、最终觉得Nuxt.js比较适合我这种新手。其已为开发者提供了许多配置，开箱即用，不费吹灰之力达到SSR效果。

什么是CSR和SSR呢？

估计许多不太熟悉的朋友不明白CSR和SSR是什么；简单来讲：
CSR：页面内容由JS在客户端浏览器渲染。
SSR：页面内容在服务器端渲染完成后返回给客户端

一句话总结nuxt.js是什么？

Nuxt.js是基于Vue 达到服务端渲染的一个框架。

怎么学习和使用Nuxt.js

首先学习Vue基础、把Vue看/练一遍后，然后就去啃Nuxt.js文档吧， 啃不动就结合着网上的文章和视频教程来；官网文档很重要。官网文档地址：https://zh.nuxtjs.org

创建Nuxt.js项目（脚手架）

此时，你已经安装好了Node、Npm、Npx（npx在安装npm时就自动安装了）

1. 运行Nuxt.js创建命令

npx create-nuxt-app <项目名>

2. 稍等一会后，会有如下提示操作：
   2.1. 输入当前项目名，回车即默认（myapp）

   
   
   当前项目名.png
   
   

   2.2. 输入当前项目描述，回车即默认（My W...）

   
   
   当前项目描述.png
   
   2.3. 输入当前项目作者，回车即默认（144157）
   
   当前项目作者.png
   
   2.4. 选择使用哪种包管理工具（我选择Npm）
   
   包管理工具.png
   
   

   2.5. 选择项目所需UI框架（常用的都有，我暂不选择）

   
   
   UI框架.png
   
   2.6. 选择集成服务端框架
   
   服务端框架.png
   
   2.7. 选择HTTP请求（我选择axios）
   
   axios.png
   
   2.8. 选择代码检查工具（我选择ESLint）
   
   ESLint.png
   
   2.9. 选择测试框架（我选择None）
   
   测试框架.png
   
   2.10. 选择Nuxt模式（我选择SSR）
   
   SSR.png
   
   

   2.11 这个随便选吧（对我来说没用）

   
   
   随便选.png

执行安装：

安装.png

3. 当看到如下图所示时，我们这个新Nuxt.js项目已经创建完成了。

   
   
   14.png

运行

1. 切换到项目文件夹

cd myapp

2. 本地开发运行

npm run dev

3. 项目编译

npm run build

4. 编译后运行

npm start

文件夹目录结构说明

|-- assets                          用来存放未编译的静态资源，如：CSS,JS, 图片,字体（返回时会以base64格式返回）
|-- comments                        用来存放项目中的组件
|-- layouts                         用来存放项目中的布局组件
|-- middleware                      用来存放项目中的中间件
|-- pages                           用来存放项目中页面视图及路由
|-- plugins                         用来存放项目中插件
|-- static                          用来存放项目中的静态资源
|-- Store                           用来存放项目中的Vuex状态树文件
|-- nuxt.config.js                  本Nuxt.js 项目的个性化配置
|-- package.json                    用于记录安装的依赖包和对外暴露的脚本接口

---

初始Nuxt.js先更到这里，下期更新常见配置。
转载请注明出处。