webpack總結

webpack優勢

• 模塊來源普遍，支持包括npm/bower等等的各類主流模塊安裝／依賴解決方案
• 模塊規範支持全面，amd/cmd以及shimming等一應具全
• 瀏覽器端足跡小，移動端友好，卻對熱加載乃至熱替換有很好的支持
• 插件機制完善，實現一樣模塊化，容易擴展

vue使用中

• 有兩種方式: 單文件的方式,.vue結尾的文件-> 基於webpack來編譯使用
• 引包的方式: 雙向數據綁定（企業應用較少）

webpack基本操做

• 下載安裝
• 全局命令行工具 npm i -g webpack
• 默認支持commonjs模塊定義
• 運行方式經過指定命令
  • webpack 入口文件 目標文件
  • webpack ./index.js ./build.js
• 經過配置文件，以代碼的形式來指定webpack運行的相關設置

使用webpack配置文件

• 進入到當前有webpack.config.js 文件的目錄下，運行命令行webpack

module.exports =

    {
        //入口在那咯
        entry: {
            main: './index.js', //單文件入口
        },
        output: {
            filename: './build.js'
        }
        //出口文件
    }

引入css問題

• 原理:經過解析css代碼，最終將css做爲js中動態生成style標籤，並插入到文檔中
• 解析css,還須要依賴style-loader
• 安裝: npm i css-loader style-loader -D
• 進行配置: 配置到module屬性中,其屬性是一個個的對象

module: { //模塊
            loaders: [ //一個loader對象
                    {
                        test: /.css$/, //只有以.css結尾的文件我才操做
                        loader: 'style-loader!css-loader!autoprefixer-loader'

                    }

                ] //能夠有不少的loader
        }

autoprefixer自動補充css前綴

• 安裝 npm i autoprefixer-loader -D
• 測試 transform: translate(0px);

less的使用

• 依賴 less less-loader

處理圖片

• file-loader url-loader
• 在配置的時候只使用url-loader 其依賴於file-loader
• limit設置若是在其範圍內，則不單獨生成文件，而是放到js中以base64

base64編碼

• a-zA-Z0-9+/組成
• 其能夠將二進制數據轉換成字符串形式，用來傳輸，其是可逆，可編可解
• 將圖片以base64形式存儲在css的url中,減小原來對該圖片的一次請求
  • 可是當圖片過大，按比例增長的額外大小就更多

處理字體圖標

• 大小比較小
• 靈活控制顏色和大小

生成html文件插件

• html-webpack-plugin 須要下載
• 自動根據path移動當前模板的html到路徑下
• 根據filename 自動引包

web-dev-server

• 熱替換，不經過刷新，替換css內容
• 其經過絕對路徑來監視文件，若是上級某一個路徑中包含頁數字符，那就沒法監視
  • {}()都不能夠
• 全局安裝、 經過命令來使用
  • --inline 自動更新
  • --hot 熱替換熱加載
  • --port 指定端口
  • --open 自動打開瀏覽器
• 建議使用項目中的程序
• 命令：../node_modules/.bin/wds --inline --hot --open --port 9998

es6

---

webpack-ES6的處理

• 包 babel-preset-es2015
• 包 webpack-plugin-transform-runtime
• babel-loader依賴babel-core包

ES6中的模塊

• 第一種: 默認導出、導入
• 第二種: 按需導入、聲明式導出
• 默認導出 export default 拿來直接用，名稱能夠任意
• 按需導入: 聲明式導入，必須{名稱對應導出的名稱}
• 全體導入的方式中，有名稱的按名稱來，默認導出的就是該對象的default屬性
• 導入必定要在頂級域中，不能是函數中

ES6中的代碼變化

vue單文件方式

以單文件的方式啓動

