我與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

留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題