知识准备
环境搭建
hello world
开发脚手架介绍

知识准备

nodejs:

nodejs是一个基于Chrome V8内核的JavaScript运行环境。

在系统环境上直接运行JavaScript代码，不用依托于浏览器。

模块化

根据高内聚，低耦合的设计原则，用独立、相互作用的模块，来处理复杂，大型的系统

这个...就不多说了

npm（全称Node Package Manager，即node包管理器）是Node.js默认的、以JavaScript编写的软件包管理系统。

.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'

// 创建一个函数返回当前月份
var month = function () {
  return moment().format('MM')
}
// 将这个函数作为默认项导出
export default month

更多操作请详读ECMAScript 6 入门

环境搭建

这边先不说了，网上的教程很多 ~
需要的小伙伴，可以提出来，我后面补上。

vue 简单介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

具体教程认真看几遍官方文档就好了

介绍几个基础指令，感受下数据驱动视图的理念

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

数据绑定
循环
条件
事件
双向绑定

先来个hello world

v-bind绑定数据，可简写为:，{{}}用于模板声明


  {{ message }}


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

列表数据处理

v-for用于循环渲染


  
    
      测站：{{station.name}}
      水位：{{station.rz}} m
    
  


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

加个点击事件修改数据

v-on用于绑定事件，可简写为@


  
    
      测站：{{station.name}}
      水位：{{station.rz}} m

加个超汛限判断条件

v-if用于标签渲染的逻辑判断


  
    
      测站：{{station.name}}
      水位：{{station.rz}} m
      滴滴滴

总共有几个测站超警？加个计算属性统计下

computed用于挂载计算结果


  ...省略部分
  共有 {{total}} 个测站超过汛限水位


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

我们把刚才的事件方法稍微改造下

methods用于挂载方法


  
    
      ...
      
      ...
    
  


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

看看如何数据双向绑定

v-model用于双向绑定数据


  ...省略
  共有 {{total}} 个测站超过{{overline}}
  


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

vue实例的生命周期，用力点击

用vue-cli初始化项目

官方提供多套模板选择，同时支持定制

# 用一个官方的简单脚手架做例子
vue init webpack-simple demo

# init 为命令
# webpack-simple 为脚手架名称
# demo 为项目文件夹名称

# 安装完毕后执行即可看到结果
cd demo
npm install
npm run dev

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

脚手架运行机制简单介绍(可选了解)

先了解npm命令行的机制

# 运行package.json scripts中对应的命令
npm run dev

再看看对应命令做了什么事情

# 先执行跨平台环境配置，再执行webpack-dev-server
cross-env NODE_ENV=development webpack-dev-server --open --hot

了解下webpack这个神奇的东西如何打包，中文文档
在webpack.config.js中看webpack相关配置，了解loader相关内容
所以，.vue文件，本质上是被'vue-loader'转换成了js模块，文档
webpack默认根据配置，打包各种文件，动态生成build.js文件，然后我们访问'index.html'，即看到结果

vue