``javascript const path = require('path'); module.exports = { entry:{ 入口 main:'./index.js' }, output:{ 出口 path:path.join(__dirname,'../','code','dist'), /將全部的文件統一輩子成到dist目錄下 filename:'build.js' }, module:{ loaders:[{
test:/.css$/, loader:'style-loader!css-loader!autoprefixer-loader' }, { / less-loader 依賴於less test:/.less$/, loader:'style-loader!css-loader!autoprefixer-loader!less-loader' },{ /ttf-> 在代碼中聲明瞭引入mui.css -> 引入了ttf test:/.(ttf|jpg|png|svg)$/, loader:'url-loader', /依賴file-loader },{ test:/.js$/, exclude:/node_modules/, loader:'babel-loader', /babel-loader依賴babel-core options:{ presets:['es2015'], /babel-preset-es2015 plugins:['transform-runtime'],/babel-plugin=transform-runtime } }] }, plugins:[ new htmlwebckplugin({ /以誰作參照 template:'./src/index.html' /自動補上引入出口文件 }) ]

}

#### 重點
* vue組件的使用
* 組件間通訊
* vue-router使用
* vue-resource發起http請求
* axios

#### vue介紹
* 核心 組件化 -> 自定義指令也能夠認爲是組件(讓其不太依賴於存在的環境，儘可能獨立，經過參數)
* 雙向數據綁定 ->  數據劫持 ES5 中的 Object.defineProperty(obj,'name',{
    //設置
    set:function(){   obj.name ='1234';//觸發該函數
        //作相關操做,(改變DOM中跟name掛鉤的元素的value)
    },
    get:function(){  //obj.name 就會觸發

    }
})
* vue支持到IE8以上
* Weex 讓vue編寫的代碼可以運行到PC、ios、Android上
* vuex 在vue中提供管理全局數據的方式的一個插件(相似於angular中的userService)
* 14年2月出來的  截止到20170615  56.7k start
* 語法糖 尤雨溪


#### 漸進式
* 跟大而全的全家桶對立，
* 可讓企業一點一點的嘗試使用，雙向數據綁定、路由、組件（引庫的方式）

#### 數據流
* 從頁面的改變影響內存 ，單向數據流
* 從內存的改變影響頁面 ，單向數據流
* 二者都具有，雙向數據流( 數據劫持-> ES5 -> Object.defineProperty(obj,paramName,{set:fn,get:fn}))


#### 解決閃爍問題
* 在引庫的方式中存在閃爍問題，在單文件方式中不會有該問題，提早編譯好html內容
* v-text 插入innerText
* v-cloak 待測試


####  vue中經常使用的v-指令演示
* 經常使用指令 ` 空串的bool就是false`
* v-text 將值插入到元素的innerText中，只能是雙標籤
* v-html 將值插入到元素的innerHTML中，只能是雙標籤
* v-if 是否插入元素
* v-show 是否顯示元素
* v-model 雙向數據流，其值就是數據模型(M)

