Vue學習系列---安裝

1、前言

   　　學任何東西都是有理由的，目前主要有Angular，React，Vue這三個前端MVVM框架。我選擇vue緣由很簡單，「」入門簡單「」，是的只是這個理由。相較於其餘2個框架，vue的文檔真的是太親民的，入門曲線沒有那麼陡，對於我這種小菜鳥來講，是入門首選。等vue熟悉後，相信再看別的前端MVVM框架也是一通百通的效果。

　　目前流行的2套基於vue.js的UI框架element-ui(http://element-cn.eleme.io/#/zh-CN/component/installation)和Iview(https://www.iviewui.com),各有千秋吧，你們能夠根據本身的須要選擇

2、爲何須要安裝

　　最簡單是一種，直接下載並用 <script> 標籤引入，Vue 就會被註冊爲一個全局變量。可是推薦構建大型應用時推薦使用 NPM 安裝， NPM 能很好地和諸如Webpack或Browserify模塊打包器配合使用

3、開發環境

　　1.Node.js: javascript運行環境(runtime)；

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

　　3.webpack: 它主要的用途是經過 CommonJS 的語法把全部瀏覽器端須要發佈的靜態資源作相應的準備，好比資源的合併和打包。

　　4.vue-cli: Vue-cli是Vue的腳手架工具，主要做用：目錄結構、本地調試、代碼部署、熱加載、單元測試

4、安裝Node

　　1.從node.js官網下載並安裝node(吐槽下，下載了好多遍頁面下載好，就用了以前的版本)

　　

　　win+R，輸入cmd，接着輸入node -v檢測是否安裝成功。

　　

5、安裝npm的國內鏡像---cnpm

　　在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org

　　

　　入上圖，安裝完成。

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

　　在命令行中運行命令cnpm install -g vue-cli 安裝完成。

　　

　　以上，咱們須要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建項目。

7、用vue-cli構建咱們的第一個項目

　　首選要選擇項目目錄 暫時放到桌面。cd desktop

　　而後運行命令vue init webpack MyVue這個命令的意思是初始化一個項目，其中webpack是構建工具

　　再而後就是編寫項目名稱，描述，做者等信息等（注意：User EsLint to lint to your code,這個要選NO,該選項爲使用ESLint規範你的代碼，一個空格錯誤都將報錯，暫時不開啓，能夠避免沒必要要的麻煩）

　　

　　此時，咱們桌面上就有了項目文件夾

　　

　　嗯，結束了麼？No! 還得安裝依賴包

　　

　　安裝完依賴包以後，就能夠運行整個項目了.

8、運行項目

　　在項目目錄下運行使用npm run dev，即可以打開本地服務器實時查看效果（localhost:8080）

　　

　　

　　這樣，整個安裝步驟就基本結束了，其實仍是很繁瑣的，查找了網上不少資料。後面會開始咱們vue正式的學習篇章……