真小白體驗 vue-cli 3.0 專案搭建~

Vue.js（讀音 /vjuː/, 類似於 view）是一個構建資料驅動的 web 介面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。它不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與單檔案元件和 Vue 生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動。 而vue最大的特點就是元件的使用，在使用vue開發專案之前，需先搭建腳手架方便後序的元件開發。

Node.js

對於本小白，剛剛學習前端，電腦上當然是沒有搭建過任何環境，只有一個window桌面。對於即將要使用的vue開發，剛開始當然還是束手無策吧。廢話不多說，進入主題。 Node.js是什麼呢？

百度一下吧。簡而言之，Node.js 是一個讓 JavaScript 執行在服務端的開發平臺，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的指令碼語言。 那麼我們為什麼要使用Node.js？ 因為只有在Node.js環境下，我們才能用npm指令在命令視窗安裝webpack和vue-cli等。 廢話不多說 還是動手吧！ 首先到Node.js官網https://nodejs.org/en/把LTS穩定版下載下來，然後下一步下一步下一步下一步傻瓜式安裝。

然後win+R進入cmd命令執行視窗輸入命令列 （-g為全域性環境安裝）

完成後輸入nrm ls檢視nrm列表清單

這裡指向npm，由於npm訪問的是國外的伺服器，很容易被牆，所以我換到了淘寶的npm映象。 輸入nrm use taobao 再輸入 nrm ls檢視一遍是否安裝完成

webpack安裝

輸入下圖指令，這裡安裝了最新版本，如需要其他版本 把webpack改成（[email protected]版本號 如[email protected]）

webpack -v看下是否出現版本號 出現則完成了webpack的安裝 webpack是啥？還是百度一下吧 簡而言之，webpack可以讓你打包你的專案檔案，方便管理。

vue-cli 3.0

直通車 vue的官方文件講得很清晰了，照著做幾乎就可以了。 vue安裝

npm install -g @vue/cli 檢查安裝 vue -V （注意V是大寫） 建立專案 vue create project_name 會出現下圖，第一次使用直接進入第一個選項（沒記錯的話） 第一個選項為預設模式，第二各選項可以自己選擇自己所需要配置的模組。這裡先選第一項。 第二項的內容為 選好後敲Enter就建立新的vue專案了。 開啟專案後的目錄

搞掂~~