vue2.0自學教程(一)：走進vue2.0大觀園

人狠話很少，咱直入主題吧！

• 開發軟件： Visual Studio Code
• 支持環境： nodejs+windows
• 版本： vue2.0

1.初識vue
vue是一個前端框架，使用MVVM（Model-View-ViewModel的簡寫）模式。看過官網這個介紹的心得就是看不懂。沒事我舉個通俗可能易懂的例子，大家隨意感覺一下。
皮影戲不少人都知道。

△吶，這就是皮影戲

咱們把看到的皮影對應成V。
在幕後操做皮影的人對應成M。
把手拿皮影的人對應成VM。

當皮影動做改變時，幕後的人動做也在作對應的改變。反過來也同樣，當操做人動做改變時，皮影也在作相應的動做。

（1）李古拉雷有一個孫悟空的皮影，他的好基友想玩一下，李古拉雷直接把這個皮影給他就好，至於能玩出什麼花樣，就看他的能力了。
（2）玩的時間長了，李古拉雷對當前這個孫悟空的顏色有點厭倦，想換個色兒，好比綠色。他拿起筆就給孫悟空的帽子該成了綠色。改過色後的孫悟空耍起金箍棒照樣虎虎生威，雖然動做同樣，好像更好看了。
（1）（2）用咱們行業黑話來說就是低耦合，皮影和玩皮影的人是相互獨立沒太大關係，李古拉雷的皮影換我的照樣玩，皮影換個顏色加點裝飾，孫悟空還照應耍金箍棒，不太會去耍太極（這取決於李古拉雷有沒有學會太極的動做）
（3）有一天李古拉雷真的學會了太極的動做，這段皮影舞孫悟空耍的也是有模有樣。
（3）這個就是可重用性，李古拉雷想讓孫悟空這麼動他就得怎麼動。
（4）時間一長，孫悟空這個皮影玩夠了，李古拉雷就和他的好基友商量，想作一個豬八戒玩，他們分工合做，李古拉雷負責練習動做，基友負責製做皮影，分工明確互不影響。
（4）這個行爲就是獨立開發。

低耦合、可重用性、獨立開發對應着皮影戲是否是更好理解了。

△看完個人通俗講解有沒有這種感受

2.爲何選擇vue2.0？
在這個教程發佈之際，vue的最新版本是2.6，2.6相較於2.0並無特別大的升級，2.x系列均可以向後兼容。同時本系列教程目的是讓初識vue的朋友能快速又高效的上手開發，不會被那些官網那些原理話整的蒙圈又懵逼，也因2.0下的組件庫已經通過時間和程序員的考驗，運行穩定，種類豐富。總而言之vue2.0是個不錯的選擇，接下來的教程若是不作特殊說明,vue是指vue2.0版本。

3.vue的使用方式有幾種？
答：使用方式有兩種：
一種是直接引入CDN連接（引入方式同jQuery）或者下載到本地環境，在程序中引入文件，在瀏覽器中直接運行。
二種是在node.js下運行 ，在命令行工具中用vue-cli命令集進行操作（起個服務、建立項目、打包編譯），程序按照vue的模板語法完成代碼編寫。
注：第二種這種生猛鹹溼的開發技能纔是咱們重點關注的對象。

4.環境搭建
1.下載node並安裝
https://nodejs.org/zh-cn/

選擇左側這個點擊下載，而後一路點擊一路下一步。
2.安裝完成後，在E盤新建一個「workspace」的文件夾，進入建好的這個文件夾，按着「shift」鍵同時點擊鼠標右鍵，選擇「在此處打開命令窗口」。（文件夾路徑能夠創建在任意目錄，儘可能不要以中文命名）。

輸入: node -v，若是成功出現 node 版本號

少年，棒棒噠！，node.js安裝成功了。
3.把 npm 改爲 cnpm ,由於npm命令安裝源不在境內，安裝比較慢，而cnpm使用的是淘寶鏡像，網速有保障，裝起組件來絲絲順滑，那叫流暢。
切換命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

