<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          nuxt.js的使用和開發,一款vue基于服務器SSR渲染工具

          時間:?2019-08-10閱讀:?12072標簽:?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']
          }


          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/7

          使用Nuxt生成靜態網站

          靜態網站如今再次流行起來了。信息站和品牌宣傳站不再需要使用WordPress之類的內容管理系統來動態更新。使用靜態網站生成器,您可以從無源CMS,API

          精讀《Nuxtjs》

          Nuxt 是基于 Vue 的前端開發框架,這次我們通過 Introduction toNuxtJS 視頻了解框架特色以及前端開發框架的基本要素。nuxt 與 next 結構很像,可以結合在一起看

          Nuxt.js引用谷歌廣告代碼

          最近另一個網站的谷歌聯盟申請下來了,記錄一下Nuxt.js如何引用谷歌廣告的JS代碼,當初找了好久。只配置nuxt.config.js文件就可以,下面貼出來。

          Webstorm環境使用nuxt.js做開發,@ 和 ~ 別名配置

          webstorm 設置@和~別名,有助于代碼查看和跳轉.在項目下創建一個webpack.config.js,內容如下;設置 IDE:webstorm -> file -> settings -> language & frameworks -> javascript -> webpack

          nuxt框架中對vuex進行模塊化設置

          Nuxt.js 內置引用了 vuex 模塊,所以不需要額外安裝。Nuxt.js 會嘗試找到應用根目錄下的 store 目錄,如果該目錄存在,它將做以下的事情:Nuxt.js 支持兩種使用 store 的方式:普通方式: store/index.js 返回一個 Vuex.Store 實例

          服務端預渲染之Nuxt

          現在前端開發一般都是前后端分離,mvvm和mvc的開發框架,如Angular、React和Vue等,雖然寫框架能夠使我們快速的完成開發,但是由于前后臺分離,給項目SEO帶來很大的不便,搜索引擎在檢索的時候是在網頁中爬取數據

          Travis CI 部署遇到的問題? 部署怎么啟動 nuxt服務

          uxt打包的靜態文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很親切,就選擇了TravisCI部署。Travis CI 部署到GitHub項目gh-pages分支上,打開頁面發現引用資源404?

          Nuxt.js部署應用的方式

          Nuxt.js 提供了兩種發布部署應用的方式:服務端渲染應用部署 和 靜態應用部署。靜態應用部署就不說了,主要說說服務端渲染應用部署。每次在服務器上執行nuxt build,總是有如下報錯,并且jenkins會隨之掛掉。

          使用nuxt.js官方腳手架構建koa2的es6編譯問題

          最近在學用nuxt集成koa2做vue后臺,發現官方自帶腳手架搭建的koa2使用的仍是es5語法,如果想用es6怎么辦呢?這是由于自帶腳手架在構建koa2時默認的nodemon是沒有使用babel編譯的,所以我們首先需要在啟動命令后加上 --exec babel-node

          使用Nuxt.js創建服務器端渲染的Vue.js應用程序

          Nuxt.js基于名為Next的熱門React庫的SSR實現。 為Vue設計了一個名為Nuxt的類似實現。 熟悉React + Next組合的人會在應用程序的設計和布局中發現一些相似之處。 但是,Nuxt提供Vue特有的功能來為Vue創建強大且靈活的SSR解決方案。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网