Vue项目页面跳转，显示进度条

2020-08-08

1.安装

1	cnpm install --save nprogress

2.在main.js中引入

1 2	import NProgress from 'nprogress' import 'nprogress/nprogress.css'

3.在main.js中进行配置

NProgress.configure({     
    easing: 'ease',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
})

4.在main.js中对路由钩子进行设置

//当路由进入前
router.beforeEach((to, from , next) => {
  // 每次切换页面时，调用进度条
  NProgress.start();
  // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了 
  next();
 });
//当路由进入后：关闭进度条
router.afterEach(() => {  
  // 在即将进入新的页面组件前，关闭掉进度条
  NProgress.done()
})

VUE简单介绍

2019-10-17

1. 介绍

VUE是一套用于构建用户界面的渐进式框架

特点：

使用es6的语法进行vue的编程
虚拟dom操作
声明式渲染，响应式（零DOM操作）
使用指令来完成条件渲染，列表渲染
双向数据绑定
声明式的事件绑定

2. VUE实例对象

let vm = new Vue({
    el,
    data:{message : "hello"},
    methods
})

通过Vue的实例对象vm可以直接访问data中声明的变量以及methods中声明的方法
在methods的方法中，this指向当前Vue实例对象也就是vm

3. 生命周期

1. beforeCreate

Vue实例创建完成，但没有初始化完成

2. created

vue实例初始化完成，此时可以通过vue的实例对象访问data中的变量以及methods中的方法

3. beforeMount

完成数据绑定之前的准备工作，重点完成dom对象的编译，将dom对象绑定在this.$el上，data中的变量还未绑定在dom对象

4. mounted

data中的变量绑定到了dom对象，并且dom渲染到了网页中

5. beforeUpdate

data中的变量的值发生了变化

6. updated

data中的变量的值的改变已经反映到了网页上

7. beforeDestroy

当前vue实例在销毁之前

8. destroyed

当前vue实例已经销毁

4. 模板语法

1. 双大括号

1
2
3

{{ message }} //常量
{{ 1+1 }} //计算
{{ foo() }} //函数

2. 指令

v-html
v-on
v-bind
v-if v-else-if v-else
v-show
v-for

5. 事件机制

1. 事件绑定

1
2
3

v-on:eventType
<div v-on:click="handler"></div>
<div v-on:click="js表达式"></div>

2. v-on缩写

1 2	<div @click="handler"></div> <div @click="js表达式"></div>

3. 参数

1
2
3

<div @click="handler('a')"></div>
<div @click="handler(a)"></div>
<div @click="handler(表达式)"></div>

4. 事件对象

1. 事件处理函数中没有参数
<div @click="handler"></div>

methods:{
  handler(event){
	event就是事件对象
  }
}

2. 事件处理函数中有参数
<div @click="handler(1,$event)"></div>

methods:{
  handler(a,event){
	a为1
	event就是事件对象
  }
}

5.修饰符

1) 事件修饰符
	eventType.prevent		阻止事件的默认行为
	eventType.stop 			停止事件的冒泡
	eventType.once 			仅绑定一次事件
	eventType.self 			仅绑定一次事件
	eventType.capture 	在事件捕获阶段执行事件处理函数
2) 按键修饰符
	支持keypress、keyup、keydown
	.enter .tab
	.delete (捕获“删除”和“退格”键)
	.esc .space .up .down .left .right
3) 系统修饰键
	.ctrl .alt .shift .meta
	@keypress.ctrl.enter
	主要应用在快捷操作上，例如ctrl+c ctrl+x

6. 属性绑定

1
2
3

<input type="text" v-bind:value="常量">
<input type="text" :value="变量">
<input type="text" :value="表达式">

7. style与class的绑定

1) class
   <div class="current"></div>
   <div v-bind:class="current"></div>
   <div v-bind:class="对象"></div>
   <li v-for="item in list"
	   :class="{basic:true,current:item.id === currentTab}" 
	   :key="item.id"
	   @click="changeTab(item.id)"
	>
	    {{item.name}}
	</li>
	<div v-bind:class="数组"></div>
		<li v-for="item in list"
			:class="['basic',foo(item.id)]" 
			:key="item.id"
			@click="changeTab(item.id)"
		>
			{{item.name}}
		</li>
		
