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

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'] }