前者MVC Vue2学习总结(七)——ES6及Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示范

应用vue-cli可以正式类,提高开支效率,但是以vue-cli时需要有的ECMAScript6的学识,特别是ES6面临的模块管理内容,本章先介绍ES6遭到的底蕴和模块化的内容又利用vue-cli开发vue项目。

一、ECMAScript6概要

ECMAScript是一模一样种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European
Computer Manufacturers
Association)通过ECMA-262口径的脚本程序设计语言。这种语言在万维网上以广泛,它数吃叫作JavaScript或JScript,但实则后两者是ECMA-262正经的贯彻同扩大。

2015年6月17日,ECMAScript 6发表正式版本,即ECMAScript 2015。

图片 1

ES6凡是继ES5之后的平不善主要改善,语言专业由ES5.1一代的245页扩充到600页。ES6增添了森必不可少之特征,例如:模块和类,以及有实用特性,例如Maps、Sets、Promises、生成器(Generators)等。尽管ES6举行了大量之翻新,但是她依然完全向后相当以前的本,标准化委员会决定避免由于不兼容版本语言致的“web体验破碎”。结果是,所有老代码都可正常运转,整个过渡为展示越发平滑,但随之而来的题目是,开发者们叫苦不迭了多年底一味问题仍是。

大概说ES就是JavaScript语言的落实规范,ES6凡是相同比新的本子,使JavaScript更加规范与强。

1.0.攻资源

自引进的ES6修材料是始于源书籍《ECMAScript 6
入门》,全面介绍 ECMAScript 6
新引入的语法特性。

图片 2

URL:http://es6.ruanyifeng.com/

源码:https://github.com/ruanyf/es6tutorial/

  • ECMAScript 6
    扫盲–小胡子
  • 英文原版-ES6-for-humans
  • 深入浅出ES6
  • ECMAScript 6入门–阮一峰

1.1. let、const 和块级作用域

let 允许创建块级作用域,ES6 推荐以函数中动用 let 定义变量,而非 var:

var a = 2;
{
  let a = 3;
  console.log(a); // 3
}
console.log(a); // 2

平于块级作用域有效之任何一个变量声明方式是
const,它可声明一个常量。ES6 中,const
声明的常量类似于指针,它对某个引用,也就是说这个「常量」并非一成不变的,如:

{
  const ARR = [5,6];
  ARR.push(7);
  console.log(ARR); // [5,6,7]
  ARR = 10; // TypeError
}

生几个点得专注:

  • let 关键词声明的变量不持有变量提升(hoisting)特性
  • let 和 const 声明只以无比贴近的一个片被(花括号内)有效
  • 当用常量 const 声明时,请动大写变量,如:CAPITAL_CASING
  • const 在声明时得被赋值

默认情况下javascript中并没有块级(block)作用域:

            var i = 100;
            if(true) {
                var i=200;
                console.log(i);
            }
            console.log(i);

结果:

图片 3

使用let定义:

            let i = 100;
            if(true) {
                //var i=200;  //Identifier 'i' has already been declared  变量定义
                let i=200;
                console.log(i);
            }
            console.log(i);

结果:

图片 4

 默认情况javascript中定义之变量都是弱类型的,可以动态变化:

            let i = 100;
            if(true) {
                i=true;
                console.log(i);
            }
            console.log(i);

结果:

图片 5

设使用const定义,则须赋值且无同意修改。

1.2. 箭头函数(Arrow Functions)

ES6 中,箭头函数就是函数的平栽简写形式,使用括号包裹参数,跟随一个
=>,紧接着是函数体:

var getPrice = function() {
  return 4.55;
};

// Implementation with Arrow Function
var getPrice = () => 4.55;

用留意的凡,上面例子中的 getPrice 箭头函数采用了简洁函数体,它不需要
reture 语句,下面是事例使用的是正常函数体:

let arr = ['apple', 'banana', 'orange'];

let breakfast = arr.map(fruit => {
  return fruit + 's';
});
console.log(breakfast); // apples bananas oranges

本来,箭头函数不仅仅是于代码变得简洁,函数中 this
总是绑定总是指于目标自我。具体可省下面几乎独例证:

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式下,growUp() 函数的 this 指向 window 对象
    this.age++;
  }, 1000);
}
var person = new Person();

咱们经常得使用一个变量来保存 this,然后以 growUp 函数中援:

function Person() {
  var self = this;
  self.age = 0;

  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

比方用箭头函数可以省这个累:

function Person(){
  this.age = 0;

  setInterval(() => {
    // |this| 指向 person 对象
    this.age++;
  }, 1000);
}

var person = new Person();

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ES6</title>
    </head>

    <body>
        <script type="text/javascript">
            var add1 = function(a, b) {
                return a + b;
            }
            var add2 = (a, b) => a + b;

            var f1 = function(n) {
                return n + 1;
            }
            var f2 = n => n + 1;

            function counter1() { //普通情况
                this.n = 100;
                var self = this;
                (function(i) {
                    self.n += i;
                    console.log(self.n);
                })(50);
            }
            var c1 = new counter1();

            function counter2() {
                this.n = 100;
                setTimeout(function() { //错误,this指向window
                    console.log(this);
                    this.n += 50;
                    console.log(this.n);
                }, 1000);
            }
            var c2 = new counter2();

            function counter3() {
                this.n = 100;
                setTimeout(() => { //箭头函数,this指向当前对象
                    console.log(this);
                    this.n += 50;
                    console.log(this.n);
                }, 1000);
            }
            var c3 = new counter3();
        </script>
    </body>

</html>

结果:

图片 6

1.3. 函数参数默认值

ES6 中允许你针对函数参数设置默认值:

let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850

示例:

            function add(n1=100,n2=200){
                return n1+n2;
            }

            console.log(add());
            console.log(add(1));
            console.log(add(1,1));

结果:

图片 7

1.4. Spread / Rest 操作符

Spread / Rest 操作符指的凡 …,具体是 Spread 还是 Rest
需要看上下文语境。

当让用于迭代器中不时,它是一个 Spread 操作符:

function foo(x,y,z) {
  console.log(x,y,z);
}

let arr = [1,2,3];
foo(...arr); // 1 2 3

示例:

        <script type="text/javascript">
            function show(n1,n2,n3){
                console.log(n1,n2,n3);
            }

            var arr=[5,7,9,1,6,7];
            show(1,2,3);
            show(arr);

            show(...arr);  //将数组中的前3位取出作为3个参数的值
        </script>

结果:

图片 8

当于用于函数传参时,是一个 Rest 操作符:

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

示例:

        <script type="text/javascript">
            function show(...args){  //可变参数,args是一个数组
                console.log(args);
            }

            show(1,2,3,true,false,'Hello'); 
        </script>

结果:

图片 9

1.5. 对象词法扩展

ES6
允许声明在对象字面量时行使简写语法,来初始化属性变量和函数的定义方法,并且同意在靶属性被展开测算操作:

function getCar(make, model, value) {
  return {
    // 简写变量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value

    // 属性可以使用表达式计算值
    ['make' + make]: true,

    // 忽略 `function` 关键词简写对象函数
    depreciate() {
      this.value -= 2500;
    }
  };
}

let car = getCar('Barret', 'Lee', 40000);

// output: {
//     make: 'Barret',
//     model:'Lee',
//     value: 40000,
//     makeBarret: true,
//     depreciate: function()
// }

示例:

<script type="text/javascript">
            function createProduct(name,price){
                return {
                    "name":name,
                    "price":price,
                    "iphone8Desc":name+"_"+price,
                    "show":function(){
                        console.log("名称:"+this.name+" 价格:"+this.price);
                    }
                }
            }

            var phone1=createProduct("iphone8",5898.5);
            phone1.show();
            console.log(JSON.stringify(phone1));
            console.log(phone1);


            //ES6中定义对象的语法糖
            function createPdt(name,price){
                return {
                    name,
                    price,
                    [name+"Desc"]:name+"_"+price,
                    show(){
                        console.log("名称:"+this.name+" 价格:"+this.price);
                    }
                }
            }
            var phone2=createPdt("iphone8",5898.5);
            phone2.show();
            console.log(JSON.stringify(phone2));
            console.log(phone2);
        </script>

结果:

图片 10

1.6. 二进制和八前进制字面量

ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者 0O
即可将那易为第二迈入制值:

let oValue = 0o10;
console.log(oValue); // 8

let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

1.7. 靶同数组解构

解构可以避在目标赋值时出中变量:

function foo() {
  return [1,2,3];
}
let arr = foo(); // [1,2,3]

let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3

function bar() {
  return {
    x: 4,
    y: 5,
    z: 6
  };
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

示例:

            function getArray(){
                return [1,3,5];
            }
            let [n1,n2,n3,n4]=getArray();   //调用函数,将数组值分别给n1,n2,n3
            console.log(n1,n2,n3,n4);

            function getObj(){
                return {name:"tom",age:18};
            }
            let {name:nickname,age:myage}=getObj();  //将对象的name与age给定义的变量赋值
            console.log(nickname,myage);

结果:

图片 11

1.8. 靶超类

ES6 允许在对象吃运用 super 方法:

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}

var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}

Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