2) style
   <div style="background: pink;color: #fff">hello world</div>
   <div :style="{background:'pink',color:'#fff'}">hello world</div>
   <div :style="[{background:'pink'},aaa]">hello world</div>

8. 深入组件

1. 组件定义

将组件的信息配置到一个对象中，这个对象与Vue的参数基本一致
let config = {
	template:``,
	data(){			//保证每个vue实例都具有一个唯一的data对象
		return {

		}
	},
	props:["title"]	,	//期望从调用者哪里获取到的属性名称
	methods:{}
}

2. 组件注册

全局注册：所有的vue实例都可以调用注册组件

1	Vue.component(组件名称,config)

局部注册：只有当前vue实例才能调用注册的组件

new Vue({
	el:"#app",
	components:{
		组件名称:config
	}
})

动态组件

App.vue 根组件
<component is="currentPage"></component>

import Customer from './pages/Customer'
	export default {
		data:{
			currentPage:"Customer"
		},
		components:{
			Customer
		}
}

3. 组件调用

1	<组件名称></组件名称>

4. 父组件向子组件传值（属性作为参数进行传递）

props:["title","type"]

参数类型校验
props:{
	a:Number,
	b:{		// 期望b的类型为字符串，并且这个参数是必须的
		type:String,
		required:true	
	},
	c:{		// 期望c的类型为boolean，如果这个参数用户没有传递，默认值为true  
		type:Boolean,
		default:true
	},
	d:Function
}

静态传参值为字符串，如果想要传递非字符串类型的值，那么必须使用动态传参

单向数据流: 父组件中data值的改变会影响到子组件中的相应数据的改变，但是子组件无法改变父组件的值

5. 事件传递

当用户操作子组件的时候，希望父组件的值得到改变
父组件
	<my-test @foo="handler"></my-test>
子组件
{
	template:`<button @click="change">按钮</button>`,
	methods:{
		change(){
			this.$emit("foo")
		}
	}
}
流程：点击按钮-> change() ->this.$emit("foo") ->handler()

6. 插槽（模板作为参数传递）

匿名插槽

<my-test>
	<div>hello world</div>
</my-test>

let my-test = {
	template:`
		<div>
			<h2>{{title}}</h2>
			<div class="content">
			<!--slot用于接受组件调用时传递的子内容-->
				<slot></slot>
			</div>
		</div>
	`
}

具名插槽

<!--vue2.0-->
<my-test>
	<template v-slot:a>
		<div>hello world</div>
	</template>
	<template v-slot:b>
		<div>address...</div>
	</template>
</my-test>

<!--vue1.0-->
<my-test>
	<div slot="a">hello world</div>
	<div slot="b">address...</div>
</my-test>

let my-test = {
	template:`
		<div>
			<h2>{{title}}</h2>
			<div class="content">
				<slot name="a"></slot>
			</div>
			<div class="footer">
				<slot name="b"></slot>
			</div>
		</div>
		`
}

回调插槽（作用域插槽）

function foo(a,b,c,callback){
	console.log(a);
	console.log(b);
	c.forEach(function(item){
		callback(item)
	})
}	

foo(
	1,
	2,
	[
		{a:1,b:"terry",c:12},
		{a:2,b:"larry",c:23}
	],
	function(item){
		console.log(item.a);
		console.log(item.b);
		console.log(item.c);
	}
)

foo(
	3,
	4,
	[
		{id:1,name:"terry"},
		{id:2,name:"larry"}
	],
	function(item){
		console.log(item.id);
		console.log(item.name);
	}
)

9. 脚手架 vue-cli

1. 作用

创建并且初始化一个项目

mkdir app01
cd app01
npm init -y
npm install vue --save
npm install babel-preset-es2015 --save-dev
项目结构
	.git
	node_modules
	build
	src
		aseets 			静态文件，图片
		components	功能组件 my-alert
		pages 			页面组件 Customer/Category
		App.vue
	main.js
	package.json

