• 知識準備
• 環(huán)境搭建
• hello world
• 開發(fā)腳手架介紹

知識準備

• nodejs:

nodejs是一個基于Chrome V8內核的JavaScript運行環(huán)境。

在系統(tǒng)環(huán)境上直接運行JavaScript代碼，不用依托于瀏覽器。

• 模塊化

根據高內聚，低耦合的設計原則，用獨立、相互作用的模塊，來處理復雜，大型的系統(tǒng)

這個...就不多說了

• npm

npm（全稱Node Package Manager，即node包管理器）是Node.js默認的、以JavaScript編寫的軟件包管理系統(tǒng)。

.NET的nuget，Ruby的Gem，PHP的Composer，珍珠的spm

常見的npm操作

# 根據package.json安裝全部包
npm install 

# 安裝指定包并改寫package.json
npm install lodash --save

# 卸載一個包
npm uninstall lodash

• es6的常見語法

語法不是強制的，但稍微了解，有助于閱讀官方的demo和別人的代碼

let和const分別用于聲明作用域變量和常量

let a = 'some string'
const b = Math.PI

箭頭函數

var a = [1, 2, 3].map(o => o)
// 等價于
var a = [1, 2, 3].map(function(o) {return o})

解構賦值

var a = {b: 1, c: 2}
var {b, c} = a
console.log(b, c) // -> 1 2

對象簡潔表示

var b = 1
var c = 2
var a = {b, c}

// 等價于
var a = {b: b, c: c}

模塊調用

// 引入moment模塊
import moment from 'moment'

// 創(chuàng)建一個函數返回當前月份
var month = function () {
  return moment().format('MM')
}
// 將這個函數作為默認項導出
export default month

更多操作請詳讀ECMAScript 6 入門

環(huán)境搭建

這邊先不說了，網上的教程很多 ~
需要的小伙伴，可以提出來，我后面補上。

vue 簡單介紹

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。

具體教程認真看幾遍官方文檔就好了

介紹幾個基礎指令，感受下數據驅動視圖的理念

與以往jquery的操作有什么不同

• 數據綁定
• 循環(huán)
• 條件
• 事件
• 雙向綁定

先來個hello world

v-bind綁定數據，可簡寫為:，{{}}用于模板聲明

<div id="app" v-bind:title="title">
  {{ message }}
</div>

const app = new Vue({
  el: '#app',
  data: function () {
    return {
      message: 'hello world',
      title: 'this is a title'
    }
  }
})

列表數據處理

v-for用于循環(huán)渲染

<div id="app">
  <ul>
    <li v-for="station in stations">
      <span>測站：{{station.name}}</span>
      <span>水位：{{station.rz}} m</span>
    </li>
  </ul>
</div>

const app = new Vue({
  el: '#app',
  data: function () {
    return {
      stations: [
        {name: '八一', rz: 15.123, flood: 18}, 
        {name: '溪源', rz: 10.142, flood: 12}
      ]
    }
  }
})

加個點擊事件修改數據

v-on用于綁定事件，可簡寫為@

<div id="app">
  <ul>
    <li v-for="station in stations">
      <span>測站：{{station.name}}</span>
      <span>水位：{{station.rz}} m</span>
      <button v-on:click="station.rz += 1">漲</button>
    </li>
  </ul>
</div>

加個超汛限判斷條件

v-if用于標簽渲染的邏輯判斷

<div id="app">
  <ul>
    <li v-for="station in stations">
      <span>測站：{{station.name}}</span>
      <span>水位：{{station.rz}} m</span>
      <span v-if="station.rz > station.flood">滴滴滴</span>
      <button v-on:click="station.rz += 1">漲</button>
    </li>
  </ul>
</div>

總共有幾個測站超警？加個計算屬性統(tǒng)計下

computed用于掛載計算結果

<div id="app">
  ...省略部分
  <p>共有 {{total}} 個測站超過汛限水位</p>
</div>

const app = new Vue({
  ...,
  computed: {
    total: function () {
      return this.stations.filter(station => station.rz > station.flood).length
    }
  }
})

我們把剛才的事件方法稍微改造下

methods用于掛載方法

<div id="app">
  <ul>
    <li v-for="station in stations">
      ...
      <button @click="goup(station)">漲</button>
      ...
    </li>
  </ul>
</div>

const app = new Vue({
  ...,
  methods: {
    goup: function (station) {
      station.rz += 1 
    }
  }
})

看看如何數據雙向綁定

v-model用于雙向綁定數據

<div id="app">
  ...省略
  <p>共有 {{total}} 個測站超過{{overline}}</p>
  <input type="text" v-model="overline">
</div>

const app = new Vue({
  el: '#app',
  data: function () {
    return {
      overline: '汛限水位',
      ...
    }
  },
  ...
})

vue實例的生命周期，用力點擊

用vue-cli初始化項目

官方提供多套模板選擇，同時支持定制

# 用一個官方的簡單腳手架做例子
vue init webpack-simple demo

# init 為命令
# webpack-simple 為腳手架名稱
# demo 為項目文件夾名稱

# 安裝完畢后執(zhí)行即可看到結果
cd demo
npm install
npm run dev

# 在src/App.vue中能看到源碼

腳手架運行機制簡單介紹(可選了解)

1. 先了解npm命令行的機制

   # 運行package.json scripts中對應的命令
   npm run dev
   
   

2. 再看看對應命令做了什么事情

   # 先執(zhí)行跨平臺環(huán)境配置，再執(zhí)行webpack-dev-server
   cross-env NODE_ENV=development webpack-dev-server --open --hot
   
   

3. 了解下webpack這個神奇的東西如何打包，中文文檔

4. 在webpack.config.js中看webpack相關配置，了解loader相關內容

5. 所以，.vue文件，本質上是被'vue-loader'轉換成了js模塊，文檔

6. webpack默認根據配置，打包各種文件，動態(tài)生成build.js文件，然后我們訪問'index.html'，即看到結果