Vue-second

時間  2019-11-13
標籤 vue second 简体版
原文   原文鏈接

 

webpack-基礎地方
(發起不少次二次請求:網頁想展現出來 去請求服務器 拿回來的是html代碼 從上往下解析渲染每個標籤 碰到src標籤要再請求一次碰到javascript

什麼是精靈圖：
css精靈(CSS sprites),是一種網頁圖片應用處理技術。主要是指將網頁中須要的零星的小圖片集成到一個大的圖片中
應用的緣由：
1.減小對瀏覽器的請求次數，避免網頁的延遲
2.方便小圖標的統一管理
圖片base64編碼:src屬性指向一個編碼 圖片隨着html代碼結構一塊兒返回客戶端 在第一次請求時就能回來)php

 哈哈哈哈哈哈哈哈哈哈哈操我第一次webpack筆記這麼少 看來當時是真慘css

webpack基於node環境 node -v
全局安裝webpack (暫時指定版本 vue-cli2依賴該版本) npm install webpack@3.6.0 -g
局部安裝webpack html


過程：在src文件目錄下進行開發(源碼區域)(main.js 項目的入口文件） 而後經過webpack進行打包,(webpack ./src/main.js ./dist/bundle.js)打包到dist文件下 bundle.js
而後在外部的index.html(瀏覽器展現的首頁)下引用<script src="./dist/bundle.js"></script>
內容進行了更改 得從新打包 仍是這個代碼webpack ./src/main.js ./dist/bundle.js
打包的簡便方式:直接敲webpack便可打包:新建webpack.config.js(寫明入口出口及要用上node,因此npm init package.json 經過npm init 生成的 告訴咱們當前項目的一些信息(若是package.json中還依賴其餘東西 npm install))
把webpack命令換成npm run dev ----打開package.json文件script(腳本)加上 "build":"webpack"
json文件裏不能寫註釋
開發時依賴：真正項目運行時是不須要webpack的 把這些打包而後上傳服務器 因此只有開發時須要webpack   --save-dev是指開發時依賴
    局部安裝:npm install webpack@3.6.0 --save-dev
    package.json裏的devDependencies開發時依賴
運行時依賴：dependencies
node_modules是安裝的各個包 只要是在終端敲webpack進行打包文件(直接敲webpack固然也還能夠呀)都是用的全局webpack，定義了腳本"build":"webpack"後優先在本地尋找vue

npm run build執行---進入package.json--找到這個命令"build": "webpack"----進入webpack.config.js---找到對應的入口進行編譯( entry: './src/main.js',)-----在main.js裏找到全部的相關的依賴html5

 

webpack打包的時候只會看入口文件main.js 看他依賴誰(一層層的) 再打包誰 因此項目須要的cssimg啥的單靠webpack不行
(You may need an appropriate loader to handle this file type.)java

 

 webpack的package.config.js    對於css less 圖片文件的打包 ---loadernode

const path = require('path')

module.exports = {
    entry: './src/main.js',//入口 這裏是爲了方便打包 再也不是須要這個命令 而是換成了webpack ./src/main.js ./dist/bundle.js
    output:{
         path:path.resolve(__dirname,'dist'), //動態的獲取絕對路徑 依賴node
         filename:'bundle.js',
         publicPath:"dist/" 
//之後只要是涉及到url的 都會自動在前面加上dist
//以前由於圖片大小超過limit而使用了file-loader,圖片被打包到dist目錄下而在HTML上加載不出來(Failed to load resource: net::ERR_FILE_NOT_FOUND)
//url(b83132195327f5a7e4cc37ca73faafcc.jpg)一長串名字是dist目錄下圖片的名字利用哈希自動生成的 看路徑是表示成了當前目錄 可是圖片不在這個位置在dist下因此加上dist
//不用去改normal.css下src啊 那畢竟是開發時的 之後會打包成什麼名字也不知道 就只是路徑不對 將路徑由當前文件換到dist下就好
    },//出口
    module:{
        rules:[
          {
            test:/\.css$/, //匹配全部的css文件 匹配到以後就使用下面的兩個loader
            //css-loader只負責加載不負責解析和把相應的代碼放到HTML上讓他展示出來 還須要style-loader style-loader負責把樣式添加到dom中
            //使用多個loader時 從右往左讀
            use:[ 'style-loader','css-loader' ] 
          },
          {
            test: /\.less$/, //style-loader
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
          },
          { //對於圖片想要出如今html url-loader  若是圖片大還須要打包 則再安裝file-loader 
            test: /\.(png|jpg|gif|jpeg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                //當加載的圖片小於limit時，會將圖片編譯成base64字符串形式 
//大於limit會使用file-loader模塊(:安裝 npm install file-loader --save-dev) webpack命令會將該圖片做爲一個文件打包到和bundle.js同目錄的文件下
                  limit: 200000,
                  name:'images/[name].[hash:8].[ext]'//對於要打包過去的圖片(大小大於limit纔會被打包 小於limit的圖片直接變成字符串了 不須要額外的文件)的名字的設置 總是哈希32位太不方便了 [name]變量 保持以前的名字不變 [hash:8]變量取八位隨機 [ext]變量 拓展名不變
                },
               
              }
            ]
          }


        ]
    }
}

 