自动测试

脚手架会提供一个静态服务器，自动对源码进行构建，然后部署到服务器上，这些操作不需要开发者操作，是自动完成的

自动打包

1	.vue -> html/css/js

2. 如何应用 @vue/cli

安装nodejs

1 2	linux 解压/opt ;配置环境变量 windows 直接安装即可（无脑安装）

全局安装cnpm

1 2	> npm install -g cnpm --registry=https://registry.npm.taobao.org > cnpm install yarn -g

全局安装 @vue/cli

> npm install @vue/cli -g
或
> cnpm install @vue/cli -g
或者
> yarn global add @vue/cli

测试：
> vue --version

创建项目

> vue create app01
> cd app01
// 安装依赖
> cnpm install axios qs --save
> vue add element

启动服务进行测试

1	> npm run served

10. 计算属性

与data类似，模板中可以直接访问计算属性中定义的属性

<p> {{name1}}</p>
<p> {{name2()}}</p>

new Vue({
	computed:{
		name1(){
			return xx;
		}
	},
	methods:{
		name2(){
			return xx;
		}
	}
})

计算属性相对于方法来说，计算属性会缓存计算后的值，而不是每次调用都会执行计算属性对应的函数。当计算属性中的因变量发生变化的时候，计算属性的值会重新计算

<template>
	<button @click="gender ='male' ">男</button>
	<button @click="gender ='female' ">女</button>
	<ul>
		<li v-for="item in studentsFilter">
			{{item}}
		</li>
	</ul>
</template>

new Vue({
	el:"#app",
	data:{
		students:[
			{id:1,name:"terry",gender:"male"},
			{id:1,name:"larry",gender:"male"},
			{id:1,name:"vicky",gender:"female"},
			{id:1,name:"lisa",gender:"female"},
			{id:1,name:"tom",gender:"male"},
		],
			gender:"male"
		},
		computed:{
			studentsFilter(){
				return this.students.filter(s => s.gender===this.gender)
			}
		}
})
当this.students或者this.gender发生变化的时候，计算属性会重新计算产生新的值，然后渲染到页面中

11. 监听器

用于监听data中值的变化，如果data中的值为对象，想要监听对象中属性的改变，那么必须deep:true

new Vue({
	el:"#app",
	data:{
		params:{}
	},
	watch:{
		"params":{
			handler:function(){
				console.log("==="+Math.random());
			},
			deep:true
		}
	}
})

12. vuex

1. 介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. 核心概念

state 		状态 （data）
getters 	获取器(computed)
mutation 	突变（修改data值的唯一方式！）
action 		动作(封装异步代码，然后提交突变，进而修改state值)

3. 使用方式

实例化

let store = new Vuex.Store({
	state:{
		customers:[]
	},
	getters:{},
	mutations:{
		refreshCustomers(state,customers){}
	},
	actions:{}
})

集成到vue中

new Vue({
	el:'',
	data:{},
	store
})

调用

1	this.$store

4. mutations

作用：

突变，用于修改state的唯一方式，并且其中只能包含同步操作。

定义

mutations:{
	refresh(state,customers){
		state由vuex提供，customers是程序在提交mutation传递的参数
	}
}

调用

1
2
3

不能直接调用，必须通过store.commit方法来调用
store.commit(mutationName,payload)
payload 被称为载荷，实际就是传递给mutation的实参

辅助函数

Vuex.mapMutations(["findAll","deleteById"])
或
Vuex.mapMutations({
	findAllCustomer:"findAll"
}])

5. actions

作用：

动作，用于封装异步操作（异步操作的同步化），不能直接修改state,但是可以通过提交突变，间接修改state的值

定义:

actions:{
	async findAllCustomers(context,id){
	// context是vuex提供的，与store对象类似，可以直接访问commit、dispatch、getters、state,这个我们可以使用解构形式获取	context中的属性。id为该action第一个形参（载荷）
		let response = axios.get("");
		return response;
	}
}

映射辅助函数

Vuex.mapActions(["",""])
Vuex.mapActions({
	xxx:"xxx"
})

6. getters

作用

