### 准备开始
* 本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性。
* 本章合适人群囊括了除已有开发经验人员以外的小白新手，从how、why、what三个角度来让大家理解并使用该技术..
#### nuxt(SSR Server Site Render)
---
*
* 前言：nuxt 前端路由沿用了history模式，通过pushState 更改url，进而局部渲染组件
* 而首屏刷新的时候，通过后端计算并模板渲染，再将html相应给客户端，一定程度解决了首屏白屏的问题
#### 整体预览
* __vue前端渲染照旧(history)__
* 后端渲染补充
* asyncData(context): 函数需要return {} ； 该数据会与组件内的data结合，在后端渲染组件前被调用
* fetch(context): 在组件被创建前调用，用来同步Vuex内store数据
* context属性
#### 便捷使用axios
* ## Install
```cmd
$ npm i -S @nuxtjs/axios @nuxtjs/proxy
```
## Nuxt.config.js
```js
{
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy: [
['/api/dog', { target: 'https://dog.ceo/', pathRewrite: { '^/api/dog': '/api/breeds/image/random' } }]
]
}
```
### Use Axios
```js
// 服务端
async asyncData({ app }) {
const ip = await app.$axios.$get('http://icanhazip.com')
return { ip }
}
// 客户端
created() {
this.$axios.get('url');
}
```
#### 关于部署
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oSrtvHrk-1578387019108)(assets/1530797943839.png)]
* 1. ```npm run build ```
2. ```cd .nuxt/dist```
3. 配置package.json文件 scripts ,添加一项 ```start-spa: "nuxt start --spa"```
4. 服务端渲染: ```npm run start```(run可以省略)
5. 单页应用: ```npm run start-spa```
__写再最后__
为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：??1018453829.欢迎大家进群交流讨论，学习交流，共同进步。
有些人对学习充满激情，但是缺少方向，而在浩瀚的知识海洋中看似无边无际，此时最重要的是要知道哪些技术需要重点掌握，避免做无用功，将有限的精力及状态发挥到最大化。
最后祝福所有遇到瓶颈且不知道怎么办的前端程序员们，祝大家在往后的工作与面试中一切顺利。