js裏用到ES6的地方 打包時統一轉成ES5 以避免瀏覽器不識別-----babel(也是個loader)
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
官網上是npm install babel-loader babel-core babel-preset-env webpack 均可 env環境(environment) core核心webpack

項目中直接使用vue  安裝vue 會下載到node_modules裏 把他看成模塊來使用import Vue from 'vue'
npm install vue --save(不用加-dev由於運行時也須要依賴vue)
像以前編寫vue代碼以後  我遇到了錯誤‘You are using the runtime-only build of Vue where the template compiler is not available. ’
就是以前安裝的時候 Runtime+Compiler仍是Runtime-only選擇後者的結果
個人解決方法是在webpack.config.js的module裏添加了：
resolve: {
   alias: {
     vue: 'vue/dist/vue.js',
   }
}
or import Vue from 'vue/dist/vue.js'; or vue.config.js文件裏配置ios

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' 
      }
    }
  }
}

具體的緣由 https://segmentfault.com/a/1190000020253015
發現一搜區別你們寫的都同樣。。。還怪怪的 https://www.jianshu.com/p/466510d84e36

 

1.Runtime Only

咱們在使用 Runtime Only 版本的 Vue.js 的時候，一般須要藉助如 webpack 的 vue-loader 工具把 .vue 文件編譯成 JavaScript，由於是在編譯階段作的，因此它只包含運行時的 Vue.js 代碼，所以代碼體積也會更輕量。 在將 .vue 文件編譯成 JavaScript的編譯過程當中 會將組件中的template模板編譯爲render函數，因此咱們獲得的是render函數的版本。因此運行的時候是不帶編譯器的(已經編譯 打包好了)，編譯是在離線的時候作的。

2.Runtime+Compiler

咱們若是沒有對代碼作 預編譯，但又使用了 Vue 的 template 屬性並傳入一個字符串，則須要在客戶端編譯模板，以下所示：

// 須要編譯器的版本

new Vue({

  template: '{{ hi }}'

})  (用到模板了)

// 這種狀況不須要 (自己就是render 渲染函數)

new Vue({

  render (h) {

    return h('div', this.hi)

  }

})

由於在 Vue.js 2.0 中，最終渲染都是經過 render 函數，若是寫 template 屬性，則須要編譯成 render 函數，那麼這個編譯過程會發生運行時，因此須要帶有編譯器的版本。

很顯然，這個編譯過程對性能會有必定損耗，因此一般咱們更推薦使用 Runtime-Only 的 Vue.js。

只有如下狀況會用到compiler：

1.有指定template;

2.沒指定template，也沒指定render（這時候使用的就是被掛載元素的outerHtml）。

因此，沒有使用到compiler的狀況只有：沒有指定template，但指定了render。

//////2解釋

    • Runtime + Compiler: recommended for most users
      運行時+編譯器:推薦給大多數用戶--有道翻譯
    • Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
      僅限運行時:大約6KB的輕量級min+gzip，可是模板(或任何特定於vue的html)只容許在.vue文件中使用——其餘地方須要呈現函數--有道翻譯

 

  • Runtime-only版本字面意思是只包含運行時版本，是 在構建時經過webpack 的 vue-loader 工具將模板預編譯成 JavaScript，也就是進行了預編譯，在最終打好的包裏其實是已經編譯好的，在瀏覽器中可直接運行
  • Runtime+Compiler字面意思爲運行時+編譯器，是不在打包時進行編譯的，是在客戶端（瀏覽器）運行時進行編譯的，因此要使用帶編譯器的完整版本

 

vue中的el 和 template

index.js   
<div id="app">
        <!--這裏就一個這 爲了和main.js相呼應的 具體內容就不寫-->