需要对state中的值经过一个计算，然后渲染到页面中的时候可以使用getters

定义

使用属性调用

getters:{
	customerSize(state){
		return state.customers.length
	}
}
this.$store.getters.customerSize

使用方法调用

getters :{
	customerFilter(state){
		return (param){
			return xxx
		}
	}
}
this.$store.getters.customerFilter(xx)

辅助函数

1	Vuex.mapGetters([""])

13. 路由机制 vueRouter

安装

1	cnpm install vue-router --save

实例化vueRouter实例对象

import Home from './pages/Home.vue'
let router = new VueRouter({
routes:[{
			path:"/",
			name:"home",
			component:Home
		},{
			path:"/category",
			component:Category
		},{
			path:"/custoemr",
			component:Custoemr
		}]
	})

集成到vue中

Vue.use(VueRouter)

new Vue({
	store,
	router
})

使用

将组件渲染到哪里？
	一般渲染到根组件的router-view标签
	当路由改变，找到对应的组件，将该组件设置到router-view

App.vue 
<div id="app">
	<div class="header"></div>
	<div class="nav"></div>
	<div class="content">
		<router-view></router-view>
	</div>
</div>

router-link可以渲染为一个超链接，用户点击后修改浏url地址

编程式导航

router.push("/")
=>
router.push({path:'/'})
=>
router.push({name:"home"})

传递参数
router.push({path:"/",params:{},query:{}})

ES6异步操作同步化

2019-10-12

Generator函数

1. 声明

function* method_name(){
    yield xxx,
    yield xxx
}

2. yield表达式

yield只能出现在generator函数中
默认情况下yield表达式的返回值为undefined

3. 调用

//Generator调用的结果为迭代器
let iterator = method_name();

//每次调用next方法可以依次获取每个yield的值
iterator.next()

4. Generator函数的应用

1. 可以生成迭代器对象
    let obj = {"0" : "terry", "1" : "larry"}

    问题：如何将obj转换为一个可迭代的对象
    思路：
        obj[Symbol.iterator] = [][Symbol.iterator]
        obj[Symbol.iterator] = 迭代器生成函数
    例如：
        let obj = {"0" : "terry", "1" : "larry", "2" : "tom"};
        obj[Symbol.iterator] = function* (){
            for(let key in obj){
                let val = obj[key];
                yield [key,val];
            }
        }

        obj.entries = obj[Symbol.iterator];

2. 利用Generator函数实现异步函数的同步化
    function* foo(){
        let customers = yield call($.get, c_url);
        let order = yield call($.get, o_url)
    }

    /*
        异步函数的执行器{
            1) 在上一个请求结束后再去调用下一个请求;
            2) 将当前请求结果左右yield表达式的返回值返回
        }
    */

    function call(handler, url){
        handler(url)
        .then((response) => {
            iterator.next(response);
        })
    }

    let iterator = foo();
    iterator.next();

Async函数

Generator函数的语法糖（对于Generator函数简化和功能增强）

async function foo(){
    let customers = await $.get(c_url);
    let address = await $.get(a_url);
    return [要返回的值];
}

let promise = foo();
promise.then((result) => {
    result为foo函数的返回值
})

ES6承诺函数(Promise)

2019-10-11

1. 实例化

承诺对象，用于封装异步操作

状态：
    pengding: 正在执行内部代码
    resolved: 运行成功
    rejected: 运行失败

实例：
    let promise = new Promise((resolve, reject) => {

        //异步操作
        当异步操作成功的时候执行resolve(),就可以将承诺的状态由 pending -> resolved

        当异步操作失败的时候执行reject(),就可以将承诺的状态由pending -> rejected

    })

    当promise实例产生，这个Promise中的回调函数就会执行。通过then方法监听承诺对象状态的改变

2. 方法

Promise原型中的方法

1. then(resolved_callback, rejected_callback)
    resolved_callback：当承诺对象状态pending -> resolved
    rejected_callback：当承诺对象状态pending -> rejected

2. catch(rejected_callback)
    rejected_callback：当承诺对象的状态pending -> rejected
    不管是Ajax交互中出现的404，500异常会被catch捕获，在then中的代码语法错误也会被catch捕获

