vue 起步走 --「安裝篇」

在說明以前，溶解得在這說一句 ，菜鳥開始安裝這些東西真是不容易，各類瘋狂的百度，搜索。（找的我眼淚都快流下來了），不說廢話，開始正經。

第一步：環境的搭建 ：

vue推薦開發環境:

Node.js: javascript運行環境(runtime),不一樣系統直接運行各類編程語言（https://nodejs.org/zh-cn/download/）

npm: Nodejs下的包管理器。因爲國內使用npm會很慢,這裏推薦使用淘寶NPM鏡像（http://npm.taobao.org/）

有anguler經驗的 so easy（吃個瓜冷靜一下）。

node.js安裝好以後呢 ,檢查一下版本順便看看是否已經安裝成功。

win+R，輸入cmd，接着輸入node -v檢測是否安裝成功，順便再輸入npm-v 查看npm包管理器版本號。

如上圖所示，您已經安裝成功。

 

安裝cnpm

在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org而後等待，安裝完成以下圖。

完成以後，咱們就能夠用cnpm代替npm來安裝依賴包了。若是想進一步瞭解cnpm的，查看淘寶npm鏡像官網。

 

環境搭建好以後，開始安裝vue啦

安裝vue-cli腳手架構建工具

在命令行中運行命令npm install -g vue-cli，而後等待安裝完成。經過以上三部，咱們須要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建項目。

用vue-cli構建項目

要建立項目，首先咱們要選定目錄，而後再命令行中把目錄轉到選定的目錄。在這裏，我選擇桌面來存放新建的項目，則咱們須要先把目錄cd到桌面，以下圖。

在桌面目錄下，在命令行中運行命令vue init webpack firstVue。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，

也就是整個項目是基於webpack的。其中firstVue是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中（個人實例中，會在桌面生成該文件夾），以下圖。（看 的懂就不錯了）

 

運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，做者等信息，若是不想填直接回車默認就好。

ok，以後再查看你的桌面 ，哦耶寺  ！桌面上就有剛剛新建的項目了。

 

覺得這樣就結束了 ，

 

騷年 太天真了。再從新win+r →cmd→ cd 項目文件夾→運行命令cnpm install，等待安裝。

 

要安裝依賴包，首先cd到項目文件夾（firstVue文件夾），而後

安裝完成以後，會在咱們的項目目錄firstVue文件夾中多出一個node_modules文件夾，這裏邊就是咱們項目須要的依賴包資源。

東西比較多。。用webstorm 的朋友就要當心了 ，全新的webstorm 要配置的東西多着嘞。

 

接着 就該運行咱們的項目了。

在項目目錄中，運行命令npm run dev，會用熱加載的方式運行咱們的應用，熱加載可讓咱們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。（nice）

↓

切記這個運行的窗口，在使用的時候，別關了，關了就GG了 。

 

待溶解找到新出路，再斃了它（已安裝tomat之類的朋友，那就不同，嘿嘿）

 

 

項目運行成功後，瀏覽器會自動打開localhost:8080（若是瀏覽器沒有自動打開，能夠手動輸入）。運行成功後，會看到以下所示的界面。

 完事了，看到上圖，表示整成了 。

本次服務到此結束！對本次服務，請評論一下選項：

A：完美，B：不能再完，C：巨完美，D：NICE

 

有問題，歡迎討論討論，來討論者，送5斤狗糧。。。。。。