</div>
<script src="./dist/bundle.js"></script>

 

main.js
app = new Vue({
    el: '#app',
    template: ` //這裏的內容 待會直接到index.js裏的app裏的
    <div>
      <h2>{{message}}</h2>
      <button @click='btn'>按鍵</button>
      <h2>{{name}}</h2>
    </div> 
    ` //啊啊啊啊啊啊啊啊啊啊啊啊啊符號 是ES6新增的 模板字符串的符號[`]是按鍵~下的符號
        ,
    data: {
        message: 'Hello World!',
        name: 'coderwhy'
    },
    methods: {
        btn() {
            console.log('12345')
        }
    }
})
//知識點 若是同時有el和template的話 template會把el替換掉

https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html
 https://www.jb51.net/article/95878.htm 都很好  

 

以一個全新的方式組織vue組件 如何正確加載.vue文件(上面講的是如何在項目中直接使用vue) ----vue-loader和vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
webpack.config.js修改：
{
test:/\.vue$/,
use:['vue-loader']
}
想使用的話須要另配插件(maybe版本大於14)或者是將vue-loader版本變低(package.json裏)
改變了package.json的話 再跑須要從新安裝npm install 再跑npm run build

 

plugin

 

添加版權的plugin
BannerPlugin 是webpack自帶的 只須要require導入webpack

 

出現了錯誤

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.resolve has an unknown property 'extends'. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSyst
.....................我搜不到 看問題是extension那 因而我隱藏了省略文件後綴的這個描寫........

從新打包 在bundle.js的首行出現了 /*! 最終版權歸齊更全部 */

打包index.html的plugin

 

 

    npm install html-webpack-plugin --save-dev

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin') 
plugins:[
    new webpack.BannerPlugin('最終版權歸齊更全部'),
    new HtmlWebpackPlugin({
      template:'index.html' //根據這個模板生成dist/index.html
    })
  ]

 

 js壓縮的plugin

 

搭配本地服務器

 

 

 

npm install --save-dev webpack-dev-server@2.9.3
webpage.config.js配置
devServer:{
contentBase:'./dist',
inline:true
}
跑一下：webpack-dev-server
PS D:\Vue\Vue-webpack\05-webpack的plugin> webpack-dev-server
webpack-dev-server : 沒法將「webpack-dev-server」項識別爲 cmdlet、函數、腳本文件或可運行程序的名稱。請檢查名稱的拼寫xx
緣由是隻要在終端(vscode底下那裏也是終端啊)敲這個命令webpack-dev-server 就是在全局找這個命令
可是全局並未安裝webpack-dev-server
解決方案一:來到package.json配置個腳本
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev":"webpack-dev-server"
},和以前嫌跑的時候敲webpacke而改爲了npm run build同樣
這個時候 配完以後敲npm run dev就會優先在本地裏找webpack-dev-server
Project is running at http://localhost:8080/
證實搭建了本地服務 默認跑在8080端口 以後作任何調整測試 都是在這個服務上進行 頁面都會自動刷新了 等到全部的都作好了
進行最終真正的打包 npm run build

tips
在package.json裏"dev":"webpack-dev-server --open" //加上這個--open npm run dev後 會自動打開瀏覽器 自動出來這個8080端口的網頁 以後就是若是有更改頁面自動刷新

將webpack.config.js分離 公共部分/開發時依賴的/運行時依賴的  分紅三個文件 ：

npm install webpack-merge --save-dev(開發時依賴)安裝這個插件 對進行合併 再在文件裏寫東西

報錯：No configuration file found and no output filename configured via CLI option.
           A configuration file could be named 'webpack.config.js' in the current directory.仍是按之前的走的 去找了webpack.config.js 可是已經沒有了 因此要
