目錄

什麼是Vue.js

概念

資源 

快速搭建框架

開發環境

實踐

什麼是Vue.js

概念

中文教程：http://doc.vue-js.com/

Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建使用者介面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單檔案元件和Vue生態系統支援的庫開發的複雜單頁應用。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結

如果你是有經驗的前端開發者，想知道 Vue.js 與其它庫/框架的區別，檢視對比其它框架。

資源 

Github:https://github.com/vuejs/vue

Examples:https://vuejs.org/v2/examples/

快速搭建框架

開發環境

1.安裝webpack

npm install -g webpack

2.安裝vue-cli

vue-cli是什麼？vue-cli 是vue.js的腳手架，用於自動生成vue.js模板工程的。

安裝vue-cli：

npm install -g vue-cli
 

使用vue-cli構建專案

vue init webpack your-project-name  //建立一個基於webpack模板的名為your-project-name的專案

目前可用的模板包括：

• browserify –全功能的Browserify + vueify，包括熱載入，靜態檢測，單元測試。
• browserify-simple–一個簡易的Browserify + vueify，以便於快速開始。
• webpack–全功能的Webpack + vueify，包括熱載入，靜態檢測，單元測試。
• webpack-simple–一個簡易的Webpack + vueify，以便於快速開始。

安裝專案依賴：

cd your-project-name    //進入專案目錄
npm install        //安裝專案依賴
npm run dev        //執行專案
npm run build      //釋出專案

   此時在瀏覽器開啟：localhost:8080即可看到歡迎頁。

3.安裝element-ui

http://element-cn.eleme.io/#/zh-CN

Element，一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫.

安裝element-ui:

# 方式一
npm i [email protected] -D

# 方式二
npm install element-ui -S

新增引用配置：

在main.js檔案中加入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'


Vue.use(ElementUI)

4.修改App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <el-button @click.native="startHacking">Let's start Vue element-ui</el-button>
    <div class="block">
    <span class="demonstration">顯示預設顏色</span>
    <span class="wrapper">
    <el-button type="success">成功按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險按鈕</el-button>
    <el-button type="info">資訊按鈕</el-button>
    </span>
    </div>
    <br/>
    <div class="block">
      <span class="demonstration">hover 顯示顏色</span>
    <span class="wrapper">
    <el-button :plain="true" type="success">成功按鈕</el-button>
    <el-button :plain="true" type="warning">警告按鈕</el-button>
    <el-button :plain="true" type="danger">危險按鈕</el-button>
    <el-button :plain="true" type="info">資訊按鈕</el-button>
    </span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Use Vue 2.0 Today!'
    }
  },

  methods: {
    startHacking () {
      this.$notify({
        title: 'It Works',
        message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
        duration: 6000
      })
    }
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

如果顯示中文亂碼，請將App.vue檔案另存為選擇UTF-8儲存。

參考https://www.cnblogs.com/dwj88/p/7606224.html效果：

實踐

參考github地址：https://github.com/yqrong/vvproject

下載地址：https://pan.baidu.com/s/1C7a24Lw9xVPq9rAZHpmQVw