示例:

            var car={
                voice(){
                    console.log("车在叫...");
                }
            };

            var bus={
                voice(){
                    super.voice();
                    console.log("大巴车在叫...");
                }
            }
            Object.setPrototypeOf(bus,car);  //将bus的原型指向car
            bus.voice();

结果:

图片 12

1.8.1、Object.setPrototypeOf 方法的使

图片 13

以一个指定的对象的原型设置为外一个目标或null(既对象的[[Prototype]]个中属性).

示例:

        <script type="text/javascript">
            var Car=function(){
                this.name="车";
            }

            var benz=new Car();
            console.log(benz.name);

            Object.setPrototypeOf(benz,{name:"小轿车",price:"23456"});
            console.log(benz.name);  //未重写
            console.log(benz.price);
        </script>

结果:

图片 14

 

语法

Object.setPrototypeOf(obj, prototype)

参数

obj
以被安装原型的对象.

prototype
拖欠对象新的原型(可以是一个对象要null).

1.8.2、Object.defineProperty

Object.defineProperty(被扩大的靶子名,属性名,{属性之价值})
可以用于扩大对象的习性

唯独好指定只读属性

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Object.defineProperty()</title>
    </head>

    <body>
        <script>
            var tom = {
                name: "tom"
            };
            tom.age = 90;
            tom["age"] = 88;
            console.log("tom.age=" + tom.age);

            var rose = {
                name: "rose"
            };
            Object.defineProperty(rose, "age", {
                value: 98,
                writable:false  //只读
            });
            rose.age=18;  //修改无效
            console.log("rose.age=" + rose.age);
        </script>
    </body>

</html>

结果:

图片 15

 

1.9. 模板语法和分隔符

ES6 中来同等种死简之措施组装一堆字符串和变量。

