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修飾符