淺入深出Vue：環境搭建

淺入深出Vue：環境搭建

工欲善其事必先利其器，該搭建咱們的環境了。

安裝NPM

全部工具的下載地址均可以在導航篇中找到,這裏咱們下載的是最新版本的NodeJS Windows安裝程序

下載下來後，直接Next

這裏一樣的，有固態硬盤的童鞋能夠安裝到固態硬盤，不過這裏有個小問題就是
在選擇目錄的時候會卡死一小會兒。多是若羽的機器性能不太好。

接下來一路下一步便可，坐等安裝

安裝完成，讓咱們命令行測測看

win鍵 + R呼出運行，輸入cmd肯定便可

輸入node -v，查看nodejs的版本。若羽這裏裝的是v10.15.0

輸入npm -v，查看npm的版本。若羽這裏是6.4.1

切換國內鏡像源

npm默認是國外的源，對國內的用戶不太友好，安裝各類庫速度很慢。

所以咱們儘量選擇國內的源減小網絡問題，這裏若羽選擇的是淘寶 npm鏡像。一樣的，在導航篇中都有地址噢。

這裏咱們輸入官方提供的命令（注：在官方地址中的使用說明處給出了這條命令，這裏爲了方便，若羽複製了過來）

npm install -g cnpm --registry=https://registry.npm.taobao.org

好的，安裝完成

安裝webpack

接下來讓咱們安裝webpack

輸入下面的命令，咱們進行全局的webpack安裝

cnpm install -g webpack

安裝完成

接下來咱們安裝 webpack-dev-server

cnpm install -g webpack-dev-server

安裝完成

由於咱們這裏沒有安裝webpack-cli，所以咱們暫時沒辦法用webpack -v去查看
咱們所安裝的webpack版本。

安裝vue-cli

好的，接下來終於到了正主兒了。

全局安裝vue-cli

cnpm install -g vue-cli

安裝完成

用vue -V來查看一下安裝的vue版本，這裏若羽安裝的版本是2.9.6

新建項目

前置工具，環境都已經準備完畢了。是時候開始新建一個項目了。

先切換到咱們指定的目錄下去, windows下也能夠用cd 目標目錄進行切換噢。
切換盤符是盤符:，好比切換到D盤的命令:

D:

還有另外一個辦法，就是對着目標目錄的空白處。按住左 Shift的同時，按下鼠標右鍵。
彈出的菜單中會有一個在此處打開Powershell窗口的選項，選擇此選擇便可直接在命令行中進入當前目錄。

這裏咱們用vue-cli來創建咱們的第一個項目

vue init webpack blog

上述命令中， blog表示的是咱們新建項目的名稱。這行命令應該這麼說

vue init webpack 你要新建的項目名

基本上不用考慮選什麼的問題，直接默認便可（我們現階段的目的是快速搭建）。
默認中包含了vue-router和eslint的選項，正好避免咱們再去手動裝一下的步驟了。
這裏提一下兩個地方，第一個是下圖中Pick a test runner。
這裏若羽選擇的是none，由於咱們的項目還沒考慮寫測試哈，因此若羽就順手給幹掉了。
須要的時候咱們再加進來。

另外一個就是這裏，選擇的是user NPM。 昂，不過這個選項是默認的。能夠不用在乎

好了。開始初始化~

安裝完成

運行項目

咱們的第一個項目已經建立完成了，咱們先讓它跑起來看看~
項目運行兩部曲：

先install一下，雖然大多數狀況下能夠不須要。咱們這裏就勤快一下，也做爲演示的一部分

cnpm install

在開發環境下運行，編譯完後會顯示這個頁面。就表示已經編譯完成了。

cnpm run dev

在瀏覽器中輸入地址，便可開箱食用咱們的第一個項目了~

localhost:8080

跟着若羽一步一步，跑起來本身的項目，不用擔憂若羽會漏掉什麼。 從工具到環境，都不會落下的。 請放心食用~ ：）