nuxt引入js_Nuxt.js实践篇

nuxt.js

追求完美，相信大家都是这样的。因为前后端分离的弊端性，在项目构建时，浏览器并不会捕捉到项目的内容，所以开始，笔者决定引入nuxt.js文件来配合vue完成Server Slider Render博客系统开发。服务端渲染以下简称SSR,不知道nuxt的童鞋可以去nuxt官网了解一哈。

声明：一下代码案例结合vue理解。

第三方插件的使用？

刚入坑，感觉寸步难行。想运来的使用方式，编辑器并不会报错。但是浏览器却报的nuxt错误。

后来经过几十根头发的代价换来了插件的正确使用方式

demo引入第三方的特效插件

npm install vue-particles --save-dev

需要现在plugins中写一个第三方文件的js文件，这里是笔者引入的一个vue的特效的插件，

import Vue from 'vue'import VueParticles from'vue-particles'Vue.use(VueParticles)

在nuxt.config.js中进行引入

/*** Plugins to load before mounting the App*/plugins: [

{src:'@/plugins/element-ui',ssr:true},

{src:'~plugins/vue-praticles',ssr: false}

],

这里需要补充的是,ssr为是否开启SSR

最后在组件中就可以使用：

>

最后查看效果如图：



效果如上，成功引入。

补充这个时候发现是没问题，但是当我们更改dom节点，放到到全屏的时候，依然可以，但是控制台爆出vue警告：

commons.app.js:13349 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing

. Bailing hydration and performing full client-side render

这个坑，真的坑了我好久，最后才发现，有些插件是不支持SSR的，刚好vue-partiles就是其中之一。

解决办法:引入时通过no-ssr标签包裹就

>

此组件只在客户端呈现，意味着，使用该组件包裹的内容都不属于SSR，在网页源码中都不可见。这点需要注意。

路由的配置

前言：这里要区别一下vue的路由，vue路由可自行配置，灵活方便。而nuxt构建的项目，路由的配置则是由pages文件夹目录生成。

pages目录自动生成路由

直接上图，所谓一图顶千言：



layouts

这个文件夹在路由的配置中也扮演了相当重要的角色。它又是干什么的呢？