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