在利用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工程已創建成功了。