1.Hello Vue.js
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>/*引入js文件 */
<script> new Vue({ /* 創建一個對象，兩個屬性。 */ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { details: function() { return this.site + " - 學的不僅是技術，更是夢想！"; } }) </script>
?
{{ message }}
?
當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，html 視圖將也會產生相應的變化。
2.安裝Node.js,配置環境，下載vue.
（1）Node.js下載網址：Download | Node.js
（2）檢測PATH環境變量是否配置了Node.js，點擊開始=》運行=》輸入"cmd" => 輸入命令"path"，輸出結果環境變量中包含node.js的安裝路徑。node --version看是否正確顯示版本。
（3）配置默認安裝目錄和緩存日志目錄
-
首先在目標位置創建兩個文件夾【node_global】及【node_cache】分別作為默認安裝目錄和緩存日志目錄。
-
執行命令，將npm的全局模塊目錄和緩存目錄配置到我們剛才創建的那兩個目錄：
npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"
npm config get prefix查看npm全局安裝包保存路徑npm config get cache查看npm裝包緩存路徑npm list -global命令來查看全局安裝目錄npm config list查看所有npm 配置(4)node.js環境配置
“我的電腦”-右鍵-“屬性”-“高級系統設置”-“高級”-“環境變量”，進入環境變量對話框
1、【系統變量】下新建【NODE_PATH】，此處設置第三方依賴包安裝目錄。如果跟著第2步修改了全局安裝目錄，則輸入【D:\Program Files\nodejs\node_global\node_modules 】（真實路徑下創建node_modules文件夾）
2、【系統變量】下的【Path】添加上node的路徑【D:\Program Files\nodejs\】（如果已有的話就不用再設置了）
（5）配置淘寶鏡像源
-
查看npm下載源 ：
npm config get registry
-
將npm的模塊下載倉庫從默認的國外站點改為國內的站點，這樣下載模塊的速度才能比較快，現在用的都是淘寶鏡像源（https://registry.npm.taobao.org）
安裝cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
驗證:查看npm下載源是否配置成功，配置后為淘寶鏡像，表示配置成功
cnpm config get registry` 或 `cnpm config list
(6).安裝vue.js
cnpm install vue -g
查看安裝的vue信息：
cnpm info vue
(7)安裝webpack模板
-
在命令行中運行命令
npm install webpack -g，然后等待安裝完成。 -
安裝webpack-cli：
npm install --global webpack-cli， -
安裝成功后可使用
webpack -v查看版本號。
(8)安裝腳手架vue-cli 2.x
npm install vue-cli -g
用這個命令來檢查其版本是否正確：vue --version或vue -V
這里順手安裝上vue-router
npm install -g vue-router
參考博客：Vue安裝及環境配置、開發工具_袁小萌同學的博客-CSDN博客
打包
目錄結構
v-html 指令用于輸出 html 代碼： v-html=" " v-else-if="" v-else
v-bind綁定Vue 實例的數據到 HTML 元素的屬性 v-bind:class=" " //縮寫 :class=""
v-if 指令進行判斷。 v-if=" "
v-on 指令監聽 DOM 事件 <a v-on:click="doSomething"> //縮寫@click="doSomething"
v-model 指令用來在 input、select、textarea、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。
v-for循環 v-for=" "
