vue2.0自學教程(一)：走進vue2.0大觀園
人狠話不多，咱直入主題吧！
- 開發軟件： Visual Studio Code
- 支持環境： nodejs+windows
- 版本： vue2.0
1.初識vue
vue是一個前端框架，使用MVVM（Model-View-ViewModel的簡寫）模式。看過官網這個介紹的心得就是看不懂。沒事我舉個通俗可能易懂的例子，你們隨意感受一下。
皮影戲很多人都知道。
△吶，這就是皮影戲
我們把看到的皮影對應成V。
在幕後操作皮影的人對應成M。
把手拿皮影的人對應成VM。
當皮影動作改變時，幕後的人動作也在做對應的改變。反過來也一樣，當操作人動作改變時，皮影也在做相應的動作。
（1）李古拉雷有一個孫悟空的皮影，他的好基友想玩一下，李古拉雷直接把這個皮影給他就好，至於能玩出什麽花樣，就看他的能力了。
（1）（2）用我們行業黑話來講就是低耦合，皮影和玩皮影的人是相互獨立沒太大關系，李古拉雷的皮影換個人照樣玩，皮影換個顏色加點裝飾，孫悟空還照應耍金箍棒，不太會去耍太極（這取決於李古拉雷有沒有學會太極的動作）
（3）有一天李古拉雷真的學會了太極的動作，這段皮影舞孫悟空耍的也是有模有樣。
（3）這個就是可重用性，李古拉雷想讓孫悟空這麽動他就得怎麽動。
（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）或者下載到本地環境，在程序中引入文件，在瀏覽器中直接運行。
註：第二種這種生猛鹹濕的開發技能才是我們重點關註的對象。
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.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans
安裝完成後，重啟軟件生效。
至此，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"文件夾，這個就是你的第一個項目
△自動搭建生成的項目“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>
vue2.0自學教程(一)：走進vue2.0大觀園