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