按部就班的學(xué)習(xí)方法，非常適合零基礎(chǔ)的朋友像樊，一起開始Vue學(xué)習(xí)：
1. 通過(guò)下載引用的方法使用Vue
2.通過(guò)安裝腳手架vue-cli新建項(xiàng)目
3.建立一個(gè)練習(xí)文件夾尤莺，做不同的案例
4.上傳到git，哪里都可以練習(xí)
(說(shuō)明：為方便易懂生棍，以下指定文件夾名字颤霎，實(shí)際命名是隨意命名)
一、先介紹如何在本地和 Github 建立項(xiàng)目涂滴，并同步
如果是本地練習(xí)友酱，不需要上傳 Github 在多個(gè)終端操作的，可以直接到第二塊柔纵，開始Vue
準(zhǔn)備工作：
步驟：
- 在 Git 上新建項(xiàng)目倉(cāng)庫(kù) vueDemo
2.新建完之后復(fù)制這個(gè)倉(cāng)庫(kù)在 Git 上面的的地址
3.通過(guò) sourcetree 把項(xiàng)目/倉(cāng)庫(kù)克隆到本地
3.1打開 sourcetree
3.2新建：文件-新建 / Ctrl + n / tab 欄上的 + 都可新建
3.3 填寫示例
需要注意：本地新建的文件夾需要時(shí)一個(gè)空文件夾缔杉，與Git上新建的同名即可
此時(shí)拉取線上項(xiàng)目完成，在本地進(jìn)行編輯可上傳搁料，實(shí)現(xiàn)多端和協(xié)同工作或详。初學(xué)實(shí)用于家和公司學(xué)習(xí)系羞，不用帶u盤。
4.上傳
當(dāng)在拉取的文件夾 進(jìn)行新建或者修改操作之后鸭叙，上傳工具 sourcetree 會(huì)提示有未暫存的文件 點(diǎn)擊暫存所有 / + 將文件提交為暫存文件
此時(shí)點(diǎn)擊提交按鈕觉啊，會(huì)把已暫存的文件提交到倉(cāng)庫(kù)，隨后 勾選master 點(diǎn)擊推送沈贝。步驟：暫存 - 提交 - 推送 - 確認(rèn)
5.結(jié)果查看
推送成功的變成 綠色對(duì)勾勾杠人， 完美。
二宋下、通過(guò)下載引用的方法嗡善，練習(xí)vue，可做多個(gè)練習(xí)学歧，不用重復(fù)新建
1.在電腦新建一個(gè) 名為 vueDemo (名字隨意) 的文件夾罩引，整個(gè)路徑盡量不要有中文，避免不可知的錯(cuò)誤
PS：如果是從 Git 上面克隆的項(xiàng)目/倉(cāng)庫(kù)枝笨，就直接在拉下來(lái)的文件夾 vueDemo (見上面第一板塊)進(jìn)行下一步袁铐，不用新建
2.在 vueDemo文件夾 新建兩個(gè)文件夾：
- 一個(gè)命名 vue-src (名字隨意，用來(lái)以引用的方法練習(xí)vue)
- 另一個(gè)命名 vue-npm (名字隨意横浑，不要中文剔桨，不要包含大寫，通過(guò)安裝腳手架的方法練習(xí)vue)
如果是創(chuàng)建了Git倉(cāng)庫(kù)的徙融，此時(shí)文件夾會(huì)變成問(wèn)號(hào)洒缀，后面還會(huì)出現(xiàn)感嘆號(hào)，這表示文件做了新增和修改欺冀，只需要正確提交就沒(méi)有了树绩。
3.下載并引入vue.js
官網(wǎng)介紹很清楚，這里做簡(jiǎn)潔明了的說(shuō)明
引入可以在線引入隐轩，也可以下載到本地引入(同引入jQuery饺饭、css的道理) ,下載到本地可以避免網(wǎng)絡(luò)錯(cuò)誤，推薦龙助。
vue 官網(wǎng) →
4.建立好文件結(jié)構(gòu)砰奕，并引入
下載好vue.js之后 我們進(jìn)行如下步驟的操作：
- 打開 vscode編輯器
- 將新建的 vue-src 文件夾拖入到編輯器中
- 新建html文件夾，--- 放以后做練習(xí)的例子
- 新建js文件夾提鸟，--- 存放 vue.js
- 新建css文件夾 --- 寫樣式文件军援，此處用scss
5.demo 示例
6.可以做一個(gè)空模板，每次新建的時(shí)候講模板拷貝過(guò)去称勋，詳解如下：
6.1 每次新建例子的時(shí)候胸哥，在html文件夾下新建一個(gè) demoxxx.html 文件
6.2 拷貝muban.html 的html 到 新建的文件中
6.3 可以開始練習(xí)啦
三.安裝腳手架 練習(xí) vue
1.安裝 node 和 腳手架
在對(duì) vue 有一定的熟悉之后，可以動(dòng)過(guò)安裝腳手架來(lái)練習(xí)Vue赡鲜，因?yàn)樵陧?xiàng)目中都是用這種開發(fā)方式空厌，同時(shí)可以安裝各種 npm 的擴(kuò)展和插件 比如：axios庐船、element-UI 等
安裝腳手架的教程網(wǎng)上有很多，
需要注意的是可能會(huì)因?yàn)榘姹镜牟煌?每次的步驟稍有差別 嘲更，如果是完全小白的筐钟，只要記住下面一點(diǎn)：
2.新建項(xiàng)目 (方法一)
2.1 打開VS code
2.2把新建的vue-npm文件夾拖入到VSCode中(如果是禁止?fàn)顟B(tài)，把VS Code 的屬性 - 管理員運(yùn)行取消即可)
2.3 按 Ctrl + ~ 快捷鍵 打開終端開始新建
終端預(yù)覽
說(shuō)明：不用怕哪里出錯(cuò)赋朦，因?yàn)檫@只是通過(guò) npm 來(lái)新建一個(gè)文件夾篓冲，不會(huì)在電腦安裝多余內(nèi)容，如果不是想要的結(jié)果宠哄，刪除安裝項(xiàng)目的文件夾壹将，重新按順序執(zhí)行以下安裝步驟即可
D:\aa\vueDemo\vue-npm> vue -V // 查看版本號(hào)，說(shuō)明安裝成功
2.9.6
D:\aa\vueDemo\vue-npm> vue init webpack + '文件名'
// 文件名可要可不要毛嫉，要表示新建一個(gè) '文件名'文件夾
// 不要表示在當(dāng)前文件夾新建
? Generate project in current directory? Yes //不加'文件名'才出現(xiàn)诽俯，提示在當(dāng)前文件夾新建項(xiàng)目
? Project name vue-npm // 項(xiàng)目名稱，可修改
? Project description A Vue.js project // 項(xiàng)目描述承粤，可修改
? Author kenqiuc // 作者暴区，可修改。此處我修改了
? Vue build standalone // 這里選第一個(gè)辛臊，對(duì)初學(xué)沒(méi)影響
? Install vue-router? Yes // 是否安裝路由 按 y 然后按回車 推薦安裝
? Use ESLint to lint your code? No // 按 n 回車颜启；規(guī)范代碼工具，初學(xué)不推薦浪讳，容易報(bào)錯(cuò)
? Set up unit tests No // 按 n 然后按回車；單元測(cè)試涌萤，不推薦
? Setup e2e tests with Nightwatch? No // 按 n 然后按回車淹遵；也是一個(gè)測(cè)試，不推薦
? Should we run `npm install` for you after the project has been created? (recommended) npm // 初學(xué)選 npm
// 此時(shí)等待就好负溪，等待安裝完成
大部分教程到這里就結(jié)束了，但是我不會(huì)
我給大家介紹一套簡(jiǎn)單的學(xué)習(xí)方法川抡，初學(xué)只要按部就班辐真，等入門就可以靈活變通
- 如果是關(guān)閉重新打開，要找到正確的路徑打開項(xiàng)目
先說(shuō)明打開的頁(yè)面是什么原理：
index.html - App.vue - Helloworld.vue
以寫兩個(gè)頁(yè)面作為例子：
- a.一個(gè)helloworld 的例子
1.新建一個(gè) demo1.vue 組件崖堤，如圖
2.配置路由
3.輸入網(wǎng)址查看
-
b.另一個(gè)頁(yè)面
另一個(gè)
所以在page里面可以寫無(wú)數(shù)個(gè)例子侍咱，不用每次都新建一個(gè)vuex項(xiàng)目
說(shuō)明：以上所有圖中的 vueNpm改為vue-npm ，vueSrc 改為 vue-src
