安裝 nuxt.js

Nuxt.js 官方提功了兩種方法來進行項目的初始化，一種是使用Nuxt.js團隊的腳手架工具 create-nuxt-app ，一種是根據(jù)自己的需求自由配置

使用腳手架適合新手，對 nodejs 后臺框架有所了解；按照自己需求自由配置，需要對如何配置 webpack 以及 nodejs 后臺框架有所了解。

兩種方式比較下就是原生和插件的區(qū)別。

使用腳手架安裝

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

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

npx create-nuxt-app <項目名>

#或者用yarn

yarn create nuxt-app <項目名>

之后他會提示你進行一些選擇

1.項目名

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

2.項目描述

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

3.選擇服務器端框架

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

4.擴展插件

選擇 axios EsLint Prettier

• axios 發(fā)送HTTP請求
• EsLint 在保存時代碼規(guī)范和錯誤檢查自己的代碼。
• Prettier 在保存時格式化/美化自己的代碼。
  

5.選擇 UI 框架

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

6.選擇測試框架

測試框架是用來檢測程序有沒有到達預期的目的，有沒有出錯，這里暫時用不到，所以選擇 none 就好

7.選擇渲染模式

這里分單頁應用（spa）以及普遍的方式（Universal），單頁應用有很多路由但是頁面只有一個，所有能看到的頁面都是 js 即時生成的 dom，第二種是在服務器生成 html ，有多少路由就有多少頁面。

使用 nuxt 就是為了解決 SEO 的問題，使其實現(xiàn)所有網(wǎng)站路徑完全被收錄

8.作者

這個也可以之后在 package.js 中設置 author 屬性

9.選擇包管理工具

這里選擇那個都可以，看自己習慣用哪個

10.選擇完成開始安裝

11.安裝完成

提示信息

項目目錄

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

添加其他常用功能

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

安裝 babel

yarn add babel-cli babel-preset-env

配置文件

.babelrc

{
 "presets": ["env"]
}

安裝 scss

yarn add node-sass 
yarn add sass-loader

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論