VUE第一個專案怎麼讀懂
VUE介紹
VUE是前端開發框架。
原始的前端開發需要工程師寫html、寫css、寫javascript(js)。js是指令碼語言，瀏覽器可以執行js來執行一些js支援的動作，例如點選反饋，下拉選單、操作html的DOM元素之類。這樣開發效率很低。
後來誕生了一些前端開發框架，VUE就是其中之一。目前在國內前端開發，特別是手機APP的H5頁面的開發中，被很多公司採用。
使用VUE開發的時候，不需要js直接操作html的DOM元素元素，只需要管理js的變數值，html會自動更新這些值（雙向繫結）。少量語句就可以實現原始方式大量編碼才能實現的功能。
IDE介紹
VUE開發的IDE多數用visio stdio code（VScode）。VScode本身只是編輯器，編譯類語言需要自己配編譯環境。
前端開發不需要配編譯環境，只需要把必須的各種庫、工具在VScode自帶的命令列介面安裝就行。具體過程網上搜“從零開始搭建vue專案
工程目錄結構介紹
剛建立好的專案一定是下面這種目錄結構（ranktable.vue是後加的，請忽略）
第一次建立工程難免會懵，啥都沒寫就出來這麼多檔案，不但數量不少，檔案種類還多。
學習VUE別想一下吃的太多，除非本身前端經驗豐富。否則先看懂紅色箭頭的幾個檔案吧，看懂這幾個就算入門了。看的順序嚴格按照下面這樣。
- index.html
- main.js
- App.vue
- index.js
- HelloWorld.vue
我將這幾個檔案大概講一講，你就能有個清晰的脈絡了。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>tradedatapy</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
頁面開發當然是要有html了，VUE開發也不例外。這個html就是整個專案的入口了。<body>裡面就一個元素，<div id="app"></div>表示本html綁定了一個id為app的VUE物件。
main.js
new Vue({ //new Vue語句就是定義了一個VUE物件
el: '#app', //vue物件的id是app
router,
components: { App }, //vue的元件名是APP
template: '<App/>' //template 名是APP
})
請看註釋，定義了一個app的VUE物件，index.html就可以找到它了。
App.vue
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<router-view/><!--default is Helloworld.vue-->
</div>
</template>
<script>
export default {
name: 'App' //export 了名為App的元件，main.js就可以找到它了
}
</script>
上面的template都理解為html的一部分片斷就行了，片斷可以拼接到html對應的位置，構成一個有內容的完整的頁面。<img src="./assets/logo.png">這句被我註釋了，否則頁面會顯示這個圖片的。下面的<route-view/>部分是路由，根據使用者的url不同，會路由到不同的vue檔案，進而展示不同的頁面內容。
index.js
專案裡有不只一個index.js，這裡講解的是router目錄下的index.js.
//這裡的配置決定了App.vue裡<router-view/>位置會展示什麼內容
export default new Router({
routes: [
{
path: '/', //當用戶訪問http://localhost:8080/根目錄也就是預設目錄會被路由到HelloWorld元件，
//這個元件的所有內容會被在App.vue裡<router-view/>顯示出來
name: 'HelloWorld',
component: HelloWorld
},
{//當用戶訪問http://localhost:8080/ranktable會顯示ranktable.vue內容
//ranktable.vue是我後加的
path: '/ranktable',
name: '/ranktable',
component: ranktable
}
]
})
HelloWorld.vue
最後看看這裡有什麼
<template>
<div>
原來的內容被我刪除了，現在頁面顯示這句話。
</div>
</template>
<script>
</script>
vscode命令列執行npm run dev，看見下面說明成功了，將地址貼進瀏覽器
Compiled successfully in 983ms 15:43:26
I Your application is running here: http://localhost:8080
如果想要更復雜的功能，在helloworld.vue實現就行了，比如我要一個填表查詢功能，裡面改成
<template>
<div>
<group title="城市">
<selector placeholder="請選擇城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"></selector>
</group>
<group title="街道">
<selector placeholder="請選擇街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"></selector>
</group>
<group title="小區">
<selector placeholder="請選擇小區" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"></selector>
</group>
<group title="日期">
<selector placeholder="請選擇日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"></selector>
</group>
<group title="統計型別">
<selector placeholder="請選擇統計型別" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"></selector>
</group>
<div style="padding:15px;">
<x-button type="primary" @click.native="getValue('plainValueRef')">查詢</x-button>
</div>
</div>
</template>
<script>
import { Selector, Group, Cell, CellBox, XButton } from 'vux'
此處省略很多東西
</script>
這個例子有點複雜，需要下面<script>裡實現一些函式，引入vux的一些元件，vux是移動端的UI框架，和VUE配合使用的。效果是這樣的
總結
對使用者的要求是html，css，JavaScript基本知識必須要有，但不要求用過jQuery等其他框架。什麼框架都沒用過直接上手完全沒障礙。