Nuxt 开发经验分享

Nuxt 开发经验分享

Nuxt 介绍

简单来说，Nuxt.js 是一个基于Vue的通用应用框架，采用SSR(Server Side Rendering 服务端渲染);目的是为了解决单页面应用的 SEO 问题；vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成HTML挂载于id为app的DOM元素上，这样会存在两个大问题：

1.由于页面内容是通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，也就是用户搜不到此网站的相关信息，不利于SEO；
2.资源请求量大，造成网站首屏加载缓慢，不利于用户体验

而我们公司做的网站刚好是内容性质的网站 爱德媒BlockADM~~~

Nuxt 安装

Nuxt.js 团队创建了脚手架工具 create-nuxt-app

 $ npx create-nuxt-app <项目名>  

前提是已经安装了vue脚手架搭建项目的环境，比如npm； npx在NPM版本5.2.0就已经默认安装了；在安装的过程中，它会让你进行一些选择，在集成的服务端框架之间进行选择，我的项目是选择None（Nuxt默认服务器）；选择喜欢的ui框架 根据实际项目选择；之后的我基本都是选择默认的了；安装完成之后 进入项目 npm run dev 启动项目

   $ cd <project-name>

   $ npm run dev

Nuxt 项目目录结构

实战经验

路由

nuxt按照 pages 文件夹的目录结构自动生成路由（vue需在 src/router/index.js 手动配置路由）

`

  pages/
  --| user/
 -----| index.vue
 -----| one.vue
  --| index.vue

`

Nuxt.js 生成对应的路由配置表为：

`

   router: {
     routes: [
      {
       name: 'index',
       path: '/',
       component: 'pages/index.vue'
     },
     {
       name: 'user',
       path: '/user',
       component: 'pages/user/index.vue'
    },
    {
       name: 'user-one',
       path: '/user/one',
       component: 'pages/user/one.vue'
     }
   ]
  }
`

引入本地css文件以及js插件

 `
 export default {
   mode: 'universal',
   head: {
    title: '爱德媒BlockADM-价值共享网络' || '',
     meta: [
      { charset: 'utf-8' },
       ],
     link: [
      { rel: 'icon', type: 'image/x-icon', href: '/logo_icon.png' }
     ]

    loading: { color: '#fff' },
  /* ** 全局样式引入 */
    css: [
      'element-ui/lib/theme-chalk/index.css',
      '~static/css/common.css',
     ],
  /*** 全局js */
    plugins: [

     { src: '~/plugins/main_client.js', mode: 'client' },
     { src: '~/plugins/main.js', mode: 'server' },
     '~/plugins/axios'
    ],
   }

 `

项目的全局css是放在static/css/common.css中 ，项目中用的js全局js，分为两个文件， 一个是在服务端渲染的，一个是在客户端渲染的，mode分别都不一样，这里是我踩过的坑 ，不过前端大部分的js都是在客户端；第二点 axios.js是自己封装了原本axios的文件，可以把它当作全局的js文件，所以把它挡在plugins中，然后再配置文件中引入

请求

Nuxt.js扩展了Vue.js,增加了一个叫 asycData 的方法，使得我们可以再设置组件的数据之前能异步获取或者处理数据，使用方法：

 ** 单个请求**

  ` 

   async asyncData (context) {
    let {data} = await context.$axios.get(`news/app/visitor/newsFlash/get`,{params: {id:context.query.id}});
    return {
      content:data.data.content,
      newsFlashTime:data.data.createTime,
      newsFlashTitle:data.data.title,
    }
  },
 
 `

其中content，newsFlashTime等 是自己定义的data中的数据

**并发请求**

 `
  async asyncData (context) {
    console.log(context);
    let [data,dataTwo,dataThree] = await Promise.all([
      context.$axios.get("user/app/visitor/getMemberInfoByUserId",{params: {userId:context.query.id}}),
      context.$axios.post("news/web/visitor/newsArticle/page",{
        pageNum: 1,
        pageSize: 3,
        sortType: 2
      }),
      context.$axios.post("news/web/visitor/newsArticle/page",{
        pageNum: 1,
        pageSize: 6,
        memberId: context.query.id
      })
    ]);

    return {
      personDate:data.data.data,
      allViewDate:dataTwo.data.data.records,
      articleDate:dataThree.data.data.records
    }
  },
       
 `

重点：context 来了解该对象的所有属性和方法。

先整理到这里吧 目前所遇到的问题是这些~~~