手把手教你利用create-nuxt-app腳手架創建NuxtJS應用


  在利用NuxtJS框架進行服務端渲染應用程序開發時,我們可以借助NuxtJS的腳手架工具create-nuxt-app進行快速搭建工程環境,下面將詳細說明工程搭建過程:

  (1)安裝NodeJS

  這里不做講解了,只要npm的版本不低於5.2.0版本即可。

  (2)registry配置

  若公司內網提供了類似的制品庫地址,那么就可以將registry的值設置為公司內網具體的地址;若是采用中國互聯網的話,那么最好將registry的值設置為淘寶NPM鏡像,即https://registry.npm.taobao.org。我們可以直接在.npmrc文件中添加registry=https://registry.npm.taobao.org,也可以在cmd窗口中輸入npm config set registry https://registry.npm.taobao.org命令。

  (3)安裝create-nuxt-app腳手架

  在cmd窗口中輸入npm i -g create-nuxt-app命令,按下回車鍵即可,靜等安裝過程,最終的效果如下圖所示:

  (4)創建NuxtJS工程

  在cmd窗口中輸入npx create-nuxt-app bien_test命令,其中bien_test為工程名稱,按下回車鍵后過程如下:

  在上圖中,我選擇JavaScript作為編程語言。

  在上圖中,我選擇Npm作為包管理工具。

  在上圖中,我選擇Element作為UI框架。

  在上圖中,我選擇Express作為本地的服務端框架。

  在上圖中,我選擇Axios作為Nuxt.js模塊;注意了,需要通過按空格鍵才會選中期望值,此時括號中會出現星號,然后按下回車鍵進行確認即可。

  在上圖中,我選擇ESLint工具作為代碼規范檢查工具。

  在上圖中,我選擇Jest作為測試框架。

  在上圖中,我選擇渲染模式為SSR,SPA適合在客戶端渲染。

  在上圖中,我選擇jsconfig.json作為開發配置文件。按下回車鍵后,就可以去喝咖啡了,靜候安裝過程……

  上圖表明NuxtJS應用工程已創建成功了。

  (5)代碼目錄結構

  (6)效果展示

  在工程根目錄下,打開cmd窗口,運行npm run dev命令,回車后會看到下面這些信息:

  最后,在瀏覽器中輸入http://localhost:3000,查看展示效果如下所示:

  到此,NuxtJS工程已創建成功了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM