多數基于webpack構建的項目，編譯出來的html文件，資源文件都被打包到js中，這樣的頁面不利于seo 搜索引擎優化（Search Engine Optimization）冰爺內容到達時間（time-to-content，或者稱之為首屏渲染時長），也有很大的優化空間，引入Nuxt.js框架。

一、Nuxt簡介

? ? ? ?Nuxt.js是一個基于Vue.js的通用應用框架，通過客戶端/服務端基礎架構的抽象組織，Nuxt.js主要關注的是應用的UI渲染。

? ? ? ?Nuxt.js預設了利用Vue.js開發服務daunt渲染的應用所需要的各種配置。

　　【nuxt generate】 基于Vue.js的應用提供生成對應的靜態站點的功能。

二、Nuxt.js特性

　　1.基于Vue.js；

　　2.自動代碼分層；

　　3.服務端渲染；

　　4.強大的路由功能。支持異步數據；

　　5.靜態文件服務；

　　6.ES6/ES7語法支持；

　　7.打包和壓縮JS和CSS；

　　8.HTML頭部標簽管理；

　　9.本地開發支持熱加載；

　　10.集成ESLint；

　　11.支持各種樣式預處理器：SASS、LESS、Stylus等

三、使用

1.安裝，starter模板

vue init nuxt/starter <project-name>

如果沒有安裝vue-cli，需要先安裝

npm install -g vue-cli　

然后進入到項目文件夾?

cd <project-name>

安裝依賴

npm install

運行項目

npm run dev　

注： Nuxt.js會監聽pages目錄中的文件變更并自動重啟更新。

特別注意：node的版本（>7）不能太低，盡量高版本。

打開頁面localhost:3000可以看到

在coding之前先了解項目的結構

　　　　

對結構目錄的說明（下面紅色的標記的表示文件夾的名稱不可更改）

　　資源目錄assets 用于組織編譯靜態資源如LESS、SASS或者JavaScript.

　　組件目錄components用于組織應用的Vue.js組件。Nuxt.js不會擴展增強該目錄下的Vue.js組件，即這些組件不會像頁面組件那樣擁有asyncData方法的特性

　　布局目錄layouts用于組織應用的布局組件。

　　中間件目錄middleware用于存放應用的中間件。

　　頁面目錄pages用于組織應用的路由及視圖。Nuxt.js框架讀取該目錄下所有的.vue文件并自動生成對應的路由配置。

　　插件目錄plugins用于組織那些需要在根vue.js應用 實例化之前需要運行的JavaScript插件。

　　靜態文件目錄 static用于存放應用的靜態文件，此類文件不會被Nuxt.js調用Webpack進行構建編譯處理。服務器啟動的時候，該目錄下的文件會被映射至應用的根路徑 /下。

　　Store目錄store用于組織應用的Vuex文件。Nuxt.js框架集成了Vuex狀態樹的相關功能配置，在store目錄下創建一個index.js文件可激活這些配置。

　　nuxt.config.js文件用于組織Nuxt.js應用的個性化配置，以便覆蓋默認配置

　　package.json 文件用于描述應用的依賴關系和對外暴露的腳本接口

?

轉載于:https://www.cnblogs.com/fanlina/p/8309146.html

總結

以上是生活随笔為你收集整理的Nuxt(一) Nuxt初步认识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。