nuxt.js的使用和开发,一款vue基于服务器SSR渲染工具

更新日期: 2019-08-10阅读: 19.6k标签: nuxt

Nuxt 是一个基于 vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器,推荐尝试。目前Nuxt.js官方文档目前已经覆盖了大部分常用需求 , 这篇文章主要讲nuxt工程中一些需要注意的知识点,以及一些比较常用的功能介绍。


安装和部署

npm install -g vue-cli   //安装vue-cli架子

vue init nuxt-community/starter-template <project-name> //安装nuxt

npm run dev //开发运行, http://localhost:3000

服务器部署:(需要安装node环境和pm2工具)

npm install pm2 -g //强大的node进程管理器

npm run build

npm start //需要先配置package.json,配置如下:

"scripts": {
  "start": "pm2 start ./node_modules/nuxt/bin/nuxt-start -i max --attach",//-i max使用最大cpu核数,不需要可不取消
 },

//如果需要生产静态文件使用命令:npm run generate


nuxt.config.js的一些配置
  head: {
    script: [
      { src: '/' }/*外部js的引入,或者static中的js文件引入(/**.js)*/
    ]
  },
  env: {
    url: 'http://***.com' /*全局asyncData({env})的配置,比如请求头URL常量*/
  },
  /*代理IP的使用*/
  proxy: [ ['/api', {target: 'http://**.com'}] ], 
  build: {
    vendor: ['axios', 'qs'],/*多个地方引用,防止多次打包*/
    }
  }
//其他配置请看官网文档


nuxt添加静态文件

当我们在使用nuxt的时候,网站可以会遇到一部分是动态生成,而另一部分直接就是静态文件,在nuxt的文件配置下static目录,直接把文件放入static目录下,就可以通过域名或者IP(/对应的文件名)直接访问。


过滤器的使用配置 plugins/filter.js
import Vue from 'vue'
export function trim (str) {
  return str.replace(/(^\s*)(\s*$)/g, '')
}
const filters = {
  trim
}
export default filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

使用{{string | trim}},需要在nuxt.config.js 配置 plugins: [ '~plugins/filters.js' ]


公用方法的配置 plugins/globle.js
import Vue from 'vue'

Vue.mixin({
  methods: {
    /* 设置标题描述 */
    $setseo (title, content) {
      return { title: title, meta: [ { hid: 'description', name: 'description', content: content } ] }
    },
}

需要在nuxt.config.js 配置 plugins: [ '~plugins/globle.js' ],页面的使用方法:

head(){
   return this.$setSeo('title‘,’des')
}


中间件的使用

比如说用户未登录状态下,通过路由闯入了需要鉴权的页面,我们可以自定义一些错误:  

// auth.js
export default function ({ store, error }) {
// 可通过组件的props接收error信息
  if (!store.state.token) {
    error({
      message: 'cookie失效或未登录,请登录后操作',
      statusCode: 403
    })
  }
}

在组件中使用该中间件: 

export default {
  middleware: 'auth',
  // 还可以把用户重定位到登录页
  fetch ({redirect, store}) {
    if (!store.state.token) {
      redirect('/login')
    }
  },
}


第三方库的引用plugins/element-ui.js

官方不屏蔽你正常的import,但有提供插件模式且推荐使用插件模式 

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
/*nuxt.config.js配置*/
plugins: [{src: '~plugins/element-ui', ssr: true}]
css: ['element-ui/lib/theme-default/index.css']
vendor: ['element-ui']
/*按需加载 在build下配置babel,安装插件babel-plugin-component*/
babel: {
  plugins: [['component', [
    {
      'libraryName': 'element-ui',
      'styleLibraryName': 'theme-default'
    },
    'transform-async-to-generator',
    'transform-runtime'
  ]]],
  comments: false
}


Window 或 Document 对象未定义?

这是因为一些只兼容客户端的脚本被打包进了服务端的执行脚本中去。必须使用该变量process.browser,在引入的地方:

if (process.BROWSER_BUILD) {
  let lib=require('external_library')
}

nuxt.config.js 文件中配置 vendor 配置项 :

build: {
    vendor: ['external_library']
}


链接: https://www.fly63.com/article/detial/7

nuxt.js中添加统计代码,添加百度统计,或者google的统计

在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件。

nuxt.js中全局变量的设定_nuxt如何实现全局初始化功能

在组件和布局中需要使用到相同的数据,改数据需要在nuxt初始化时候获取,而且仅从服务器端获取一次即可。那么该如何实现nux全局初始化功能呢?可以通过vuex来管理全局的一个状态的数据,Nuxt.js 的渲染流程,最先调用的即是 nuxtServerInit 方法。

使用Nuxt.js创建服务器端渲染的Vue.js应用程序

Nuxt.js基于名为Next的热门React库的SSR实现。 为Vue设计了一个名为Nuxt的类似实现。 熟悉React + Next组合的人会在应用程序的设计和布局中发现一些相似之处。 但是,Nuxt提供Vue特有的功能来为Vue创建强大且灵活的SSR解决方案。

使用nuxt.js官方脚手架构建koa2的es6编译问题

最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node

Nuxt.js部署应用的方式

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。静态应用部署就不说了,主要说说服务端渲染应用部署。每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。

Travis CI 部署遇到的问题? 部署怎么启动 nuxt服务

uxt打包的静态文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。Travis CI 部署到GitHub项目gh-pages分支上,打开页面发现引用资源404?

服务端预渲染之Nuxt

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular、React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据

nuxt框架中对vuex进行模块化设置

Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:Nuxt.js 支持两种使用 store 的方式:普通方式: store/index.js 返回一个 Vuex.Store 实例

Nuxt.js引用谷歌广告代码

最近另一个网站的谷歌联盟申请下来了,记录一下Nuxt.js如何引用谷歌广告的JS代码,当初找了好久。只配置nuxt.config.js文件就可以,下面贴出来。

Webstorm环境使用nuxt.js做开发,@ 和 ~ 别名配置

webstorm 设置@和~别名,有助于代码查看和跳转.在项目下创建一个webpack.config.js,内容如下;设置 IDE:webstorm -> file -> settings -> language & frameworks -> javascript -> webpack

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!