Vue(1)－崛起

Vue(1)－崛起

Vue崛起

Vue在2014年被發佈，在沒還發布之前，不管是angular2和React都會使開發者，花費不少時間學習，然而Vue出現，有著好的設計MVVM模式與最小的儲存容量，讓開發者不需要花太多時間學習就可上手並且不會占用瀏覽器太大的空間。這些特性讓他在2016年擁有驚人的 89％的開發人員滿意度評估。

Vue範例檔案結構

ex1 /
|- dist
|-app.bundle.js
|- app.js
|- app.html
|- webpack.config.js
|-package.json

首先必須要安裝nodejs環境，並且新增一個專案

$> npm init
安裝Vue套件，加入package.json

$>npm install vue –save-dev

新增 app.js

import Vue from 'vue'

new Vue({
    el:"#app",
    template:"<div>Hellow world!</div>"
})

新增 app.js

<html>

<body>
    <div id="app"></div>
</body>

<script src="dist/app.bundle.js"></script>

</html>

webpack設定檔: webpack.config.js

const path = require('path');
module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
      },
      resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
      }
    }
  };

打包

$>webpack

功能顯示

執行app.html
enter image description here

留言