Promise构造函数中的方法

1. Promise.all()
    let promise = Promise.all(p1,p2,p3,.....)   //需要p1、p2、p3全部完成以后状态才会变成完成状态

2. Promise.race()
    let promise = Promise.race(p1,p2,p3,.....)  //p1、p2、p3不需要全部成功，选取运行最快的状态

3. Promise.resolve()
    将参数对象转换为一个承诺对象

4. Promise.reject()
    返回一个状态为rejected的承诺对象

ES6数组(Array)新特性

2019-10-11

1. 数组的创建方式

直接创建

let arr = new Array(3,2)

使用rest运算符

1 2	let str = "Hello World"; [...str];

使用Array.from(v)【v为类数组对象或者可遍历的对象】

let array_like = {"0" : "terry", "1" : "larry", length : 2}
console.log(array_like);

// 从数组对象中解构出来slice方法
let {slice} = [];

// 1. 使用原始的Array.prototype.slice转换
console.log(slice.call(array_like,0));
等价于
console.log(Array.prototype.slice.call(array_like,0));

// 2. 使用Array.from转换
console.log(arr_like);
console.log(Array.from(array_like));

// 3. 使用Array.from转换可遍历的对象
let set = new Set([1,2,3,1,2,4,5,6]);
console.log(set);
console.log(Array.from(set));

使用Array.of(p1,p2,….)将参数中的元素转换为数组

2. 方法

Array.prototype.includes

检测数组中是否包含某个元素，返回的是Boolean值

Array.prototype.find(function(){})

检测数组中是否包含某个值或符合某个条件，起筛选作用

举例:

1 2	let arr = [1,2,3,4]; arr.find(item => item > 2) //返回第一个大于2的值

Array.prototype.findIndex

检测数组中是否包含某个值或符合某个条件，起筛选作用

举例:

1 2	let arr = [1,2,3,4]; arr.findIndex(item => item > 2) //返回第一个大于2的值的索引

Array.prototype.fill

用一个元素填充数组

Array.prototype.keys

获取一个数组的所有索引

Array.prototype.values

获取一个数组的所有值

Array.prototype.entries

获取一个数组的所有索引和值

3. 数组的迭代

let arr = ["terry","larry","tom","jacky"];

// 1. 获取迭代器
let values_iterator = arr.values();

// 2. 通过迭代器获取数组中的元素
let item;
while(!(item = values_iterator.next()).done){
    console.log(item.value);
}

// 3. 使用for-of遍历迭代器
let entry_iterator = arr.entries();
for(let entry of entry_iterator){
    console.log(entry);
}

// 4. 使用for-of遍历数组
for(let item of arr){
    console.log(item);
}

4. 集合api

Set

无序不可以重复的集合【天然去重】(数组中的元素可以重复)

1. 实例化Set对象   
    let set = new Set();
    let set = new Set([1,2,3,1,2])

2. Set.prototype.xxx
    size            //set集合中元素的个数
    delete(val)     //从集合中删除val
    has(val)        //判断集合中是否存在val
    add(val)        //向集合中添加val
    clear()         //清空
    forEach()       //遍历
    keys()          //迭代器
    values()        //迭代器
    entries()       //迭代器

Map

key可以为任意数据对象（对象的key只能为字符串）

1. 实例化map对象
    let map = new Map()
    let map = new Map(entry)       //entry格式[["",""],["",""],.....]

2. Map.prototype.xxx
    size            // Map集合中元素的个数
    set(key,val)    // 向Map中添加键值对，key不可以重复，如果重复，value更新
    get(key)        // 通过key获取value
    has(key)        // 判断map集合中是否存在指定的key
    delete(key)     // 通过key从Map集合中删除
    clear()         // 清空Map集合
    keys()          //迭代器
    values()        //迭代器
    entries()       //迭代器

ES6函数(Function)的拓展

2019-10-11

函数简写

函数声明在对象中

ES5写法:
    let obj = {
        sayName:function(){
            console.log(this.name);
        }
    }

ES6写法:
    let obj = {
        sayName(){
            console.log(this.name);
        }
    }

