Vue.js通用應(yīng)用框架-Nuxt.js的上手教程
對(duì)于React，Vue構(gòu)建的單頁(yè)面應(yīng)用老說，SEO是一個(gè)眾所周知的問題。服務(wù)端渲染(SSR-server Side Render)是目前看來最好的解決辦法。React應(yīng)用有Next.js，對(duì)應(yīng)Vue的解決方案就是Nuxt.js。
1.簡(jiǎn)介
官網(wǎng)：https://nuxtjs.org/
GitHub：https://github.com/nuxt/nuxt.js
Nuxt.js 是什么？
Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。
通過對(duì)客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。
我們的目標(biāo)是創(chuàng)建一個(gè)靈活的應(yīng)用框架，你可以基于它初始化新項(xiàng)目的基礎(chǔ)結(jié)構(gòu)代碼，或者在已有 Node.js 項(xiàng)目中使用 Nuxt.js。
Nuxt.js 預(yù)設(shè)了利用Vue.js開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。
除此之外，我們還提供了一種命令叫：nuxt generate，為基于 Vue.js 的應(yīng)用提供生成對(duì)應(yīng)的靜態(tài)站點(diǎn)的功能。
我們相信這個(gè)命令所提供的功能，是向開發(fā)集成各種微服務(wù)（microservices）的 Web 應(yīng)用邁開的新一步。
作為框架，Nuxt.js 為 客戶端/服務(wù)端 這種典型的應(yīng)用架構(gòu)模式提供了許多有用的特性，例如異步數(shù)據(jù)加載、中間件支持、布局支持等。
2.構(gòu)建第一個(gè)Nuxt.js項(xiàng)目
推薦使用Nuxt提供的模板。假設(shè)你已經(jīng)安裝了vue-cli，如果沒有安裝請(qǐng)先執(zhí)行npm install vue-cli -g來安裝vue-cli。
$ vue init nuxt-community/starter-template <project-name>
進(jìn)入到項(xiàng)目文件夾中安裝依賴包。
cd <project-name> npm install
啟動(dòng)項(xiàng)目。
npm run dev
打開瀏覽器，訪問http://localhost:3000。就能看到Next渲染出來的頁(yè)面了。
3.添加頁(yè)面
新建完成的項(xiàng)目結(jié)構(gòu)如下圖所示：
項(xiàng)目結(jié)構(gòu)
Nuxt約定所有頁(yè)面都放在pages文件夾下，Nuxt會(huì)根據(jù)目錄結(jié)構(gòu)自動(dòng)生成對(duì)應(yīng)的路由。
現(xiàn)在在pages下新建Vue文件test.vue，訪問http://localhost:3000/test即可看到剛剛添加的頁(yè)面。
4.引入第三方插件
通常情況下我們都需要引入第三方的插件，比如前段組件，日志等。
第一步當(dāng)然是安裝插件，此處以element-UI為例。
npm install element-ui
雖然下載了element-ui的包但是卻不能像普通項(xiàng)目那樣直接在Vue實(shí)例中import然后使用。Nuxt的內(nèi)核項(xiàng)目都在.nuxt目錄下，如果修改這下面的文件是不會(huì)生效的。因?yàn)槊看尉幾g都會(huì)重新生成文件，所以直接修改該項(xiàng)目文件是無效的。
內(nèi)核項(xiàng)目結(jié)構(gòu)
雖然不能直接修改，但是Nuxt提供了特殊的方式引入第三方插件。
第一步，在pulgin文件夾下新建js文件element-ui.js。文件內(nèi)容如下。
import Vue from 'vue' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element)
第二步，修改nuxt.config.js。添加plugins屬性。
/** * include third-party plugin */ plugins: ['~plugins/element-ui'] // element-ui.js文件地址
重新編譯之后，Nuxt會(huì)編譯該第三方插件并使用。此時(shí)在任何一個(gè)Vue文件中都能使用該第三方插件。
5.靜態(tài)資源文件
你可以把靜態(tài)資源文件放到static文件夾下，然后就可以使用http://localhost:3000/<文件名>來訪問靜態(tài)資源文件。
Nuxt提供的功能還有很多，比如動(dòng)態(tài)路由，ESLint代碼檢測(cè)。今天先介紹到這里，其他深入的用飯請(qǐng)參考官方網(wǎng)站。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue父子組建的簡(jiǎn)單通信之控制開關(guān)Switch的實(shí)現(xiàn)
這篇文章主要介紹了Vue父子組建的簡(jiǎn)單通信之控制開關(guān)Switch的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue中構(gòu)造數(shù)組數(shù)據(jù)之map和forEach方法實(shí)現(xiàn)
數(shù)組操作是前端最重要的數(shù)據(jù)操作，構(gòu)造數(shù)組數(shù)據(jù)，又是數(shù)組操作中很常見的，本文將梳理下map和forEach方法在Vue項(xiàng)目中的使用，感興趣的朋友跟隨小編一起看看吧2022-09-09
vue form check 表單驗(yàn)證的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue form check 表單驗(yàn)證的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Axios?是一個(gè)簡(jiǎn)單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U(kuò)展的接口的小包中提供了一個(gè)簡(jiǎn)單易用的庫(kù)，這篇文章主要介紹了vue3-HTTP請(qǐng)求之a(chǎn)xios,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue彈窗插件實(shí)戰(zhàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例
這篇文章主要介紹了動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
數(shù)據(jù)的重要性我們大家都知道，就算再小的項(xiàng)目中都可能使用幾個(gè)圖表展示，我最近在做項(xiàng)目的過程中也是需要用到圖表，最后選擇了echarts圖表庫(kù)，這篇文章主要介紹了Vue使用Echarts畫柱狀圖2022-12-12
vue實(shí)現(xiàn)自定義日期組件功能的實(shí)例代碼
這篇文章主要介紹了vue自定義日期組件的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09