nuxt.js相关随笔

对于nuxt.js从未接触，对于项目需要进行零散了解，作此归纳，以下都是一个新手的拙见与理解，有不同意见欢迎提出，但请勿喷。

一.项目创建

　　npx create-nuxt-app projectName

　　npx在NPM版本5.2.0以上默认安装，而安装node.js时会自带安装npx。

　　项目创建完成之后进入对应文件路径的cmd窗口，运行命令npm run dev启动项目。项目启动成功之后输入127.0.0.1:3000进入项目（nuxt项目由于是运用了SSR渲染，所以在项目创建之初就自带了一个基于node.js的内置服务器，运行项目其实很大程度来说就是运行这个内置服务器，通过内置服务器来对我们项目的页面进行服务端渲染，也就是SSR渲染，以此来达到搜索引擎的爬虫来爬取我们网站上面的关键词，网站标题，网站描述等信息，以此来更好的利于网站的SEO优化。）

二.nuxt的路由。

1.nuxt在创建项目时会自动生成一个page的文件夹，在里面新建vue文件便会自动生成对应路由，譬如在page中新建了一个名为test.vue的文件，那个项目运行后127.0.0.1:3000/test就是test页面内容

2.如果需要创建二级路由则需要在pages中创建新文件夹，在新文件夹中新建vue文件即可，譬如在pages中新建一个子文件夹test，在里面新建一个test.vue的文件，那么127.0.0.1:3000/test/test就是该页面内容

三.头部信息的添加我个人用到的有两种方式：

1.nuxt.config.js中公用添加。

2.各页面单独添加。

添加方式：在export default{}中添加

head: {

　　title: 'my website title',

　　meta: [

　　　　{ charset: 'utf-8' },

　　　　{ name: 'viewport', content: 'width=device-width, initial-scale=1' },

　　　　{

　　　　　　hid: 'description',

　　　　　　name: 'description',

　　　　　　content: 'my website description'

　　}],
}

若需要通过请求后台API获取关键词信息和其他头部描述信息，则只需要通过在export default{}中添加请求代码即可，
请求方式如下：

async asyncData({ params }) {
    let { data } = await $axios.get("接口API");
    return { keyWords: data.resData };
    error(params);
},

此时keyWords便是你请求获取的数据，然后将数据替换到head对应位置即可，譬如我的关键词信息只需要将我上面代码中的"my website description"替换为this.keyWords即可。

 

四，对于第三方插件的引入

如果需要引入第三方插件，则需要通过npm或者cnpm下载资源之后引入。

1.首先在生成plugins文件夹，该文件夹就是用来存放引入第三方插件与配置信息的js文件，譬如swiper插件，我引入swiper的包，做好相关配置之后命名为vue-swiper.js。

2.然后在nuxt.config.js中的plugins:[ ]代码块中加入引入代码即可，实例如下：

plugins: [
    {
      src: "~/plugins/vue-swiper.js",
      ssr: false
    }
]

其中src为你的第三方插件的引用与配置js文件路径，ssr表示是否需要在服务器端就开始进行渲染，一般都填false，因为对于前端常用的第三方插件来说大部分都是基于window或者document的，但是服务端没有window与document，这样就会导致项目报错，对于第三方插件的引入最常见的错就是window或者document is not found或者undefined。

3.对于只需要在某一页面引入的第三方插件也可以在vue文件中的script标签中用import的方式进行引入。