[TOC] >[success] # VueCLI 的使用和單文件組件 本章了解一下 **Vue** 的 **腳手架工具** ，同時了解一下 **Vue** 的 **單文件組件** 。 >[success] ## VueCLI 腳手架 在 **真正開發大型項目時** ，實際上并不能通過一個 **index.html** 的方式去編寫一個比較大型的項目，所以我們要學習使用 **Vue** 的一個 **工具** 來進行大型項目的開發，這個工具就叫 **VueCLI （腳手架）工具** 。 1. **安裝 node** 我們在做真實 **Vue 項目開發** 時，要借助 **node** 的 **環境** ，然后去使用我們的 **VueCLI （腳手架）** 去開發大型的項目，首先打開 **[Node.js 官網](https://nodejs.org/en/)** ，點擊圖片中帶有 **LTS 字樣，長時間維護比較穩定的版本** 的 **node** ，把它 **下載** 下來，傻瓜式的安裝時即可。  安裝完成 **node** 后，到 **命令行** 中，輸入指令 ~~~ node -v ~~~ 來查看 **node 版本號** ，我們學習的是 **Vue3** ， **Vue3** 的 **腳手架（VueCLI）** 要求 **node 版本** 是 **10.0** 版本以上， **至少是 8.0 版本以上** 。 2. **安裝 nrm** 其實安裝好 **node** 之后，會連帶著 **node** 一起安裝另外一個工具，叫 **npm** ，輸入指令 ~~~ npm -v ~~~ 查看 **npm 版本號** ，**npm** 是 **包管理器** ，我們可以通過 **npm** 去下載網絡上別人的插件等等。 接下來我們用 **npm** 來安裝一個 **nrm** ， 輸入指令 ~~~ npm install nrm -g ~~~ **nrm** 是一個 **npm源管理器** ，意思就是說 **npm 包來源的網址**，對它進行管理。比如你用了 **淘寶鏡像**，那么你就可以用 **nrm** 來切換，**npm服務器是在國外的 ，下載安裝包是很慢，可能會出現卡頓的現象**，這時你就可以把地址切換到 **淘寶鏡像地址** 了，畢竟服務器在國內，下載安裝包速度就快了。 安裝完成 **npm** 后，輸入指令 ~~~ nrm ls ~~~ 如果報錯了請看[這里](https://blog.csdn.net/S_aitama/article/details/113706339)，如果未報錯會出現下面這樣的界面