△在cmd窗口中輸入該命令（或者複製命令後右鍵選擇粘貼）

4.本系列教程前端開發IDE使用 Visual Studio Code

注：IDE是集成開發環境，功能豐富，戰鬥力MAX

下載地址：https://code.visualstudio.com/

咱們選擇下載 stable(穩定版)進行安裝，若是軟件是英文界面操做
修改軟件語言包：
快捷鍵是：ctrl+shift+p
搜索「configure display language」

此處改爲：「zh-CN」

軟件重啓後生效，若是沒有生效，仍是顯示英文的話，打開下面這個連接，安裝中文語言包
https://marketplace.visualstu...

安裝完成後，重啓軟件生效。
至此，node.js、和開發軟件就初步安裝完成了。下一節咱們正式進入vue2.0的祕密花園。

5.第一個helloworld!
一場天雷動地火，你的第一個helloworld將要面世了！
先稍安勿躁，在你的"helloworld"真正面世以前還有幾個步驟。

1.環境安裝
上面不是安裝過環境了，咋還安裝啊？對你沒有看錯，不過這裏安裝的環境是項目運行環境。上面安裝的是開發環境，有本質的區別。運行環境安裝後之後，就是鳥槍換炮，不用再一個一個苦哈哈新建目錄和.html、.css、.js文件，只要運行幾條命令，項目目錄和文件會自動安裝完成。這個感受倍兒爽。學會了這招，你就成爲了前端圈最靚的仔。
先找一個工做空間(好比個人是在 E 盤 WorkSpace)，新建一個文件夾「v2.0-tutorial」，進入「v2.0-tutorial」，同時 按住 「shift」+鼠標右鍵 ，點擊「在此處打開命令窗口」

①：輸入命令：npm install vue-cli -g

在這條命令中，用到了 -g，經常使用的還用另外兩條命令，我展開講一下：
-g: 是 --global 的縮寫，安裝到全局環境，最終的文件放在 node安裝目錄下的 ./node_modules 中
-D:是 --save-dev 的縮寫，安裝到開發環境，最終的文件放在項目中./node_modules
-s:是 --save 的縮寫 ，安裝到上線環境
另 install 能夠用 i 代替。
so，這條命令還能夠這樣輸入：npm i vue-cli --global
vue-cli 是什麼？
vue-cli 是vue的命令行界面，安裝成功之後可使用vue下的命令進行項目初始化等一些操做。

△vue-cli安裝成功後的CMD界面

vue-cli安裝成功後後，咱們繼續輸入第二條命令：
②：輸入命令：vue init webpack demo01

△一直按回車鍵什麼都不須要輸入

打開v2.0-tutorial文件夾，看是否多了一個 "demo01"文件夾，這個就是自動生成的demo 項目

△自動搭建生成的項目「demo01」
在Visual Studio Code打開demo文件夾：

• demo01/index.html：
• config：裏面是一些配置文件，項目入口模板文件
• src/assets :一些靜態資源問價，如圖片logo等
• src/components：組件文件夾，也是接下來使用頻率最高的文件夾
• router：路由配置

到這裏，第一個項目總算是搭建完成了，沒事跑一下看看。

2.項目啓動
進入 demo01 ，打開cmd命令行，輸入「npm run dev」

在瀏覽器輸入這個地址：http://localhost:8080/

看這個頁面，說明項目運行的不錯，感受好極了！
打開 src/components/HelloWorld.vue 文件
①.把 <div class="hello"></div>之間的標籤所有幹掉，對一個不留。
②.在data中添加一個新屬性,sayHi

data(){
return {
msg: 'Welcome to Your Vue.js App',
sayHi:'HelloWorld!',
}
}

③.在 <div class="hello"></div>調用新添加的屬性 sayHi，like this:

<div class="hello">
   {{sayHi}}
</div>

打開瀏覽器看一下：

"HelloWorld"終於出來了~

---

源程序以下：

<template>
  <div class="hello">
    {{sayHi}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      sayHi:'HelloWorld!',
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>