【Nuxt.js搭建服务端渲染(SSR)网站】1.初体验
我的系统环境MAC，已安装好nodejs
1.安装
打开命令行，进入到想要安装项目的目录，我当前在 /Users/tom/private 目录下
创建的项目就叫 first-nuxt-app 吧
1.1 执行安装命令
npx create-nuxt-app first-nuxt-app1.2 稍稍等待一会，出现这样的提示，即将创建一个版本号3.4.0的nuxt应用，要求输入项目名称：
create-nuxt-app v3.4.0
✨ Generating Nuxt.js project in first-nuxt-app
? Project name: (first-nuxt-app)如果不输入，则使用括号里面的项目名称，回车确定
1.3 然后要求选择项目的语言
? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript按上下键可以选择语言，我使用JavaScript，回车确定
1.4 选择包管理工具
? Package manager: (Use arrow keys)
Yarn
❯ Npm同样，按上下键可以选择你习惯使用的包管理工具，我使用npm，回车确定
1.5 选择一个UI框架
? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Chakra UI
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js暂时只搭一个体验项目，就不用UI框架了，我选择None，回车
1.6 选择你想安装的模块
? Nuxt.js modules: (Press to select, to toggle all, to invert selection)
❯◯ Axios
◯ Progressive Web App (PWA)
◯ Content 多选项，上下键切换，空个键来选择或取消选择，这个是体验项目我就不选了，回车
1.7 一些检查工具
? Linting tools: (Press to select, to toggle all, to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint 不选了，回车
1.8 测试用例框架
? Testing framework: (Use arrow keys)
❯ None
Jest
AVA
WebdriverIO回车
1.9 渲染模式
Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
Single Page App肯定是SSR啦~，回车
1.10 部署目标
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/JAMStack hosting)默认Node.js，回车
1.11 后面还有一些 开发者工具、Github用户名、版本控制 的选择，统统默认回车
接下来就是一段等待时间
...
...
中途报了这个错（没报错的同学直接往下看第二小节）
/Users/tom/.npm/_npx/89479/lib/node_modules/create-nuxt-app/node_modules/sao/lib/installPackages.js:108
throw new SAOError(`Failed to install ${packageName} in ${cwd}`)
^
SAOError: Failed to install packages in /Users/tom/private/first-nuxt-app
at ChildProcess. (/Users/tom/.npm/_npx/89479/lib/node_modules/create-nuxt-app/node_modules/sao/lib/installPackages.js:108:15)
at ChildProcess.emit (events.js:209:13)
at maybeClose (internal/child_process.js:1021:16)
at Socket. (internal/child_process.js:430:11)
at Socket.emit (events.js:209:13)
at Pipe. (net.js:658:12) {
__sao: true
} 虽然报错，但是目录已经创建成功，我先尝试用npm install安装后运行没有成功跑起来，最后我的解决办法是删掉已生成的目录重新安装，将步骤 1.1 命令换成yarn安装，其余还是按正常步骤走
#npx create-nuxt-app first-nuxt-app 不使用npx
yarn create nuxt-app first-nuxt-app
其实这里没有根本解决报错的问题，网上也没有查到解决报错的办法，如果有了解的同学评论告诉我~谢谢
...
...
安装完成后展示如下信息
Successfully created project first-nuxt-app
To get started:
cd first-nuxt-app
npm run dev
To build & start for production:
cd first-nuxt-app
npm run build
npm run start
✨ Done in 160.05s.目录结构概览
2. 运行
在开发模式下运行起来~
2.1 执行命令
npm run dev第一次中途会出现这样一个选项
NuxtJS collects completely anonymous data about usage. 23:33:29
This will help us improving Nuxt developer experience over the time.
Read more on https://git.io/nuxt-telemetry
? Are you interested in participation? (Y/n) 大概是开发团队想收集一些信息以便更好地服务这样的，作为一个热爱开源支持希望产品做的更好的人我当然是选择 Y 啊
✔ Client
Compiled successfully in 4.20s
✔ Server
Compiled successfully in 4.29s
ℹ Waiting for file changes
ℹ Memory usage: 199 MB (RSS: 292 MB)
ℹ Listening on: http://localhost:3000/ 打出上述信息，就项目就跑起来了，访问一下localhost:3000看下~
好像也没啥特别的，那我们在浏览器再右键查看源代码看下渲染的代码，我们看到html源码已经跟常规vue打包的源码不一样了，内容提前写在了html里面
first-nuxt-app
first-nuxt-app
接下来再做个试验，修改展示的数据，看下效果
找到/pages/index.vue文件，增加如下代码：
页面测试效果如下：
查看源代码如下：
至此，示例项目体验完毕。
我是刚刚才接触到Nuxt.js，但是已经开始对后端渲染这样的技术产生很大的兴趣，近期也已经打算使用它来开发正式项目。
最后，在特定需求下后端渲染是很有用的，比如网站注重SEO的情况下又不想失去vue这样强大且便捷的开发框架的时候，Nuxt.js是个很好的选择。