vue开发工具node.js及构建工具webpack

1.概念

　　node.js：能够运行JavaScript的服务平台，能够把它当作一个后端程序，只是它的开发语言是JavaScript

　　（一般状况下，JavaScript的运行环境都是浏览器，所以JavaScript的能力也就局限于浏览器能赋予它的权限了。好比说读写本地系统文件这种操做，通常状况下运行在浏览器中的JavaScript代码是没有这个操做权限的。若是咱们想用JavaScript写出一些可以运行在操做系统上的，可以具备像PHP，JAVA之类的编程语言具备的功能的程序该怎么办呢？Node.js就解决了这个问题。Node.js是一个服务端的JavaScript运行环境，经过Node.js能够实现用JavaScript写独立程序。）

　　npm：node.js的包管理器，至关于python的pip

　　（传统开发的时候，JQuery.js大多都是百度搜索，而后去官网下载，或者直接引入CDN资源，这种方法太过于麻烦。若是之后遇到其余的包，这个包和其余的那几个包存在依赖关系，那么咱们要在本身的项目中引入一个包将变得十分困难。如今咱们有了NPM这个包管理器，直接能够经过npm install xxx包名称引入，如npm install vue，就自动在当前项目文件夹下导入了这个包，而且npm自动下载好了vue这个包依赖的其余包）

　　webpack：一个前端打包和构建工具

　　（由于单页应用程序中用到不少素材，若是每个素材都经过在HTML中以src属性或者link来引入，那么请求一个页面的时候，可能浏览器就要发起十屡次请求，每每请求的这些资源都是一些脚本代码或者很小的图片，这些资源自己才几k，下载连1秒都不须要，可是因为HTTP是应用层协议，它的下层是TCP这个运输层协议，TCP的握手和挥手过程消耗的时间可能比下载资源自己还要长，因此须要把这些小文件所有打包成一个文件，这样只要一次TCP握手和挥手的过程，就把多个资源给下载下来了，而且多个资源因为都是共享一个HTTP请求，因此head等部分也是共享的，至关于造成了规模效应，让网页展示更快，用户体验更好。）

　　vue-CLi：vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各类依赖包的工具，经过npm install vue-cli -g 安装，-g表示全局安装

 2.搭建项目

1.cmd下：
	node -v
	npm -v
	查看vue和npm是否安装成功

2.开始新建vue项目
	1.安装脚手架工具
	npm install -g vue-cli 
	2.查看版本号，查看是否安装成功
	vue --version
	3.建立框架项目(注意路径)
	vue init webpack my-project（my-project是项目名称）
	4.查看项目文件
	cd my-project(项目名)
	5.启动项目
	npm run dev

建立项目相关选择项：

2.1引入jquery和bootstrap

vue引入jquery（注意，是在你项目路径下）

npm install jquery

 选择版本号3.3.1安装：

npm install jquery@3.3.1

 main.js下引入全局jquery

import jQuery from 'jquery'

vue下引入bootstrap（注意，是在你项目路径下）

npm install bootstrap --save-dev　　

 选择性安装，版本3.3.7：

npm install bootstrap@3.3.7 -d (开发版)

main.js下引入：

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

2.2项目框架说明　　

　　

 3.webpack介绍

　　Webpack把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

 

总结：

1. 组件间的传值
	1. bus  --> 空Vue对象
		经过向bus对象抛出自定义事件的方式在组件间传递信息
	2. 注意事项：
		1. bus.$on()应该在组件mounted（挂载在页面上）的时候就执行
		2. this对象
2. Vue实例的生命周期钩子函数（8个）
	1. beforeCreate
		data属性光声明没有赋值的时候
	2. created
		data属性完成了赋值
	3. beforeMount
		页面上的{{name}}尚未被渲染成真正的数据
	4. mounted
		页面上的{{name}}被渲染成真正的数据
		
	5. beforeUpdate
		数据（data属性）更新以前会执行的函数
	6. updated
		数据（data属性）更新完会执行的函数
	7. beforeDestroy
		实例被销毁以前会执行的函数
	8. destroyed
		实例被销毁后会执行的函数
3. VueRouter
	在前端作路由的
	1. 基本使用
		1. 先写路由
		2. 生成路由实例
		3. 将路由实例挂载到Vue对象上
		
		4. <router-link></router-link>
		   <router-view></router-view>    <==> <router-view/>
	2. 路由的模糊匹配
		1. path: '/user/:name'     ---> $route.params.name
		2. /user/alex?age=9000     ---> $route.query.age
	
	3. 子路由
		children
	4. 编程式导航
		用JS代码去控制页面跳转
		this.$router.push(...)
4. Vue-CLI
	一个脚手架工具，帮助咱们快速的搭建Vue项目
	1. 查看本机安装的vueCLI的版本
		vue -V    ---> 2.9.6
	2. 使用Vue CLI建立Vue项目
		vue init webpack mysite
	
5. 组件中捕获原生事件
	.native修饰符