第一個vue.js項目

寫在前面

本文主要給剛剛接觸前端或者vue.js的同窗，旨在能夠經過本文可以順利運行起一個vue工程！

零、環境搭建

首先安裝node及npm（已經安裝過的自動跳過），打開node官網：

不論是windows仍是mac，是英文仍是中文，都差很少一個樣。
LTS是穩定版，另外一個是最新版，區別就是新版的可能有一些新的功能，但可能不太穩定，隨便點一個就能夠（不過我都是裝最新版😁）。

接着點擊右邊的最新版，就會下載一個安裝包，接着找到下載位置點擊安裝。

沒下載成功應該是網絡問題，從新下載就行了。

另外，安裝node時會自動安裝npm，因此暫時不須要再手動安裝npm，接着就是傻瓜式操做，一路點擊「繼續」、「贊成」和「安裝」之類的按鈕，而後會提示安裝成功。

咱們也能夠不去管這個提示（或者沒有提示的），最後只要用命令行測試一下就知道是否安裝成功：

node -v
npm -v

若是獲得下面的結果就說明安裝成功了：

至此，node環境已經搭建完畢！

到這一步也很簡單，暫不須要手動配置環境變量之類的東西。

1、安裝腳手架——vue-cli

爲了不從零構建整個項目所浪費的成本，vue官方提供了一個直接生成基礎工程的腳手架——vue-cli，對初學者上手也比較快，接着安裝腳手架工具：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安裝成功大概是這樣（相似+ @vue/cli@3.0.4就是安裝成功了）：

yarn跟 npm同樣，也是一個包管理工具，直接使用 yarn報錯的話，能夠先安裝一下，官網提供的 安裝方法。

若是以爲npm速度慢的話能夠將改爲國內的淘寶npm鏡像：

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

以後就可使用cnpm install進行相關依賴的安裝（不過通常我是不用cnpm的）。

2、初始化工程

在vue-cli3.0開始，提供了一個圖形化的界面，相比以前的命令行初始化更加直觀，操做更方便，在工程啓動後的數據分析以及狀態管理也更加清楚。

若是上面步驟都沒有問題，運行這個命令在本地啓動8000端口並自動打開瀏覽器：

vue ui

瀏覽器打開的效果是這樣的：

接着依次點擊「建立」—>「在此建立新項目」，而後出現基礎信息配置頁面：

接着在「項目文件夾」的輸入框下面輸入項目名（如：my-app），而後點擊「下一步」，到以下界面：

而後點擊「建立項目」，接着就是一段等待時間，用於建立自動建立項目以及安裝相關依賴。

這裏能夠先選擇默認的，由於後續都是能夠修改的。

成功以後就會看到這個界面：

接着以下圖，依次點擊「任務」->「serve」->「運行」：

大概幾秒的時間就會啓動成功，右側面板會變成大概這樣，會顯示本次編譯的一下信息：

若是上面的面板提示「編譯成功」或者「success」等相似狀態就表示項目啓動成功，接着就能夠用瀏覽器打開http://localhost:8080:

3、修改項目

項目建立成功，接着若是修改呢？
在初始化工程的時候會有文件夾的路徑，在本身的文件夾下好到對應的文件夾，例如個人叫my-app：

接着就直接經過編輯器打開文件夾，而後找到對應的文件進行修改、保存便可。

寫在後面

本文沒什麼代碼，只是想對剛接觸前端及vue.js的一個基本指南，代碼也不一樣步到github上了；
對細節、原理以及vue.js語法不作詳細說明，只想能順利的跑起來一個vue.js的Hello World!