#### class結合v-bind使用
* v-bind 很是有用,給元素的屬性賦值
* 經過v-bind可讓vue中的對象進行運算，並將最終的動態結果賦值該該屬性
* 字符串的賦值，有字符串是true,空串表明false
```html
    <span v-bind:class="isRed?'red':'blue'"></span>
    簡寫形式:class
    <span :class="isRed?'red':'blue'"></span>

ES6中的代碼變化

• 模塊
  • 默認導入出(名稱能夠隨意)
    • 在導出模塊中: export default xxxxx;
    • 在導入模塊中: import aaa from './xxx.js'
  • 接口方式導入出(按需加載)
    • 在導出模塊中: export var xxx = 123; --> {xxx}
    • 在導出模塊中: export { aaa }
    • 合起來 {xxx,aaa}
    • 導入的時候名稱必定必定要一致 import {xxx,aaa} from 'xxx.js'
  • 全體導入
    • import * as xxx from 'xxx.js';
      • 針對以上全部狀況
        • xxx = { xxx:123,aaa:xxx的值,defult:xxxxx的值}
• 函數

var obj = {
    add:function(){},
    substract(){ 和以上方式功能如出一轍
        //ES6的聲明函數寫法
    }
}

• 對象屬性
  • var name = 'abc'; var person = { name }

開始單文件方式

---

• 單文件的方式就是一一個文件表明着一個組件的方式開發
• xxx.vue的文件結構: template、script、style
• vue1.0中template能夠有多個根元素
• vue2.x中只能有一個根元素

methods和v-on的使用

• 1:在導出對象的根屬性中,加入methods屬性,其是一個對象
  • 對象內部有多個函數名稱，任意的函數名稱
    • 再模板中直接使用函數名(xxx),沒有參數直接函數名
    • 在js部分的使用
• 2: 給元素加上v-on:事件名="函數(xxx)"
  • v-on能夠簡寫-> @事件名="函數(xxx)"
• 在模板中使用不須要this,在script中使用須要this.，這個thiss是一個VueComponent對象

v-for的使用

• 數組v-for="(v,index) in arr" :key="v.id||index"
• 對象v-for="(v,key,index) in obj" :key="v.id||index"
• 綁定key 是爲了告訴vue 每一個元素的惟一標識，提升性能
  • 在刪除元素的時候，vue不是整個數組進行頁面的替換，而是隻移除刪除的DOM元素
  • 爲了比較頁面中刪除的和內存中刪除的元素的關係，就須要整個key
  • 若是不指定，vue又須要按照本身的算法去標識每一個元素和內存對象的關係
• v-bind:class
  • 選擇一個,三元表達式最終返回樣式名,聲明一個對象也可以其key來獲取其value做爲樣式名
  • 選擇多個
    • 整個是一個對象，其多個屬性只要爲true,以key爲樣式名

父子組件使用(父傳子)

• 父子組件的使用
  • 1:建立該組件文件.vue
  • 2:在須要使用組件的組件內，引入該組件
  • 3:在使用其餘組件內聲明使用子組件
  • 被使用的組件就是子，使用組件的就是父
• 樣式若是須要只能被當前組件全部效，須要在style標籤上加上scoped
• 父向子
  • 常量: 子組件上屬性 msg="xxx" 子組件聲明根屬性props:['msg']
  • 變量: :msg="obj"
  • 在js部分經過實例對象使用，this.$props.msg

子向父組件通訊（獲取組件對象）(擴展)

• 我我的: 吃飯 -> (吃飽飯)-> 吃飯的人就停住了
  • 這種通訊，基於同一個對象

export default 的經常使用屬性總結

• 導出組件對象的根屬性(options)
  • data是一個函數,返回一個對象
  • methods是一個對象,key是函數名，值是函數體
  • components是一個對象,key是子組件名，value是組件對象
  • props是一個數組,元素是接受父組件的參數
  • filters是一個對象,key是過濾器名，值是過濾器函數體
• VueComponent實例對象的屬性(在組件內的this)
  • this.$props 父組件傳遞參數列表數組
  • this.$parent/this.$children 父組件及其子組件對象
  • this.$on this.$once this.$off 綁定(一次)事件取消事件
  • this.$refs.xxx 獲取DOM元素 -> 元素上聲明ref="xxx"

全局組件

• 一經聲明全部地方使用，無需引入和聲明
• 單文件中: 1:在main.js中引入組件
  • 2:經過Vue.component聲明該全局組件,參數1:組件名稱(駝峯命名法),參數2:組件對象
    • 使用:直接使用 將大寫字母改爲-小寫字母
• 引庫的方式也能夠建立組件

var template = `
        <ul>
            <li>{{text}}</li>
            <li>{{text}}</li>
        </ul>
    `;
    Vue.component('myTestComponent', {
        template: template,
        data() {
            return {
                text: '哈哈'
            }
        }
    })

看文檔的對象分類

• 全局的屬性和函數 Vue.xxxx
• 選項options -> 配置組件的時候傳遞的對象，單文件方式中export default
• 實例屬性|方法 -> VueComponent對象,this對象
  • var vm = new Vue(options); 也是實例對象Vue

過濾器

• vue中有沒有默認的過濾,在vue中沒有默認的過濾器,都須要本身手動實現
• 輸入的內容幫我作一個反轉
• 例子:父已託我幫你辦點事
• 全局的過濾器單數函數 局部的過濾器(複數聲明)
  • 全局 Vue.filter('名稱',function(value){ return value} )
  • 局部(經過選項options),filters:{ 名稱:函數體 }
• 當兩個過濾器同名的時候，以局部的優先

獲取DOM元素

• 前端框架的救命稻草,操做DOM
• 1:在DOM元素上聲明,ref="xxx"
• 2:能夠經過實例對象.$refs.xxx獲取DOM元素
• 事件(鉤子函數的區別)
  • 1:在created函數觸發的時間點,vue實例對象完成了屬性的監視、事件的初始化
  • 2:在mounted函數中，已經完成了數據到DOM元素的裝載,此時纔可使用$refs

vue-router

• 1: 下載該插件npm i vue-router
• 2: 在main.js中引入該插件對象
• 3: 全局安裝該插件 Vue.use(插件對象)
  • 3.1經過install函數給Vue原型掛載屬性，將來this.屬性就能使用功能
• 4: 將router配置路由規則(建立路由對象)
• 5: 將router配置進Vue的options中
• 6: 留坑 <router-view></router-view>

命名路由

• router-link指令: to的屬性，to="/xxx" -> path:'/xxx'
• :to 綁定屬性則可使用命名路由來匹配路由規則，方便url的更改維護
  • :to="{name:'home'}" -> 規則:{name:'home',path:'/home'} ->href="/home"

參數router-link

• params 、query
• 命名路由名稱不要相同
• 路由規則: {name:'home',path:'/home/:who',component:組件對象}
  • router-link :to="{name:'home',params:{who:'xxx'} }"
  • href="/home/xxx"
• query: {name:'home2',path:'/home',component:組件對象}
  • router-link :to="{name:'home',query:{who:'xxx'} }"
  • href="/home?who=xxx"
• 獲取路由參數: this.$route.params||query.屬性名

總結

• 1:引包: -> 引包，聲明範圍，構建new Vue(options) 雙向數據綁定、建立組件的使用
  • Vue.component(組件名,options); 參照export default返回的數據
  • new Vue({el:'#app',template:'xxxxx',data:{text:'xxx'} })
• 2: 單文件方式:
  • index.html 聲明div app
  • main.js 引入Vue、VueRouter、App主組件
  • 構建Vue實例對象(options) -> render:c=>c(App)
• 3: 1:下載、2:引入對象、3:安裝插件Vue.use(VueRouter); -> this.$router
  • 4:建立rouer對象 5:配置路由規則[] ,每一個規則都是對象path必填，name選填
• 4:將router配置到Vue的options中router
• vue文件注意事項
  • 三個部分 template-> 1根 script-> 默認導出對象 style-> scoped當前生效
  • 該對象就是options
• options: data是一個函數，返回一個對象，該對象的數據就是數據模型
  • methods是一個對象，其屬性是函數名，值是函數體
  • components是一個對象其屬性是組件名，值是組件體
  • filters是一個對象其屬性是過濾器名，值是過濾器體，接受一個value，返回新value 使用經過|
  • props是一個數組['父傳遞的參數名']
    • 模板直接用
    • js中this.$props.屬性名獲取
  • 父向子傳遞有兩種，常量 xxx="xxx" 變量 :xxx="變量"
• 實例事件
  • this.$on|$once|$emit|$off
• 實例屬性
  • this.$parent|$children|$props|$refs.xxx
• 全局函數
  • Vue.use 安裝插件，其插件必須實現install(Vue) 函數
  • Vue.component('名稱',options)
  • Vue.filter('名稱',function(v){ return v})
• 生僻指令
  • ref="xxx"
  • :key -> track by
  • v-for 數組(v,index) 對象(v,key,index)
  • v-bind:屬性名 給元素的屬性傳遞值 簡寫:屬性名="vue中的data屬性"
  • v-on:事件 @事件="函數"
• created和mounted: created建立發起請求，mounted數據裝載後操做DOM，結合$refs
• 啓動方式: 只是爲了方便使用了package.json文件中是scripts屬性，啓動的同時是開啓webpack-dev-server，他會獲取到當前命令行存在的webpack.config.js文件,從而獲知出口文件build.js

嵌套路由

vue-resource(瞭解)

axios

• http://www.cnblogs.com/Upton/p/6180512.html

axios.all([get1(), get2()])
  .then(axios.spread(function (res1, res2) {
    // 只有兩個請求都完成纔會成功，不然會被catch捕獲
  }));

mint-ui

• https://mint-ui.github.io/#!/zh-cn

相關環境總結

router對象的獲取

單文件方式引入bootstrap

使用代理跨域