函数声明在参数中（回调函数）【箭头函数】

箭头函数中的this的取值为该箭头函数外部函数的this,如果箭头函数没有外部函数，那么这个this就指向全局对象

1.极简模式

item表示形参，xxx为返回结果（方法体中只有这一个表达式）

item => xxx
等价于
function(item){return xxx}

例如从一个数组中筛选出满足条件的值
let result = arr.filter(item => item.gender === "male")

2.普通模式

当形参有多个的时候，参数必须添加小括号，当方法体中有多个表达式，方法体一定要加大括号

let result = arr.filter((item,index) => {
    console.log(index)
    return item.gender === "male"
})

3.this指向

let obj = {
    data:{
        name : "one",
        list : [1,3,4,2]
    },
    foo(){
        this.data.list.forEach((item) => {
            //箭头函数的this指向外部函数的this也就是obj
            console.log(this.data.name);
        })
    },
    bar(){
        let o = this;
        this.data.list.forEach(function(item){
            //回调函数的this指向global，而我们需要访问obj对象，所以提前先将obj保存到变量o中
            console.log(o.data.name);
        })
    }
}

obj.foo();
obj.bar();

ES6对象(Object)的拓展

2019-10-11

1. 对象的简写

let name = "terry",
let age = 12,
let sayName = function(){
    console.log(this.name);
}

ES5写法:
    let obj = {
        name : "terry",
        age : 12,
        sayName : function(){
            console.log(this.name);
        }
    }

ES6写法:
    let obj = {
        name,
        age,
        sayName
    }

2. 方法

实例可以调用该实例构造函数原型中的方法，但不能调用构造函数中的方法

Object.is({},{})

类似于 ===

Object.assign(target,o1,o2)

将o1,o2中可枚举的属性合并到target中，返回target

Object.getPrototypeOf(obj)

获取obj对象的原型也就是其构造函数的原型

Object.setPrototypeOf(obj,prototype)

为obj对象指定一个新的原型等价于obj.__proto__ = prototype

Object.keys({})

获取一个对象的所有属性名

Object.values({})

获取一个对象的所有属性值

Object.entries({})

获取一个对象的所有属性名与属性值，并以[[],[]]方式显示

ES6变量的声明

2019-10-10

1. 三种变量声明的方法以及对应特点

var

可以重复声明
变量的声明会被提升
没有局部作用域

let【变量的声明】

不可以重复声明
变量的声明不会被提升
具有局部作用域

const【常量声明】

不可以重复声明
变量的声明不会被提升
具有局部作用域
常量的值无法改变

2. 解构（模式匹配）

可以一次性从对象或者数组中获取多个值，并且把这些值赋值给不同的变量

对象结构

let {name,age} = {name:"terry", age:12};           //name:terry,age:12
let {name:name,age:age} = {name:"terry",age:12}    //name:terry,age:12
let {name:name,age:gender} = {name:"terry",age:12} //name:terry,gender:12
let {name,age:gender} = {name:"terry",age:12}      //name:terry,gender:12

----------------------------------------------------------------------

let obj = {
    realname:"terry",
    address:{
        province:"山西省",
        city:"太原市",
        area:"尖草坪"
    }
}

let {realname,address:{city}} = obj;        //realname:terry, city:"太原市"

数组解构

1 2	let [a,b,c] = [8,2,5]; //a:8, b:2, c:5 let [a,a1,a2,[b,b2,b3]] = [8,2,5,[1,2,3],4]; //a:8, a1:2, a2:5, [b:1, b2:2, b3:3]

ES6相关介绍以及模块化

2019-10-10

1. ES6介绍

ES6是ES5的升级版，提供了简洁的语法和新的特性。ES6在浏览器上兼容性差一些，但是在nodejs上可以完全兼容

ES6 ——babel/webpack(js插件，运行在nodejs上)——-> ES5

2. 模块化

1）数据驱动（vue）

ajax ——>根据数据创建虚拟的don节点，追加到页面中

2） dom驱动

这里以表格为例
ajax -> tr -> clone -> 数据填充

3）模块定义

