亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

luodongseu / 2657人閱讀

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

安裝 nuxt.js

Nuxt.js 官方提功了兩種方法來(lái)進(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)境不用考慮有沒(méi)有）

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)目名，不需要修改直接回車(chē)就好

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 框架方便快速開(kāi)發(fā)，提供了很多現(xiàn)成的樣式，近幾年聽(tīng)到最多的就是 Element UI

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

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

7.選擇渲染模式

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

8.作者

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

9.選擇包管理工具

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

10.選擇完成開(kāi)始安裝

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://www.ezyhdfw.cn/yun/109175.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

    摘要：無(wú)需使用服務(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)，受到很多前端開(kāi)發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開(kāi)發(fā)，我們正在使用的簡(jiǎn)書(shū)，便是基于Vue來(lái)構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲(chóng)難以抓取客戶端渲染的頁(yè)面meta信息和其他SEO相關(guān)信息，使...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<