nuxt.js環境搭建

nuxt.js環境搭建

1 在使用npm前你需要安裝Node到系統中，

2 用npm來安裝vue-cli這個框架，如果你已經安裝過了，可以省略這步。

• npm install vue-cli -g
  

• 這個根據你的網絡環境不同，安裝的速度不僅相同，如果你的網絡環境實在不好，可以考慮使用cnpm來進行安裝。（在實際開發中我會盡量避免使用cnpm來進行安裝，因爲會出現一些未知的錯誤。）

  安裝完成後可以使用vue -V 來測試是否安裝成功。（注意：這裏要使用大寫的V，小寫無效）。

3 使用vue安裝 nuxt

• 安裝好vue-cli後，就可以使用init命令來初始化Nuxt.js項目。

• vue init nuxt/starter text
  

  • text爲項目名稱

• 這時候他會在github上下載模版，然後會詢問你項目的名稱叫什麼，作者什麼的，這些完全可以根據自己的愛好填寫。

4 安裝依賴包

npm install

5 啓動服務

使用npm run dev 啓動服務

npm run dev

F:\htmldaima\integrated_project\text>npm run dev

> [email protected] dev F:\htmldaima\integrated_project\text
> nuxt


F:\htmldaima\integrated_project\text>"node"  "F:\htmldaima\integrated_project\text\node_modules\.bin\\..\[email protected]@nuxt\bin\nuxt.js"

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

i Preparing project for development
i Initial build may take a while
√ Builder initialized
√ Nuxt files generated


* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 
* Client █████████████████████████ 





√ Client
  Compiled successfully in 3.97s

√ Server
  Compiled successfully in 3.49s

i Waiting for file changes
i Memory usage: 176 MB (RSS: 253 MB)

5 在瀏覽器輸入 localhost:3000,可以看到結果。

6 目錄結構：

|-- .nuxt                            // Nuxt自動生成，臨時的用於編輯的文件，build
|-- assets                           // 用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
|-- components                       // 用於自己編寫的Vue組件，比如滾動組件，日曆組件，分頁組件
|-- layouts                          // 佈局目錄，用於組織應用的佈局組件，不可更改。
|-- middleware                       // 用於存放中間件
|-- pages                            // 用於存放寫的頁面，我們主要的工作區域
|-- plugins                          // 用於存放JavaScript插件的地方
|-- static                           // 用於存放靜態資源文件，比如圖片
|-- store                            // 用於組織應用的Vuex 狀態管理。
|-- .editorconfig                    // 開發工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用於檢查代碼格式
|-- .gitignore                       // 配置git不上傳的文件
|-- nuxt.config.json                 // 用於組織Nuxt.js應用的個性化配置，已覆蓋默認配置
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操作
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件