${ … } 用来渲染一个变量
` 作为分隔符

let user = 'Barret';
console.log(`Hi ${user}!`); // Hi Barret!

1.10. for…of VS for…in

for…of 用于遍历一个迭代器,如数组:

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
  console.log(nickname);
}
Result: di, boo, punkeye
for...in 用来遍历对象中的属性:

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
  console.log(nickname);
}
Result: 0, 1, 2, size

1.11. Map 和 WeakMap

ES6 中少栽新的数据结构集:Map 和 WeakMap。事实上每个对象还可以当是一个
Map。

一个靶由多只 key-val 对构成,在 Map 中,任何类型且好当作目标的
key,如:

var myMap = new Map();

var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};

// 设置值
myMap.set(keyString, "value 与 'a string' 关联");
myMap.set(keyObj, "value 与 keyObj 关联");
myMap.set(keyFunc, "value 与 keyFunc 关联");

myMap.size; // 3

// 获取值
myMap.get(keyString);    // "value 与 'a string' 关联"
myMap.get(keyObj);       // "value 与 keyObj 关联"
myMap.get(keyFunc);      // "value 与 keyFunc 关联"
WeakMap

WeakMap 就是一个 Map,只不过它的装有 key 都是去世引用,意思就是是 WeakMap
中之物垃圾回收时不考虑,使用她并非顾虑内存泄漏问题。

其它一个亟需注意的点是,WeakMap 的享有 key 必须是目标。它仅仅发四独主意
delete(key),has(key),get(key) 和 set(key, val):

let w = new WeakMap();
w.set('a', 'b'); 
// Uncaught TypeError: Invalid value used as weak map key

var o1 = {},
    o2 = function(){},
    o3 = window;

w.set(o1, 37);
w.set(o2, "azerty");
w.set(o3, undefined);

w.get(o3); // undefined, because that is the set value

w.has(o1); // true
w.delete(o1);
w.has(o1); // false

1.12. Set 和 WeakSet

Set
对象是一模一样组不更的价值,重复的价将给忽视,值类型可以是原始类型和援类型:

let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add('strings');
mySet.add({ a: 1, b:2 });
可以通过 forEach 和 for...of 来遍历 Set 对象:

mySet.forEach((item) => {
  console.log(item);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
});

for (let value of mySet) {
  console.log(value);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
}

Set 同样有 delete() 和 clear() 方法。

WeakSet

仿佛于 WeakMap,WeakSet 对象足以叫你在一个会合中保留对象的死亡引用,在
WeakSet 中的目标仅允许出现同等潮:

var ws = new WeakSet();
var obj = {};
var foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo);    // false, foo 没有添加成功

ws.delete(window); // 从结合中删除 window 对象
ws.has(window);    // false, window 对象已经被删除

1.13. 类

ES6 中产生 class 语法。值得注意是,这里的 class
不是新的靶子继承模型,它才是原型链的语法糖表现形式。

函数中利用 static 关键词定义构造函数的底法与总体性:

class Task {
  constructor() {
    console.log("task instantiated!");
  }

  showId() {
    console.log(23);
  }

  static loadAll() {
    console.log("Loading all tasks..");
  }
}

console.log(typeof Task); // function
let task = new Task(); // "task instantiated!"
task.showId(); // 23
Task.loadAll(); // "Loading all tasks.."

示例:

            class Animal{
                constructor(){  //构造方法,可无
                    console.log("正在构造一只动物");
                }

                bark(){
                    console.log("动物在叫...");
                }

                static eat(){
                    console.log("动物在吃东西...");
                }
            }

            var pig=new Animal();
            pig.bark();
            Animal.eat();

结果:

图片 16

恍如吃的继承与超集:

class Car {
  constructor() {
    console.log("Creating a new car");
  }
}

class Porsche extends Car {
  constructor() {
    super();
    console.log("Creating Porsche");
  }
}

let c = new Porsche();
// Creating a new car
// Creating Porsche

extends 允许一个子类继承父类,需要留意的是,子类的 constructor
函数中得实施 super() 函数。

自,你也可以在子类方法吃调用父类的法子,如 super.parentMethodName()。

当 这里 阅读更多关于类的牵线。

出几乎触及值得注意的凡:

好像的扬言不见面提升(hoisting),如果您而动某个
Class,那尔必须于用之前定义其,否则会丢来一个 ReferenceError 的左
当类似中定义函数不需利用 function 关键词

示例:

        <script type="text/javascript">
            class Animal{
                constructor(){  //构造方法,可无
                    console.log("正在构造一只动物");
                }

                bark(){
                    console.log("动物在叫...");
                }

                static eat(){
                    console.log("动物在吃东西...");
                }
            }

            class Dog extends Animal{
                constructor(){ 
                    super();   //调用父类的构造方法
                    console.log("正在构造一只狗");
                }
                bark(){   //重写
                    console.log("汪汪汪...");
                }
            }

            var dog=new Dog();
            dog.bark();
            Dog.eat();

结果:

图片 17

1.14. Symbol

Symbol 是一致种新的数据类型,它的值是绝无仅有的,不可变的。ES6 中提出 symbol
的目的是为了扭转一个唯一的标识符,不过你看不至是标识符:

var sym = Symbol( "some optional description" );
console.log(typeof sym); // symbol

顾,这里 Symbol 前面不克以 new 操作符。

一旦它吃看作一个对象的习性,那么这特性会是不可枚举的:

var o = {
    val: 10,
    [ Symbol("random") ]: "I'm a symbol",
};

console.log(Object.getOwnPropertyNames(o)); // val

若果要拿走对象 symbol 属性,需要采取 Object.getOwnPropertySymbols(o)。

1.15. 迭代器(Iterators)

迭代器允许每次访数集合的一个素,当指针指为数集合最后一个因素是,迭代器便会脱离。它提供了
next() 函数来遍历一个行,这个办法返回一个饱含 done 和 value
属性的靶子。

ES6 中好透过 Symbol.iterator
给目标设置默认的遍历器,无论什么时对象需要被遍历,执行其的 @@iterator
方法就得以回来一个用以取值的迭代器。

数组默认就是一个迭代器:

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();

itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }

itr.next(); // { value: undefined, done: true }
你可以通过 [Symbol.iterator]() 自定义一个对象的迭代器。

1.16. Generators

Generator 函数是 ES6
的初特点,它同意一个函数返回的可是遍历对象十分成多个价。

当动用受到你见面盼 * 语法和一个初的关键词 yield:

function *infiniteNumbers() {
  var n = 1;
  while (true){
    yield n++;
  }
}

var numbers = infiniteNumbers(); // returns an iterable object

numbers.next(); // { value: 1, done: false }
numbers.next(); // { value: 2, done: false }
numbers.next(); // { value: 3, done: false }

老是执行 yield 时,返回的价值变为迭代器的生一个价。

1.17. Promises

ES6 对 Promise 有了原生的支撑,一个 Promise
是一个候于异步执行的靶子,当它实施好后,其状态会化为 resolved 或者
rejected。

var p = new Promise(function(resolve, reject) {  
  if (/* condition */) {
    // fulfilled successfully
    resolve(/* value */);  
  } else {
    // error, rejected
    reject(/* reason */);  
  }
});

各个一个 Promise 都发生一个 .then 方法,这个法子接受两只参数,第一独凡是拍卖
resolved 状态的回调,一个凡是处理 rejected 状态的回调:

p.then((val) => console.log("Promise Resolved", val),
       (err) => console.log("Promise Rejected", err));

二、ES6中的Module模块化

ES6之前运用RequireJS或者seaJS实现模块化,
requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范之模块化库,
两者都是为着为拓宽前端模块化的家伙。

而今ES6于带了模块化, 也是JS第一次于支持module, 在生老以后
,我们可以一直作用import和export在浏览器被导入和导出各个模块了,
一个js文件表示一个js模块;

当代浏览器对模块(module)支持程度不等, 目前都是应用babelJS,
或者Traceur把ES6代码转化为兼容ES5本的js代码;

2.1、ES6模块化特点

1、每一个模块只加载同不善, 每一个JS只实行同一糟糕,
如果下次重新夺加载与目录下同文件,直接打外存中读取。
一个模块就是一个单例,或者说即使是一个目标;

2、每一个模块内声明的变量都是有些变量, 不见面招全局作用域;

3、模块内部的变量或者函数可以通过export导出;

4、一个模块可导入别的模块

2.1、在Chrome浏览器采用Module

Chrome 61尽管提供了对ES2015 import语句之支撑,实现模块加载

查阅版本的艺术是:在chrome浏览器中输入chrome://version/

图片 18

谷歌浏览器(Canary 60) –
需要以chrome:flags里被”实验性网络平台功能(Experimental Web Platform)”

图片 19

示例:lib.js

/**
 *定义模块
 */
//导出
export let msg="求和:";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Module模块</title>
    </head>
    <body>
        <script type="module">
            //导入
            import {sum,msg} from './lib.js';
            let result=sum(100);
            console.log(msg+""+result);
        </script>
    </body>
</html>

结果:

图片 20

2.2、在Node.js中使用Module

晋级node 8.5 使用
experimental-modules参数,且要求有文件称后缀都要改也mjs
node –experimental-modules index.mjs
概念模块lib.mjs:

/**
 *定义模块
 */
//导出
export let msg="求和:";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

定义main.mjs文件

/**
 * 使用模块
 */
//导入
import { sum, msg } from './lib.mjs';
let result = sum(100);
console.log(msg + "" + result);

于指令行下转换到当前目录,使用node加参数experimental-modules执行,结果如下:

图片 21

2.3、Babel

Babel是一个大使用的转码器,可以将ES6代码转为ES5代码,从而以现有条件实行。

图片 22

2.3.1、配置环境

设置babel命令行工具:

npm install --global babel-cli

图片 23

安成功后可采取babel -V查看版本,可以采取babel -help 查看帮助

图片 24

创造项目,在眼前色被依赖babel-core

要当前种的目录为:E:\Desktop-temp\xww\FastResponse\Mobile\Hybird\vue2_01\vue07_03_babel

应用npm init可以初始化当前档为node项目

npm install babel-core --save

据插件babel-preset-es2015

苟想以es6告诉法,必须设置一个插件

npm install babel-preset-es2015

下一场在文书夹下面创建一个叫.babelrc的公文,并勾画副如下代码:

{
"presets": ["es2015"]
}

windows不支持直接令为.babelrc,可以以DOS下采取@echo结合>实现:

图片 25

.babelrc文件为rc结尾的文本一般代表运行时自动加载的公文,配置等等的,类似bashrc,zshrc。同样babelrc在此间吧是发生相同的图的,而且当babel6遭遇,这个文件必不可少。
在babel6中,预设了6种,分别是:es2015、stage-0、stage-1、stage-2、stage-3、react

2.3.2、转换ES6为ES5

当条件准备好了,就可以编写一个es6作风的文本要:es6.js,内容如下:

let add=(x,y)=>x+y;
const n1=100,n2=200;
var result=add(n1,n2);
console.log(result);

当当前目录执行命令:

babel es6.js -o es5.js

图片 26

变后的结果es5.js:

"use strict";

var add = function add(x, y) {
  return x + y;
};
var n1 = 100,
    n2 = 200;
var result = add(n1, n2);
console.log(result);

从易后的结果好视es6早就变成es5了,箭头函数不显现了。 

2.3.3、使用babel-node运行ES6模块化代码

babel-cli工具从带一个babel-node命令,提供一个支撑ES6的REPL环境。它支持Node的REPL(交互式解释器环境)环境的备功能,而且可一直运行ES6代码。

图片 27

在当前目录下创办lib.js文件:

/**
 *定义模块
 */
//导出
export let msg="求和:";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

缔造main.js文件调用定义好的模块:

/**
 * 使用模块
 */
//导入
import { sum, msg } from './lib.js';
let result = sum(100);
console.log(msg + "" + result);

以指令执行执行:babel-node main.js 结果如下:

图片 28

暨这里一起讲解了3种可以运行ES6模块化的条件,任选同栽好用于学习。

2.4、模块(Modules)

ES6由言语层对模块进行了支撑。编写方式借鉴了流行的JavaScript模块加载器(AMD,
CommonJS)。由宿主环境的默认加载器定义模块运行时之行,采取隐式异步模式——在模块可于取和加载前不会见出代码执行。

概念模块:

// lib/math.js

export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;

导入模块:

//全部导入  
import people from './example'  

//有一种特殊情况,即允许你将整个模块当作单一对象进行导入  
//该模块的所有导出都会作为对象的属性存在  
import * as example from "./example.js"  
console.log(example.name)  
console.log(example.age)  
console.log(example.getName())  

//导入部分  
import {name, age} from './example'  

//导出默认, 有且只有一个默认  
export default App  

// 部分导出  
export class App extend Component {};  

*代表所有,as取别名

// app.js

import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));

// otherApp.js

导入部分情

import {sum, pi} from "lib/math";
console.log("2π = " + sum(pi, pi));

还有的法力包括:export default and export *:

// lib/mathplusplus.js

export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}

// app.js

import exp, {pi, e} from "lib/mathplusplus";
console.log("e^π = " + exp(pi));

导入的时刻起无来大括声泪俱下的分:

  • 1.当用export default people导出时,就因此 import people
    导入(不带来大括哀号)
  • 2.一个文书里,有且不得不有一个export default。但得产生多只export。
  • 3.当用export name 时,就就此import { name }导入(记得带及大括如泣如诉)
  • 4.当一个文书里,既出一个export default people, 又生出多独export name
    或者 export age时,导入就因故 import people, { name, age }
  • 5.当一个文本里涌出n多独 export
    导出无数模块,导入时除了一个一个导入,也得以用import * as example

模块的格式:

Babel可以拿ES2015之模块转换为转几栽格式:Common.js,AMD,System,以及UMD。你居然足以创造而自己之计。

2.4.1、导出方式同样

应用 export{接口} 导出接口, 大括号被之接口名字也面定义的变量,
import和export是应和之;

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

示例:

先配备babel的运转环境,创建util.js文件:

let PI=3.14;
function getArea(r){
    return PI*r*r;
}

//集中导出对象
export {PI,getArea}

导入模块main.js:

import {PI,getArea} from './util'

console.log("R=5时面积为:"+getArea(5));

结果:

图片 29

图片 30

2.4.2、导出方式二

于export接口的时, 我们得以使用 XX as YY, 把导出的接口名字改成了,
比如: closureFn as sayingFn, 把这些接口名字改成化不看文档就知晓为什么的

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

 

2.4.3、导出方式三

这种办法是直接在export的地方定义导出的函数,或者变量:

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

 

2.4.4、导出方式四

这种导出的方法不欲明白变量的名, 相当于是匿名的,
直接拿开发的接口给export;
苟一个js模块文件就只是发生一个力量, 那么就是足以使用export default导出;

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

 

2.4.5、导出方式五

export也能默认导出函数, 在import的当儿, 名字随便写,
因为各级一个模块的默认接口就一个

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

 

2.4.6、导出方式六

采用通配符* ,重新导出其他模块的接口

//lib.js
export * from "./other";
//如果只想导出部分接口, 只要把接口名字列出来
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

每当import的时段可采取通配符*导入外部的模块:

import * as obj from "./lib";
console.log(obj);

 

 

 

2.5、模块加载器(Module Loaders)

旋即并无是ES2015之平有些:这部分ECMAScript
2015标准是出于实现定义(implementation-defined)的。最终的正式拿以WHATWG的Loader
规范中规定,目前这项工作正在展开中,下面的情节来于事先的ES2015稿。

模块加载器支持以下职能:

  • 动态加载(Dynamic loading)
  • 状态一致性(State isolation)
  • 大局空间一致性(Global namespace isolation)
  • 编译钩子(Compilation hooks)
  • 嵌套虚拟化(Nested virtualization)

君得对默认的加载器进行安排,构建出新的加载器,可以为加载于独立或者受限的行环境。

// 动态加载 – ‘System’ 是默认的加载器
System.import("lib/math").then(function(m) {
alert("2π = " + m.sum(m.pi, m.pi));
});

// 创建执行沙箱 – new Loaders
var loader = new Loader({
global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log(\"hello world!\");");

// 直接操作模块的缓存
System.get("jquery");
System.set("jquery", Module({$: $})); // WARNING: not yet finalized

待格外的polyfill
鉴于Babel默认使用common.js的模块,你要一个polyfill来行使加载器API。

使用模块加载器
为了采取这个作用,你待告诉Babel使用system模块格式化工具。

老三、Vue-cli脚手架搭建、开发与颁布项目

单页Web以(single page web
application,SPA),就是独发生同样布置Web页面的用,是加载单个HTML
页面并以用户与应用程序交互时动态更新该页面的Web应用程序。

供一个合法命令行工具,可用于快速搭建大型单页应用(SPA)。该工具也现代化的前端开发工作流提供了开箱即用的构建配置。只待几分钟即可创建并启动一个带动热重载、保存时静态检查与可用于生产环境的构建配置的品种:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

只顾:CLI 工具如用户指向 Node.js
和有关构建工具有得水准的摸底。如果您是新手,我们强烈建议先在并非构建工具的状下通读指南,在习
Vue 本身之后再次下 CLI。

3.1、环境搭建

3.1.1、安装node.js

从node.js官网下载并设置node,安装过程非常简单,一路“下一样步”就可以了。安装到位后,打开命令行工具(win+r,然后输入cmd),输入
node -v,如下图,如果出现相应的本号,则说明安装成功。

图片 31

万一安不成功,可以直接拿装包修改成压缩包,解压后安排环境变量也堪,就改为了绿色版。

 图片 32

这里需要证实下,因为以官网下载安装node.js后,就曾自带npm(包管理工具)了,另需留意的是npm的本子最好是3.x.x之上,以免对后续有震慑。

注意版本不能够太没有,如果您曾经设置了小版本的node可以利用npm直接更新。

3.1.2、修改npm为淘宝镜像(非必不可少)

盖npm的库房发生多以国外,访问的进度比较缓慢,建议改成cnpm,换成taobao的镜像。

开辟命令行工具,复制如下配置:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装此是因咱们所以之npm的服务器是异国,有的时候我们设置“依赖”的上挺要命缓慢好缓慢超级慢,所以就是用者cnpm来设置我们说用的“依赖”。安装完成以后输入
cnpm -v,如下图,如果起相应的版本号,则证明安装成功。

图片 33

版本号:

图片 34

3.1.3、安装webpack

设置webpack,打开命令行工具输入:

npm install webpack -g

图片 35

安好后输入

webpack -v

如下图,如果出现相应的本子号,则证实安装成功。

图片 36

3.1.4、安装vue-cli脚手架构建工具

开辟命令行工具输入:

cnpm install vue-cli -g

设置到位后输入 vue
-V(注意这里是大写的“V”),如下图,如果起相应的版号,则证明安装成功。

图片 37

3.2、构建项目

1)、在硬盘上找寻一个文本夹放工程之所以底。这里发生零星种植方法指定到相关目录:

①cd 目录路径

②比方为安git的,在有关目录右键选择Git Bash Here

2)、安装vue脚手架输入:

vue init webpack projectName

专注这里的“projectName” 是路之名可以说凡是无的起名,但是“不可知用中文”,要求全副大写。

提拔选择项:

图片 38图片 39

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev

View Code

图片 40

3)、cd 命令进入创建的工程目录,首先cd projectName;

图片 41

目录:

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件,加载各种公共组件
|-- static                           // 静态文件,比如一些图片,json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

3.3、运行品种

6)、启动项目,输入:npm run
dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:

图片 42

编译成功后好一直当浏览器中翻项目:

图片 43

3.4、Vue-cli HelloWorld

摸底了默认的沙盘内容,我们可以开始定义自己之vue程序了,这里描绘一个简单的HelloWorld,在src目录下开创一个Hi.vue文件,内容如下:

<template>
    <div id="app1">
        <input v-model="msg" v-on:click="sayhi"/>
        <p>
            <h2>{{msg}}</h2>
        </p>
    </div>
</template>

<script>
    export default {
        name: 'Hi',
        data() {
            return {
                msg: 'My First vue-cli app!'
            }
        },
        methods:{
            sayhi:function(){
                alert(this.msg);
            }
        }
    }
</script>

<style>
    #app1 {
        font-family: "microsoft yahei";
        color: dodgerblue;
        font-size: 20px;
    }
</style>

修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './Hi'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

运行结果:

图片 44

3.5、打包发布

好之类别文件都需安放 src 文件夹下

花色开发好后,可以输入 npm run build 来展开包装工作

npm run build

包裹好后,会变 dist
文件夹,如果已修改了文本路径,可以直接打开当地文件查看

型上线时,只需要以 dist 文件夹放到服务器就推行了。

四、TodoList示例

4.1、创建项目

当磁盘中初砌一个拖欠文件夹作为项目的彻底目录,如c:\todolist

图片 45

利用webpack的模板初始化一个种类:vue init webpack todolist

图片 46

4.2、运行默认项目

当看到如下结果时创造项目即成功了,可以运行

图片 47

 当所有的负加载成功后即使足以使用指令:npm run dev 运行默认项目了

结果:

 图片 48

当浏览器被运行:localhost:8080

图片 49

项目之解析好看视频,这里直接就是创办todolist模块:

4.3、创建组件

行事基本原理在视频被已经讲解,请查看视频,在页面尾部。

4.3.1、创建子组件TodoItem

以品种导入到开发工具中,如HBuilder,如下所示:

图片 50

在:todolist\src\components创建TodoItem.vue组件

代码:

<template>
    <li class="item">
        {{title}} <button @click="del">x</button>
    </li>
</template>

<script>
    export default {
        props: ['title'],
        methods: {
            del: function() {
                this.$emit("delete"); //通知父组件执行事件delete
            }
        }
    }
</script>

<style>
    .item {
        color: blue;
    }

    .item button {
        color: red;
    }
</style> 

4.3.2、创建父组件Todo

<template>
    <div>
        <p>
            <label>任务:</label>
            <input v-model="newtask" @keypress.enter="addNew"/>
        </p>
        <ul>
            <li is="TodoItem" v-for="(task,index) in tasks" :title="task" @delete="remove(index)"></li>
        </ul>
    </div>
</template>

<script>
    import TodoItem from './TodoItem'
    export default {
        data: function() {
            return {
                tasks: ["买一本书", "给爸妈打电话", "整理自己的硬盘"],
                newtask:''
            }
        },
        components: {
            TodoItem
        },
        methods: {
            remove: function(index) {
                if(confirm("您真的要删除吗?")) {
                    this.tasks.splice(index, 1);
                }
            },
            addNew:function(){
                this.tasks.unshift(this.newtask);
            }
        }
    }
</script>

<style>

</style>

4.4、在App.Vue根组件中调用Todo组件

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <TodoItem :title="'任务项'" @delete='remove'></TodoItem>
        <Todo/>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld'
    import TodoItem from './components/TodoItem'
    import Todo from './components/Todo'

    export default {
        name: 'app',
        components: {
            HelloWorld,
            TodoItem,
            Todo
        },
        methods: {
            remove: function() {
                alert("删除事件");
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

4.5、测试结果

图片 51

4.6、发布项目

进入项目的手上目录,在dos下实行npm run build

图片 52

 当发布成功时会转变一个dist的目,这就算是最后运行的档次,代码通过了换,压缩,混淆。

4.7、运行通告的类别

拿dist目录放到运行环境下,这里虽直拖动到HBuilder的类型目录中,如下图所示:

图片 53

用index.html文件中的绝对路径修改为相对路径,注意static之前的斜线:

<!DOCTYPE html>
<html>

    <head>
        <meta charset=utf-8>
        <meta name=viewport content="width=device-width,initial-scale=1">
        <title>todolist</title>
        <link href=static/css/app.b4bf92d7b44dab6d09d7150561ccda45.css rel=stylesheet>
    </head>

    <body>
        <div id=app></div>
        <script type=text/javascript src=static/js/manifest.c7e501867173ed73c464.js></script>
        <script type=text/javascript src=static/js/vendor.8226f675e046df334018.js></script>
        <script type=text/javascript src=static/js/app.96fcd6038a3373ac14ee.js></script>
    </body>

</html>

以浏览器被查阅的职能如下:

图片 54

五、作业

5.1、熟悉ES6的语法,写一个箭头函数,使用Babel转换成ES5的本子。

5.2、创建一个模块定义一个用来计算最特别价值的计,引用该模块并调用计算最要命价值的艺术输出结果。分别采用三种不同之环境实行。

5.3、创建一个vue-cli下的项目,实现TodoList功能,如第四节所示。

5.4、在Vue-cli环境下定义一个分页组件,调用并公布项目。

图片 55

要求:在第一页时,禁用上等同页,以及首页按钮;在最后一页时,禁用下一致页,以及尾页按钮;超出范围的页码以…来代替

六、视频

https://www.bilibili.com/video/av17503637/

七、示例

https://git.coding.net/zhangguo5/vue2.git