成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用 Nuxt.js 快速搭建服務(wù)端渲染(SSR) 應(yīng)用

leanote / 1763人閱讀

摘要：安裝官方提功了兩種方法來進(jìn)行項(xiàng)目的初始化，一種是使用團(tuán)隊(duì)的腳手架工具，一種是根據(jù)自己的需求自由配置使用腳手架適合新手，對(duì)后臺(tái)框架有所了解按照自己需求自由配置，需要對(duì)如何配置以及后臺(tái)框架有所了解。兩種方式比較下就是原生和插件的區(qū)別。

安裝 nuxt.js

Nuxt.js 官方提功了兩種方法來進(jìn)行項(xiàng)目的初始化，一種是使用Nuxt.js團(tuán)隊(duì)的腳手架工具 create-nuxt-app ，一種是根據(jù)自己的需求自由配置
使用腳手架適合新手，對(duì) nodejs 后臺(tái)框架有所了解；按照自己需求自由配置，需要對(duì)如何配置 webpack 以及 nodejs 后臺(tái)框架有所了解。
兩種方式比較下就是原生和插件的區(qū)別。

使用腳手架安裝

需要有 nodejs 或者 yarn 環(huán)境，推薦使用 vscode 自帶的控制臺(tái)輸入命令行命令進(jìn)行操作

在有了環(huán)境之后直接輸入以下命令就可以直接創(chuàng)建一個(gè)項(xiàng)目（npx 在npm 5.2.0默認(rèn)安裝，使用最新穩(wěn)定nodejs環(huán)境不用考慮有沒有）

npx create-nuxt-app <項(xiàng)目名>

#或者用yarn

yarn create nuxt-app <項(xiàng)目名>

之后他會(huì)提示你進(jìn)行一些選擇
1.項(xiàng)目名

在這里可以設(shè)置項(xiàng)目名，亦可以之后在 package.js 中設(shè)置 name 屬性，一般是在輸入上面命令時(shí)的項(xiàng)目名，不需要修改直接回車就好

2.項(xiàng)目描述

這里是關(guān)于項(xiàng)目的描述，比如是做什么的，也可以之后在 package.js 中設(shè)置 description 屬性

3.選擇服務(wù)器端框架

看自己習(xí)慣使用什么了，一般 Express Koa 居多

4.擴(kuò)展插件
選擇 axios EsLint Prettier

axios 發(fā)送HTTP請(qǐng)求

EsLint 在保存時(shí)代碼規(guī)范和錯(cuò)誤檢查自己的代碼。

Prettier 在保存時(shí)格式化/美化自己的代碼。

5.選擇 UI 框架

UI 框架方便快速開發(fā)，提供了很多現(xiàn)成的樣式，近幾年聽到最多的就是 Element UI

6.選擇測(cè)試框架

測(cè)試框架是用來檢測(cè)程序有沒有到達(dá)預(yù)期的目的，有沒有出錯(cuò)，這里暫時(shí)用不到，所以選擇 none 就好

7.選擇渲染模式

這里分單頁(yè)應(yīng)用（spa）以及普遍的方式（Universal），單頁(yè)應(yīng)用有很多路由但是頁(yè)面只有一個(gè)，所有能看到的頁(yè)面都是 js 即時(shí)生成的 dom，第二種是在服務(wù)器生成 html ，有多少路由就有多少頁(yè)面。
使用 nuxt 就是為了解決 SEO 的問題，使其實(shí)現(xiàn)所有網(wǎng)站路徑完全被收錄

8.作者

這個(gè)也可以之后在 package.js 中設(shè)置 author 屬性

9.選擇包管理工具

這里選擇那個(gè)都可以，看自己習(xí)慣用哪個(gè)

10.選擇完成開始安裝

11.安裝完成

提示信息

項(xiàng)目目錄

關(guān)于如何根據(jù)自己的需求自由配置，這里不講，有需要自由配置的一般都不是新手了，推薦看看官方文檔

添加其他常用功能

除了 nuxt 腳手架自帶的，我們還需要其他配置，ES6的編譯 ，CSS的預(yù)處理，其他的用到了再添加

