| 后台-系统设置-扩展变量-手机广告位-内容正文顶部 |
nuxt开发指南
nuxt框架的介绍
Nuxt.js是基于vue的服务器端渲染框架，常用来做SSR(服务器端渲染)。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息，利于SEO的优化。
服务器渲染和客户端渲染
- 服务器端渲染：服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成HTML字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的HTML内容，不需要为了生成DOM内容自己再去跑一遍JS代码。
- 客户端渲染：客户端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端客户端，然后根据html上的JavaScript，生成DOM插入html
asyncData用法
nuxt如果想要在服务器端获取并渲染数据，asyncData方法能够在渲染组件之前异步获取数据
asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据并返回给当前组件
exportdefault{
data(){
return{project:'default'}
},
asyncData(context){
return{project:'nuxt'}
}
}
命令与部署
在package.json中存放一些命令
"scripts":{
"dev":"nuxt",//本地启动项目
"build":"nuxtbuild",
"generate":"nuxtgenerate"
}
- build打包生成的是动态页面
- 使用generate打包后每个对应的页面都会生成一个html
nuxt框架页面路径规范
nuxt会根据pages下的文件自动生成路由并引入，支持vue-router的基础路由，动态路由，嵌套路由等。因此文件的命名有一些规范
在Nuxt框架自带的pages文件夹下创建文件夹以及页面
- 如果跳转的url地址(路由地址)是“/help”，那么框架就会自动帮我们处理，跳转到pages文件夹下hplp文件夹下的index.vue界面，命名要严格按照这种格式命名。
- 如果跳转的url地址是后面接了id，表示是动态路由，参数是可选的。那么文件名前面要加“_”下划线符号
- 如果新建的页面组件，不需要生成页面路由，那么文件名前面要加"-"中杠符号
- 嵌套路由的使用，需要在pages下添加一个同名的vue文件，用来存放子视图组件
pages/
--|help/
----_id.vue
----index.vue
--|help.vue
以上就是易族智汇javashop整理的关于nuxt开发指南的内容了，希望可以帮助到大家。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
