Eugene's Blog
0%

[Vue]Vue簡介

發表於 更新於 分類於 閱讀次數：
2.8k 5 分鐘

前情提要

目前公司開發產品選擇vue.js作為前端開發框架，選擇原因不外呼是

  • 容易上手
  • 考量到產品之後會由大陸團隊接手
  • Virtual Dom設計，效能方面不需要擔心

內容

產品開發之路是遙遠的路途，就決定好好研究它吧，起手式當然是要來寫一支Hello World程式。

Vue的好處之一是若舊網站某些頁面很吃重前端效果則可考慮在該頁單獨使用它，可以感受model雙向綁定帶來的好處。這種方式只要將vue檔案載入就可以開始使用vue了。

使用vue方式一

載入vue.js檔案即可在頁面使用vue

1
2
<!-- body區塊結尾前宣告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

載入完畢後，來初始化吧

1
2
3
4
5
6
7
// script區塊中宣告
var app = new Vue({
  el: '#app',//作用域
  data: {
    message: 'Hello Vue!'
  }
})

最後套用於body區塊中，在任意div中套用id為app，在該範圍中vue就生效了。

1
2
3
4
5
<!-- body區塊中宣告 -->
<!--對應作用域選取元素-->
<div id="app">
  {{ message }}
</div>

完整html檔案如下：

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Vue</title>
</head>
<body>
    <div id="app">
      {{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app', //作用域
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

使用vue方式二

利用vue-cli建立完整的前端專案

首先要先提到vue-cli工具，可透過npm進行安裝，指令如下：

1
npm install -g vue-cli

使用vue --version來確認是否安裝成功，若出現版號，恭喜你成功了(筆者這邊環境是會出現2.8.2)。我們可以使用vue help來觀看一下支援哪些command吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
λ  vue help

  Usage: vue <command> [options]


  Options:

    -V, --version  output the version number
    -h, --help     output usage information


  Commands:

    init        generate a new project from a template
    list        list available official templates
    build       prototype a new project
    help [cmd]  display help for [cmd]

我們等等建立vue application時會使用到list init指令來完成。

首先先使用vue list觀看一下有哪些現成template可使用，參考如下：

1
2
3
4
5
6
7
8
9
10
λ  vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

若使用vue撰寫純前端的application則建議直衝webpack(full)，主要支援hot reload，亦可選擇並設定好router相關設定。跟著筆者一起建立vue application吧。

使用init初始化專案，webpack關鍵字為選擇vue-cli提供之webpack template，最後名稱是專案名稱，使用VueTestApp。

1
vue init webpack VueTestApp

執行步驟為

  • 進入到專案資料夾
1
cd VueTestApp
  • 安裝npm套件
1
npm install
  • npm run方式執行Application
1
npm run dev

瀏覽http://localhost:8080，看到以下畫面，那就再次恭喜你了，達成成功撰寫vue application成就。

結論

看完內容中的教學，應該可以感受到建置vue application並不困難，簡單幾個步驟即可開始撰寫，選vue準沒錯。最後筆者期許自己能夠寫完一系列的教學文，下一篇要來介紹一下webpack template建立之資料夾結構及各檔案的說明。

相關文章