我與VueJs第1天_Vue Cli安裝及設定_一個簡單範例
Vue Js作者是一位來自大陸的程式設計師尤雨溪
於2014推出此套MVVM前端框架
首先電腦必須安裝好Node Js相關軟體
node 跟 npm
接著RUN看看vue version檢查是否已經安裝好vue cli (Command-Line Interface)
如果沒有就透過npm (就跟visual studio的Nuget差不多)來進行套件安裝
需要跑一段時間 8~15分鐘左右
npm install --global @vue/cli
RUN好之後就代表 vue cli已經裝好了
接著到Vue Js的官方網站看一下指南
https://vuejs.org/v2/guide/
要進行Vue的開發必須引用到其CDN(Content Delivery Network)
有分成 development 跟 production兩個版本
這裡我選擇用開發版本會有warning訊息利於debug
在空空的專案目錄
D:\ModernWeb\Vue\VueApp1
新增一個index.html檔案
這裡教一個快速偷吃步法
迅速創建一個html檔案(不用自己花時間寫一堆)
首先vscode 創建的新文本底下的可以選擇此檔案種類
就會自動生成html文本內容的架構了
接著推薦幾套vs code插件對於後續編輯也有幫助
自動補齊套件
書籤套件便於程式跳躍查覽
括號加深顏色提示
其他的主要都是語法提示性質的
Vue語法提示的推這套
這裡寫一個最簡單的Vue App
來測試文字輸出
程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="myapp">{{message}}</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el : '#myapp', data : { message: 'Hello My Vue' } }) </script> </body> </html> |
我們創建一個id為myapp的div dom元素
於引用Vue CDN之後
New出一個Vue Model 小括號要傳入一個物件
第一個屬性 el 用來指定要連結的dom id ,要綁訂到哪一個元素上(el就是element意思)
第二個屬性data代表此實體中的資料
data裏頭創建自定義欄位message填上字串內容
透過雙重大括號來將已綁定的Vue實體中Data秀出文字訊息(雙向綁定)
另外
Vue 3 Snippets
https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
也很推薦安裝
參考:
https://www.npmjs.com/package/@vue/cli
https://kknews.cc/news/bp9vg6n.html
https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
參考:
https://www.npmjs.com/package/@vue/cli
https://kknews.cc/news/bp9vg6n.html
https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
留言
張貼留言