按部就班的學習方法，非常適合零基礎的朋友，一起開始Vue學習：
1. 通過下載引用的方法使用Vue
2.通過安裝腳手架vue-cli新建項目
3.建立一個練習文件夾，做不同的案例
4.上傳到git，哪里都可以練習
(說明：為方便易懂，以下指定文件夾名字，實際命名是隨意命名)
一、先介紹如何在本地和 Github 建立項目，并同步
如果是本地練習，不需要上傳 Github 在多個終端操作的，可以直接到第二塊，開始Vue
準備工作：
步驟：
- 在 Git 上新建項目倉庫 vueDemo
2.新建完之后復制這個倉庫在 Git 上面的的地址
3.通過 sourcetree 把項目/倉庫克隆到本地
3.1打開 sourcetree
3.2新建：文件-新建 / Ctrl + n / tab 欄上的 + 都可新建
3.3 填寫示例
需要注意：本地新建的文件夾需要時一個空文件夾，與Git上新建的同名即可
此時拉取線上項目完成，在本地進行編輯可上傳，實現多端和協同工作。初學實用于家和公司學習，不用帶u盤。
4.上傳
當在拉取的文件夾 進行新建或者修改操作之后，上傳工具 sourcetree 會提示有未暫存的文件 點擊暫存所有 / + 將文件提交為暫存文件
此時點擊提交按鈕，會把已暫存的文件提交到倉庫，隨后 勾選master 點擊推送。步驟：暫存 - 提交 - 推送 - 確認
5.結果查看
推送成功的變成 綠色對勾勾， 完美。
二、通過下載引用的方法，練習vue，可做多個練習，不用重復新建
1.在電腦新建一個 名為 vueDemo (名字隨意) 的文件夾，整個路徑盡量不要有中文，避免不可知的錯誤
PS：如果是從 Git 上面克隆的項目/倉庫，就直接在拉下來的文件夾 vueDemo (見上面第一板塊)進行下一步，不用新建
2.在 vueDemo文件夾 新建兩個文件夾：
- 一個命名 vue-src (名字隨意，用來以引用的方法練習vue)
- 另一個命名 vue-npm (名字隨意，不要中文，不要包含大寫，通過安裝腳手架的方法練習vue)
如果是創建了Git倉庫的，此時文件夾會變成問號，后面還會出現感嘆號，這表示文件做了新增和修改，只需要正確提交就沒有了。
3.下載并引入vue.js
官網介紹很清楚，這里做簡潔明了的說明
引入可以在線引入，也可以下載到本地引入(同引入jQuery、css的道理) ,下載到本地可以避免網絡錯誤，推薦。
vue 官網 →
4.建立好文件結構，并引入
下載好vue.js之后 我們進行如下步驟的操作：
- 打開 vscode編輯器
- 將新建的 vue-src 文件夾拖入到編輯器中
- 新建html文件夾，--- 放以后做練習的例子
- 新建js文件夾，--- 存放 vue.js
- 新建css文件夾 --- 寫樣式文件，此處用scss
5.demo 示例
6.可以做一個空模板，每次新建的時候講模板拷貝過去，詳解如下：
6.1 每次新建例子的時候，在html文件夾下新建一個 demoxxx.html 文件
6.2 拷貝muban.html 的html 到 新建的文件中
6.3 可以開始練習啦
三.安裝腳手架 練習 vue
1.安裝 node 和 腳手架
在對 vue 有一定的熟悉之后，可以動過安裝腳手架來練習Vue，因為在項目中都是用這種開發方式，同時可以安裝各種 npm 的擴展和插件 比如：axios、element-UI 等
安裝腳手架的教程網上有很多，
需要注意的是可能會因為版本的不同 每次的步驟稍有差別 ，如果是完全小白的，只要記住下面一點：
2.新建項目 (方法一)
2.1 打開VS code
2.2把新建的vue-npm文件夾拖入到VSCode中(如果是禁止狀態，把VS Code 的屬性 - 管理員運行取消即可)
2.3 按 Ctrl + ~ 快捷鍵 打開終端開始新建
終端預覽
說明：不用怕哪里出錯，因為這只是通過 npm 來新建一個文件夾，不會在電腦安裝多余內容，如果不是想要的結果，刪除安裝項目的文件夾，重新按順序執行以下安裝步驟即可
D:\aa\vueDemo\vue-npm> vue -V // 查看版本號，說明安裝成功
2.9.6
D:\aa\vueDemo\vue-npm> vue init webpack + '文件名'
// 文件名可要可不要，要表示新建一個 '文件名'文件夾
// 不要表示在當前文件夾新建
? Generate project in current directory? Yes //不加'文件名'才出現，提示在當前文件夾新建項目
? Project name vue-npm // 項目名稱，可修改
? Project description A Vue.js project // 項目描述，可修改
? Author kenqiuc // 作者，可修改。此處我修改了
? Vue build standalone // 這里選第一個，對初學沒影響
? Install vue-router? Yes // 是否安裝路由 按 y 然后按回車 推薦安裝
? Use ESLint to lint your code? No // 按 n 回車；規范代碼工具，初學不推薦，容易報錯
? Set up unit tests No // 按 n 然后按回車；單元測試，不推薦
? Setup e2e tests with Nightwatch? No // 按 n 然后按回車；也是一個測試，不推薦
? Should we run `npm install` for you after the project has been created? (recommended) npm // 初學選 npm
// 此時等待就好，等待安裝完成
大部分教程到這里就結束了，但是我不會
我給大家介紹一套簡單的學習方法，初學只要按部就班，等入門就可以靈活變通
- 如果是關閉重新打開，要找到正確的路徑打開項目
先說明打開的頁面是什么原理：
index.html - App.vue - Helloworld.vue
以寫兩個頁面作為例子：
- a.一個helloworld 的例子
1.新建一個 demo1.vue 組件，如圖
2.配置路由
3.輸入網址查看
-
b.另一個頁面
另一個
所以在page里面可以寫無數個例子，不用每次都新建一個vuex項目
說明：以上所有圖中的 vueNpm改為vue-npm ，vueSrc 改為 vue-src