安裝 babel 
yarn add babel-cli babel-preset-env

配置文件
.babelrc

{
  "presets": ["env"]
}
安裝 scss 
yarn add node-sass 
yarn add sass-loader

之后只需要在 vue 文件的 style 標(biāo)簽加一條屬性聲明下就好



# or

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/19490.html

相關(guān)文章

  • 使用 Nuxt.js 快速搭建服務(wù)端渲染(SSR) 應(yīng)用

    摘要：安裝官方提功了兩種方法來進(jìn)行項(xiàng)目的初始化，一種是使用團(tuán)隊(duì)的腳手架工具，一種是根據(jù)自己的需求自由配置使用腳手架適合新手，對(duì)后臺(tái)框架有所了解按照自己需求自由配置，需要對(duì)如何配置以及后臺(tái)框架有所了解。兩種方式比較下就是原生和插件的區(qū)別。 安裝 nuxt.js Nuxt.js 官方提功了兩種方法來進(jìn)行項(xiàng)目的初始化，一種是使用Nuxt.js團(tuán)隊(duì)的腳手架工具 create-nuxt-app ，一種...

    luodongseu 評(píng)論0 收藏0

  • Vue現(xiàn)有項(xiàng)目改造為Nuxt項(xiàng)目

    摘要：好了，項(xiàng)目啟動(dòng)了，目錄結(jié)構(gòu)也清楚了，接下來就是整個(gè)現(xiàn)有項(xiàng)目的遷移了目前正在改造項(xiàng)目，文章尚未寫完，會(huì)抽時(shí)間不定期的繼續(xù)更新項(xiàng)目的改造過程及分享改造過程中遇到的問題 公司項(xiàng)目，最初只為了實(shí)現(xiàn)前后端分離式開發(fā)，直接選擇了vue框架進(jìn)行開發(fā)，然而現(xiàn)在項(xiàng)目基本完成了，發(fā)現(xiàn)蜘蛛根本就抓取不到網(wǎng)站數(shù)據(jù)，搜索引擎搜出來，都是一片空白沒有數(shù)據(jù)，需要對(duì)項(xiàng)目做SEO優(yōu)化。 本人第一次接觸SEO的優(yōu)化，完全...

    Invoker 評(píng)論0 收藏0

  • 服務(wù)端預(yù)渲染之Nuxt（介紹篇）

    摘要：為了解決問題，推出了服務(wù)端預(yù)渲染，以便提高對(duì)優(yōu)化。應(yīng)用，到了，單頁(yè)面應(yīng)用優(yōu)秀的用戶體驗(yàn)，逐漸成為了主流，頁(yè)面整體式渲染出來的，稱之為客戶端渲染。客戶端接收數(shù)據(jù)，然后完成最終渲染。通過對(duì)客戶端服務(wù)端基礎(chǔ)框架的抽象組織，主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開發(fā)一般都是前后端分離，mvvm和mvc的開發(fā)框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發(fā)，但是由于前...

    Shonim 評(píng)論0 收藏0

  • vue服務(wù)端渲染demo將vue-cli生成的項(xiàng)目轉(zhuǎn)為ssr

    摘要：無需使用服務(wù)器實(shí)時(shí)動(dòng)態(tài)編譯，而是使用預(yù)渲染方式，在構(gòu)建時(shí)簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài)文件。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁(yè)面應(yīng)用程序不同，服務(wù)器渲染應(yīng)用程序，需要處于運(yùn)行環(huán)境。更多的服務(wù)器端負(fù)載。 目錄結(jié)構(gòu) -no-ssr-demo 未做ssr之前的項(xiàng)目代碼用于對(duì)比 -vuecli2ssr 將vuecli生成的項(xiàng)目轉(zhuǎn)為ssr -prerender-demo 使用prer...

    whinc 評(píng)論0 收藏0

  • 淺談NUXT - 基于vue.js的服務(wù)端渲染框架

    摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡(jiǎn)單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡(jiǎn)書，便是基于Vue來構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁(yè)面meta信息和其他SEO相關(guān)信息，使...

    yearsj 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<