來到package.json這更改腳本
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/production.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
}, //手動指定
更改打包後的文件去向路徑 (不改的話會在build下面建一個dist文件夾的)
module.exports = {
  entry: './src/main.js',
  output: {
     path: path.resolve(__dirname, '../dist'), //這裏 往上一級找到dist文件 
     filename: 'bundle.js',
},

 

 

 

 

 

 

腳手架 (vue-cli)

npm -v
node -v檢測版本

(前提是安裝node 安裝過程當中若是安到了其餘盤的位置 記得改配置環境)
安裝cli npm install -g @vue/cli
檢查版本 vue --version
拉取2.x版本(舊版本) npm install -g@vue/cli-init
2.x版本建立項目 vue init webpack 項目名稱
跑起來 npm run dev
cd 目錄:切換目錄
vue-cli3建立項目: vue create 項目名稱
跑起來 npm run serve

Vue-cli3的 配置:vue ui 若是想更改 建立:vue config.js

 

 

 

2.實現瀏覽器頁面不刷新修改url連接
1.URL的hash模式
原是http://localhost:8080/#/
在console裏 loaction.hash='aaa' http://localhost:8080/#/bar URL變了 可是 頁面不會刷新

2.html5裏 history模式
console裏 history.pushState({對象data 能夠不傳},'title 能夠不傳',url)
(push）這裏相似棧結構 histrory.back()後退 加載歷史列表中前一個 URL

 

history.back() - 等同於在瀏覽器點擊後退按鈕 history.forward() - 前進
history.replaceState({},'',url)相似於history.pushState 可是沒法後退
history.go(1) ==history.forward() history.go(-1) ==history.back() go(x)模式是基於棧模式 因此要先history.pushState

 

3.請求的url中帶# 

(摘抄自https://blog.csdn.net/jigetage/article/details/80938668 大神)

2010年9月，twitter改版。
　一個顯著變化，就是URL加入了"#!"符號。好比，改版前的用戶主頁網址爲
　http://twitter.com/username
　改版後，就變成了

　　http://twitter.com/#!/username

　　這是主流網站第一次將"#"大規模用於重要URL中。這代表井號（Hash）的做用正在被從新認識。本文根據HttpWatch的文章，整理與井號有關的全部重要知識點。

　　1、#的涵義

　　#表明網頁中的一個位置。其右面的字符，就是該位置的標識符。好比，

　　http://www.example.com/index.html#print

　　就表明網頁index.html的print位置。瀏覽器讀取這個URL後，會自動將print位置滾動至可視區域。

　　爲網頁位置指定標識符，有兩個方法。一是使用錨點，好比<a name="print"></a>，二是使用id屬性，好比<div id="print">。

    　　2、HTTP請求不包括#

    　　#是用來指導瀏覽器動做的，對服務器端徹底無用。因此，HTTP請求中不包括#。

    　　好比，訪問下面的網址，

    　　http://www.example.com/index.html#print

    　　瀏覽器實際發出的請求是這樣的：

    　　GET /index.html HTTP/1.1

    　　Host: www.example.com

    　　能夠看到，只是請求index.html，根本沒有"#print"的部分。

    　　3、#後的字符

    　　在第一個#後面出現的任何字符，都會被瀏覽器解讀爲位置標識符。這意味着，這些字符都不會被髮送到服務器端。

    　　好比，下面URL的原意是指定一個顏色值：

    　　http://www.example.com/?color=#fff

    　　可是，瀏覽器實際發出的請求是：

    　　GET /?color= HTTP/1.1

    　　Host: www.example.com

    　　能夠看到，"#fff"被省略了。只有將#轉碼爲#，瀏覽器纔會將其做爲實義字符處理。也就是說，上面的網址應該被寫成：

    　　http://example.com/?color=#fff

    　　4、改變#不觸發網頁重載

    　　單單改變#後的部分，瀏覽器只會滾動到相應位置，不會從新加載網頁。

    　　好比，從

    　　http://www.example.com/index.html#location1

    　　改爲

    　　http://www.example.com/index.html#location2

    　　瀏覽器不會從新向服務器請求index.html。

    　　5、改變#會改變瀏覽器的訪問歷史

    　　每一次改變#後的部分，都會在瀏覽器的訪問歷史中增長一個記錄，使用"後退"按鈕，就能夠回到上一個位置。

    　　這對於ajax應用程序特別有用，能夠用不一樣的#值，表示不一樣的訪問狀態，而後向用戶給出能夠訪問某個狀態的連接。

    　　值得注意的是，上述規則對IE 6和IE 7不成立，它們不會由於#的改變而增長曆史記錄。

    　　6、window.location.hash讀取#值

    　　window.location.hash這個屬性可讀可寫。讀取時，能夠用來判斷網頁狀態是否改變；寫入時，則會在不重載網頁的前提下，創造一條訪問歷史記錄。

    　　7、onhashchange事件

    　　這是一個HTML 5新增的事件，當#值發生變化時，就會觸發這個事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持該事件。

    　　它的使用方法有三種：

    　　window.onhashchange = func;

    　　

    <body οnhashchange="func();">

        　　window.addEventListener("hashchange"， func, false);

        　　對於不支持onhashchange的瀏覽器，能夠用setInterval監控location.hash的變化。

        　　8、Google抓取#的機制

        　　默認狀況下，Google的網絡蜘蛛忽視URL的#部分。

        　　可是，Google還規定，若是你但願Ajax生成的內容被瀏覽引擎讀取，那麼URL中可使用"#!"，Google會自動將其後面的內容轉成查詢字符串_escaped_fragment_的值。

        　　好比，Google發現新版twitter的URL以下：

        　　http://twitter.com/#!/username
        　　就會自動抓取另外一個URL：
        　　http://twitter.com/?_escaped_fragment_=/username
        　　經過這種機制，Google就能夠索引動態的Ajax內容。

 

 

box-shadow
在跟着視頻作vue-tabbar的時候 開始那出現了 「This dependency was not found:」 後來把TabBar.vue裏style後面跟的那句話刪掉就沒事了(style lang="stylus")

vertical-align: middle;去掉磨人的3像素
圖片最下面會多3像素 因此儘管img後面就是div 可是圖片和文字看起來仍是有距離 https://blog.csdn.net/lyyo_cd/article/details/84526316

slot

 

單文件組件.vue 

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
<!--

關於單文件組件 官方https://cn.vuejs.org/v2/guide/single-file-components.html
什麼是<template/>標籤
能夠看到，在 .vue 文件中， template 中都是html 代碼，
它定義了在頁面中顯示的內容，因爲裏面還有變量，也能夠說定義了一個模版；在<template/>標籤下只能有一個子節點元素

.vue文件可包含html-css-js，webpack自動打包成三個文件？
vuejs 自定義了一種.vue文件，能夠把html, css, js 寫到一個文件中，從而實現了對一個組件的封裝， 一個.vue 文件就是一個單獨的組件。因爲.vue文件是自定義的，瀏覽器不認識，因此須要對該文件進行解析。在.vue文件中，dom結構能夠寫在<template/>標籤下，而針對該dom結構的樣式文件則做爲<template/>標籤的兄弟元素<style/>存在，一樣的控制該dom結構的腳本程序寫在另外一個兄弟元素<script/>之中，這樣一來，每一個組件本身對應的結構樣式都在同一個文件之中，便不會與其它的組件搞混了。

style標籤有哪些屬性？分別是什麼意思？
<style/>標籤包含scoped和module屬性，分別表示css做用域和css模塊，通常會寫上scoped屬性，表示樣式僅對當前組件以及其子組件的模板部分生效

script標籤中的export default(default:默認)是什麼意思？
<script/>標籤下第一行代碼是export default {……}，這是ES6新增的模塊部分的語法，採用模塊的方式，每一個文件都自成一個模塊，採用export和import來暴露和引用接口。一個文件或模塊中，export 和 import能夠有多個，但export default只能有一個，使用該命令以後別的模塊引用時就能夠不須要知道所要加載的模塊變量名


引自大佬們 https://www.jianshu.com/p/0142fa75aa5f    https://www.cnblogs.com/SamWeb/p/6391373.html  


-->

 

 

vuex

安裝vuex：npm install  vuex --save

 

 

<script type="text/x-template" id="com-1">
</script>  https://www.cnblogs.com/cc11001100/p/7189410.html

 

https://vuex.vuejs.org/zh/
在Vuex中說白了，任何的操做都是圍繞state來進行的，Vuex是狀態管理器，做用就是管理state中的狀態，
其餘提供的全部功能Getter、Mutation、Action都是爲了可以更好的管理state，
而之因此設計成指望經過Mutation改變狀態，是由於咱們指望**全部狀態的變化都是有跡可循的！**

 vuex五個核心屬性 http://www.javashuo.com/article/p-tgzdjikv-y.html

 

vue component:組件 能夠直接更改state
可是仍是選擇經過mutations devtools瀏覽器插件能夠記錄是誰更改了state 作到有跡可循 錯了的話能夠查到是哪步出錯
可是mutations只能夠進行同步操做 若是有異步操做的話 在actions進行 異步操做作完了來到同步操做
backend api 後臺api

安裝好後 創建文件夾store--index.js

 

state          <h2>{{$store.state.counter}}</h2>
使用單一狀態樹 用一個vuex對象包含了所有的應用層級狀態 每一個應用將僅僅包含一個 store 實例。
響應式

getters相似於單個組件的計算屬性 若是須要state中一些複雜變形後的數據 參數一state 參數二getters
默認是不能傳遞參數的 若是但願傳遞參數 只能是讓getters自己返回另外一個函數
getter 在經過屬性訪問時是做爲 Vue 的響應式系統的一部分緩存其中的。

mutation vuex中store狀態更新的惟一方式：提交mutation
Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。
這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數
能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）

響應式修改數據:
在咱們使用vue進行開發的過程當中，可能會遇到一種狀況：當生成vue實例後，當再次給數據賦值時，有時候並不會自動更新到視圖上去；
當咱們去看vue文檔的時候，會發現有這麼一句話：若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。
             Vue.set(state.info,'address','洛杉磯') //給state響應式增長屬性
             Vue.delete(state.info,'age')//響應式刪除
https://www.jianshu.com/p/70b2e2e0aa11

actions： 大神 寫的賊厲害的一篇https://blog.csdn.net/wopelo/article/details/80285167

 

axios     npm install axios --save安裝完了在任何一個地方使用均可 

 

項目中去服務器請求數據 請求回來再作進一步處理------網絡請求
vue中發送網絡請求有不少方式
      傳統的Ajax/jQuery.ajax(重量級框架 代碼多)/vue-resource(棄用)/axios
跨域問題:
     jsonp(核心在於經過< script>標籤的src來幫助咱們請求數據,將數據當作個javascript的函數來執行， 而且執行的過程當中傳入咱們須要的json.)
     axios:在瀏覽器中發送XMLHttpRequests請求/在node中發送請求/支持promise/攔截請求和響應/請求轉換和響應數據

 Vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。 是一個基於 Promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中

  
export default{
   name:'app',
   created(){
     //1.無請求參數
     axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then( res => {
          console.log(res);
        }).catch(err =>{
          console.log(err);
        })
      //2.有請求參數
     axios.get('https://api.coindesk.com/v1/bpi/currentprice.json',{
       params:{type:'sell',page:1}
     }).then(res => {
       console.log(res);
     }).catch(err =>{
       console.log(err);
     })
   }
}
params: 專門針對get請求的參數拼接(拼接到url上啊 就是那種xxxx?x=x&x=x)
  
axios發送併發請求  並等結果都趕回再處理  axios.all([axios(),axios()]).then(results => {})
axios.all([axios({
  
    url:'https://api.coindesk.com/v1/bpi/currentprice.json',
}),axios({
      url:'https://www.runoob.com/try/ajax/demo_axios_post.php',
})]).then(axios.spread( (res1,res2) => {    spread返回結果是數組 把數組自動展開
  console.log('第一個'+res1)
  console.log('第二個'+res1)
}))

 

開發中不少參數都是固定的，能夠進行一些抽取 ，也能夠用axios全局配置
axios.defaults.baseurl = "    axios.defaults.header =      axios.defaults.timeout =
// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。 它能夠經過設置一個 `baseURL` 便於爲 axios 實例的方法傳遞相對 URL
baseURL: 'https://some-domain.com/api/',
// `headers` 是即將被髮送的自定義請求頭
headers: {'X-Requested-With': 'XMLHttpRequest'}

請求方式 methods:'get' ->params       'post'->data:{}

 

axios攔截器  在Promise的then和catch調用前攔截到

//5，封裝request模塊   
import {request} from "./network/request"  
export function request(config){
   //1.建立axios實例
   const instance4 = axios.create({
      baseURL:'',
      timeout:10000
   })
   //2.攔截器                   axios.interceptors全局攔截 https://majing.io/posts/10000005381218
     //請求攔截 instance4.interceptors.request.use(function(){},function(){})
     //響應攔截instance4.interceptors.response.use(function(){},function(){})
     instance4.interceptors.request.use(config =>{  // Do something before request is sent
        console.log(config);   //攔截下來後進行一些小動做好比加個圖片動下數據啥的
        return config;//攔截下來變身以後你還得原封不動返回回去！！！！ 
     },err =>{ // Do something with request error
          console.log(err);
          Promise.reject(error)
     })

     instance4.interceptors.response.use(result =>{ // Do something with response data
          console.log(result); 
          return result.data;//攔截處理完後 把結果返回出去 否則其餘地方就拿不到結果了 res.data是我真正須要的結果
     },err =>{ // Do something with response error
          console.log(err)
     })

   //3.發送請求
   return instance4(config);
}
//promise方法
request({ //函數呀 由於那邊return promise 因此這邊能夠then catch
   url:''
}).then( res =>{})
.catch( err =>{})

 

大神總結axios : https://blog.csdn.net/lwpoor123/article/details/85259614

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

每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程