安裝 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īng)用（spa）以及普遍的方式（Universal），單頁應(yīng)用有很多路由但是頁面只有一個(gè)，所有能看到的頁面都是 js 即時(shí)生成的 dom，第二種是在服務(wù)器生成 html ，有多少路由就有多少頁面。

使用 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)簽加一條屬性聲明下就好

<style lang="sass">
</style>
# or
<style lang="scss">
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論