js文件、目录、目录嵌套都属于一个模块

1. module变量
    在任意一个js文件中，都包含一个变量叫做module，module表示当前模块的一些信息

            id
            filename：完整路径 + 文件名
            paths：require的时候去哪里寻找要加载的模块
            parent：父模块
            children：子模块
            exports：对外暴露的对象，require当前模块实际上就是require这个exports对象

2. require()
    加载其他模块
    
    参数：
        1. 参数为路劲
            require('./module')
            按照指定路径加载需要的模块
        2. 参数为模块名称
            require('module')
            按照module.paths中指定的路径寻找该模块

1 2	3. node_modules 目录，用于存放第三方模块

4. 模块可以为一个目录
    $ mkdir module
    $ cd module
    $ npm init
        将该目录初始化一个为node模块
        基本信息都存放在package.json

5. npm
    node的模块管理机制，node package manager
    
    npm init
        将当前目录初始化为一个node模块
        如果不想填写信息则可以使用 $npm init -y 直接跳过填写信息
    
    npm install xxx
        安装第三方模块xxx，局部安装，将第三方依赖默认安装到当前目录的node_modules中

        $ npm install xxx --save(默认)
        $ npm install xxx -S(默认)
            --save表示将模块安装到当前目录的node_modules;将这个依赖的信息添加到package.json中dependencies属性中，dependencies中的依赖为产品依赖
        $ npm install xxx --save-dev
            devDependencies开发依赖，只在产品开发阶段才会使用到，在产品阶段无需这些依赖

    npm install xxx -g
        -g：全局安装，将第三方依赖安装
            $ NODE_HOME/lib/node_modules
            $ NODE_HOME/bin
            $ NODE_HOME/share

6. cnpm
    因为npm是国外在管理，所以国内下载一些模块速度会很慢，所以淘宝做了一个npm的镜像仓库，为cnpm

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

    报错
        EACCES: permission denied, access '/opt/node-v10.14.2/lib/node_modules/cnpm/node_modules/address'
        报错原因是因为当前用户是普通用户，普通用户不允许操作非家目录
    
    解决方案
        1. sudo
        2. 将/opt/node-v10.14.2/lib/node_modules,/opt/node-v10.14.2/bin,/opt/node-v10.14.2/share 这三个目录的拥有者设置为当前用户
        $ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

4）babel

将es6转换为es5，但是注意一点：如果你写的js代码运行在nodejs【服务器，插件】上无需转换

1. 安装babel
    $ cnpm install -g babel-cli
    $ babel --version

2. 本地安装预设
    $ cnpm install --save-dev babel-preset-es2015

Linux下配置Mysql

2019-10-10

1.安装MySQL

在普通用户下【不要使用超级管理员！！】使用如下命令下载mysql

sudo apt-get install mysql-server

根据提示输入用户名、密码即可【密码设置成好记忆的，以后会经常使用】

安装完成

2.配置MySQL

进入MySQL

使用如下命令行，并根据提示输入密码【密码就是你刚刚设置好的密码】，登陆进入MySQL

mysql -uroot -p

配置MySQL用户和环境

在MySQL中分别执行代码

GRANT ALL PRIVILEGES ON . TO root@’%’ IDENTIFIED BY ‘你刚刚设置好的密码’ with grant option;

执行完代码出现Query OK， 0 rows affected, 1 warnning即可

flush privileges;

更新权限，执行代码没有出现错误即可

CTRL + z提出MySQL，执行如下命令进入/etc/mysql/mysql.conf.d/目录，对mysqld.cnf文件的内容进行更改，要使用sudo，否则更改后无法退出

cd /                            //从家目录退回到根目录目录
cd /etc/mysql/mysql.conf.d      //进入到mysql.conf.d目录
sudo vim mysqld.cnf             //使用超级管理员权限编辑该文件

将43行的bind-address后面的值改为 0.0.0.0

保存退出

至此mysql配置完成

重启MySQL

sudo service mysql restart

3. 使用navicat连接服务器上的MySQL

1.首先在阿里云控制台将3306端口开放

2.使用navicat连接mysql

填完点击确认即可