介绍
这篇文章主要介绍Vue基于Nuxt。js实现服务端渲染,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>一、快速模板
在已经安装了vue-cli的前提下,可以快速创建一个nuxt的项目模板
vue init nuxt-community/starter-template MyProject的 其中MyProject是项目文件夹名称,可自定义
通过npm安装(似乎用<强>纱安装更顺利)安装依赖之后,可以直接npm开发运行在<强>开发环境强启动项目
默认启动的地址为http://localhost: 3000/,可以在<强>包。json 中添加以下配置来修改主机端口号
,“config":, {
“nuxt"才能:,{
,才能“host":,“0.0.0.0"
,才能“port":,“7788”;
,,}
}, 开发完成后执行npm运行构建打包代码,最后npm开始启动服务
<强>二、重要目录
生成的项目目录如下
大部分文件夹名称<强>都是nuxt默认保留的,不可修改
其中比价比较关键的目录有三个:
<强> 1。组件组件目录
一般用来存放<强>非页面级别强的组件,如页眉、页脚等公共组件
该目录下的组件具有常规vue组件的方法和特性,不会被nuxt。js扩展特性
<强> 2。布局布局目录
可以修改该目录下的违约。vue来修改默认布局
& lt; template>
,& lt; div>
& lt;才能my-header> & lt;/my-header>
& lt;才能nuxt/比;
& lt;才能my-footer> & lt;/my-footer>
,& lt;/div>
& lt;/template> 其中& lt; nuxt/比;是必需的,页面的主体内容会显示在这里(类似于根节点的& lt; router-view/祝辞)
此外还可以在目录下新增错误。vue作为错误页面,具体的写法可以参考官方文档
<强> 3。页页面目录
用于存放页面级别的组件,nuxt会根据该目录下的页面结构生成路由
比如上图中的页面结构,会生成这样的路由配置:
路由器:,{
,路线:[
{才能
,,,的名字:& # 39;指数# 39;
,,,路径:& # 39;/& # 39;
,,,组件:& # 39;页面/index.vue& # 39;
,,},
{才能
,,,的名字:& # 39;关于# 39;
,,,路径:& # 39;/关于# 39;
,,,组件:& # 39;页面/about.vue& # 39;
,,},
{才能
,,,的名字:& # 39;课堂# 39;
,,,路径:& # 39;/课堂# 39;
,,,组件:& # 39;页面/classroom.vue& # 39;
,,,孩子们:[
,,,{
,,,,路径:,& # 39;学生# 39;
,,,,组件:,& # 39;页面/教室/student.vue& # 39;
,,,,名字:,& # 39;学生# 39;
,,,},
,,,{,//定义带参数的动态路由,需要创建对应的以下划线作为前缀的,Vue 文件或目录
,,,,路径:,& # 39;:id # 39;
,,,,组件:,& # 39;页面/教室/_id.vue& # 39;
,,,,名字:,& # 39;classroom-id& # 39;
,,,}
,,,)
,,}
,)
} 此外,该目录下的vue组件还具备一些,Nuxt。js提供的特殊功能特性
其中<强> asyncData 强方法比较常用的支持异步数据处理
这个方法会在<强>页面组件每次加载之前被调用,然后获取数据并返回给当前组件
asyncData ({参数的不同之处是,error }), {
return 才能;axios.get (“api/文章/$ {id}”)
不要犹豫(才能(res),=祝辞,{
,,return {,名字:res.data.name}
})才能
.catch才能((e),=祝辞,{
,,错误({statusCode:大敌;404年,信息:,& # 39;not 发现# 39;,})
})才能
以前,} asyncData方法的第一个参数为上下文对象的背景下,具体属性可以查看这里
由于asyncData方法是在组件初始化前被调用的,所以在方法内是没有办法通过这来引用组件的实例对象
<强>三、使用插件
如果项目中还需要引入其他的第三方插件,可以直接在页面中引入,这样在打包的时候,会将插件打包到页面对应的js里面
但要是别的页面也引入了同样的插件,就会重复打包。如果没有需要分页打包的需求,这时候可以配置插件
