<script>
const serverSrc='www.google.com';
const token='fdfeeDERVDFffff';
const hasLogin=false;
const userSite="192.168.9.100.456";
  export default
  {
    userSite,//用戶地址
    token,//用戶token身份
    serverSrc,//服務(wù)器地址
    hasLogin,//用戶登錄狀態(tài)
  }
</script>

使用方式1：
在需要的地方引用進(jìn)全局變量模塊文件，然后通過文件里面的變量名字獲取全局變量參數(shù)值。

<template>
    <div>{{ token }}</div>
</template>

<script>
import global_ from '../../components/Global'//引用模塊進(jìn)來
export default {
 name: 'text',
data () {
    return {
         token:global_.token,//將全局變量賦值到data里面，也可以直接使用global_.token
        }
    }
}
</script>
<style lang="scss" scoped>

</style>

使用方式2：
在程序入口的main.js文件里面，將上面那個Global.vue文件掛載到Vue.prototype。

import global_ from './components/Global'//引用文件
 Vue.prototype.GLOBAL = global_//掛載到Vue實例上面

接著在整個項目中不需要再通過引用Global.vue模塊文件，直接通過this就可以直接訪問Global文件里面定義的全局變量。

<template>
    <div>{{ token }}</div>
</template>

<script>
export default {
 name: 'text',
data () {
    return {
         token:this.GLOBAL.token,//直接通過this訪問全局變量。
        }
    }
}
</script>
<style lang="scss" scoped>
</style>

Vuex也可以設(shè)置全局變量

定義全局函數(shù)
新建一個模塊文件，然后在main.js里面通過Vue.prototype將函數(shù)掛載到Vue實例上面，通過this.函數(shù)名，來運行函數(shù)。

1. 在main.js里面直接寫函數(shù)

簡單的函數(shù)可以直接在main.js里面直接寫

Vue.prototype.changeData = function (){//changeData是函數(shù)名
  alert('執(zhí)行成功');
}

組件中調(diào)用：

this.changeData();//直接通過this運行函數(shù)

1. 寫一個模塊文件，掛載到main.js上面。
  base.js文件，文件位置可以放在跟main.js同一級，方便引用

Vue.js 的插件應(yīng)當(dāng)有一個公開方法 install 。這個方法的第一個參數(shù)是 Vue 構(gòu)造器 , 第二個參數(shù)是一個可選的選項對象
export default{
  install(Vue,options)
  {
    Vue.prototype.getData = function () {
      console.log('我是插件中的方法');
    }
  }
}
或者
exports.install = function (Vue, options) {
   Vue.prototype.text1 = function (){//全局函數(shù)1
    alert('執(zhí)行成功1');
    };
    Vue.prototype.text2 = function (){//全局函數(shù)2
    alert('執(zhí)行成功2');
    };
};

main.js入口文件：

import base from './base'//引用
Vue.use(base);//將全局函數(shù)當(dāng)做插件來進(jìn)行注冊

組件里面調(diào)用：

this.text1();
this.text2();

附工具函數(shù)使用方法，變量和類的使用方法一樣
寫一個公共的 util.js export出去，然后到處require

//type1
        //util.js
        
        export function square(n){
            return n*n;
        }
        
        //main.js
        
        import {square} from './utils.js'
        console.log(square(2)) 
        
        //type2
        //util.js
        
        export function square(n){
            return n*n;
        }
        
        //main.js
        
        import {square as calcSquare} from './utils.js'
        console.log(calcSquare(2)) 
        
        //type3
        //util.js
        
        export default function square(n){
            return n*n;
        }
        
        //main.js
        
        import square from './utils.js'
        console.log(square(2))

- 7.2 Vue axios 給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址

1.為什么
由于我在開發(fā)過程中，前端請求訪問的是我本機(jī)啟動的后臺服務(wù)，此時涉及到跨域（因為端口不一樣），所以就在config/index.js文件中配置了代理，如下：

image

意思就是說凡是以api開頭的請求，會幫我轉(zhuǎn)到8089端口去獲取數(shù)據(jù)。所以前端的請求都統(tǒng)一寫成'api'+'接口名'

但是在生產(chǎn)環(huán)境下，我們不需要在接口前面加api發(fā)送請求，所以我們需要判斷開發(fā)環(huán)境和生產(chǎn)環(huán)境，然后寫相應(yīng)接口

2.具體配置
在項目中找到以下兩個文件：

config/dev.env.js 和 config/prod.env.js

2.1 在config/dev.env.js文件中加入一行代碼：API_ROOT: ' "http://localhost:8080/api" '

image
2.2 在config/dev.env.js文件中加入一行代碼： API_ROOT: ' "" '

image

3.在src/main.js文件中配置全局變量（掛在vue原型上）
process.env是一個全局變量，能夠判斷當(dāng)前環(huán)境。

image

所以在axios請求的時候，可以直接用this.baseURL+api :

image

const service = axios.create({
  baseURL: process.env.BASE_API,//自己定義一個baseURL，這里我寫在了實例里面
})

axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://192.168.1.48:8080/LeyePlatform' : 'htt
p://leye.hoyar.com.cn';

其中，this. $http是因為我在main.js中將axios掛到vue的原型上（Vue.prototype.$ http = axios; ），這樣就不用每次在用axios之前都要引入axios了；

原文：https://blog.csdn.net/u014054437/article/details/82970725

- 7.3 VNode是什么？虛擬 DOM是什么？

Vue在頁面上渲染的節(jié)點，及其子節(jié)點稱為“虛擬節(jié)點 (Virtual Node)”，簡寫為“VNode”。“虛擬 DOM”是由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。

- 7.4 為什么避免 v-if 和 v-for 用在一起

當(dāng) Vue 處理指令時，v-for 比 v-if 具有更高的優(yōu)先級，通過v-if 移動到容器元素，不會再重復(fù)遍歷列表中的每個值。取而代之的是，我們只檢查它一次，且不會在 v-if 為否的時候運算 v-for。

- 7.5 為什么使用key？

當(dāng)有相同標(biāo)簽名的元素切換時，需要通過 key 特性設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會替換相同標(biāo)簽內(nèi)部的內(nèi)容。

- 7.6 vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一個加載器。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等

- 7.7 scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

答：css的預(yù)編譯。
使用步驟：
第一步：先裝css-loader、node-loader、sass-loader等加載器模塊
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：在同一個文件，配置一個module屬性
第四步：然后在組件的style標(biāo)簽加上lang屬性，例如：lang=”scss”
特性:

可以用變量，例如（$變量名稱=值）；
可以用混合器，例如（）
可以嵌套

- 7.8 vue懶加載按需加載

懶加載

（1）定義：懶加載也叫延遲加載，即在需要的時候進(jìn)行加載，隨用隨載。

（2）異步加載的三種表示方法：

vue異步組件技術(shù)
這種情況下一個組件生成一個js文件。

 {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require(['../components/PromiseDemo'], resolve)
        }

es提案的import()

推薦使用這種方式(需要webpack > 2.4)
webpack官方文檔：webpack中使用import()
vue官方文檔：路由懶加載(使用import())
vue-router配置路由，代碼如下：

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})

webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實現(xiàn)按需加載。
這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
舉例如下：

        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            // component: Hello
            component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
        }

    1.  resolve => require([URL], resolve),支持性好
    2.  () => system.import(URL) , webpack2官網(wǎng)上已經(jīng)聲明將逐漸廢除,不推薦使用 
    3.  () => import(URL), webpack2官網(wǎng)推薦使用,屬于es7范疇,需要配合babel的syntax-dynamic-

import插件使用。

（3）vue中懶加載的流程：
（4）Vue中懶加載的各種使用地方：

1.路由懶加載：

export default new Router({
  routes:[
    {
     path: '/my',
     name: 'my',
      //懶加載
     component: resolve => require(['../page/my/my.vue'], resolve),
    },
  ]
})

2.組件懶加載：

components: {
  historyTab:resolve => {
  require(['../../component/historyTab/historyTab.vue'],resolve)
  },   
},

全局懶加載：

Vue.component('mideaHeader', () => {
System.import('./component/header/header.vue')
})

按需加載

（1）按需加載原因：首屏優(yōu)化，第三方組件庫依賴過大,會給首屏加載帶來很大的壓力，一般解決方式是按需求引入組件。

（2）element-ui按需加載

element-ui 根據(jù)官方說明，先需要引入babel-plugin-component插件，做相關(guān)配置，然后直接在組件目錄，注冊全局組件。

安裝babel-plugin-component插件：

npm install babel-plugin-component –D

配置插件，將 .babelrc修改為：

{
"presets": [
  ["es2015", { "modules": false }]
 ],
"plugins": [["component", [
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-default"
   }
 ]]]
}

3.引入部分組件，比如 Button和 Select，那么需要在 main.js中寫入以下內(nèi)容：

1.  import Vue from 'vue'
2.  import { Button, Select } from 'element-ui'
3.  import App from './App.vue'</code>


Vue.component(Button.name, Button)
Vue.component(Select.name, Select) /* 或?qū)憺?*Vue.use(Button) *Vue.use(Select) */

（3）iView按需求加載：

import Checkbox from'iview/src/components/checkbox';

特別提醒:

1.按需引用仍然需要導(dǎo)入樣式，即在 main.js 或根組件執(zhí)行 import 'iview/dist/styles/iview.css';
2.按需引用是直接引用的組件庫源代碼，需要借助 babel進(jìn)行編譯，以 webpack為例：

module: {
  rules: [
       {test: /iview.src.*?js$/, loader: 'babel' },
       {test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
   ]
}

如下例子中:
//懶加載路由

const routes = [
  {          //當(dāng)首次進(jìn)入頁面時，頁面沒有顯示任何組件；讓頁面一加載進(jìn)來就默認(rèn)顯示first頁面
    path:'/',   //重定向，就是給它重新指定一個方向，加載一個組件；
    component:resolve => require(['@/components/First'],resolve)
  },
  {
    path:'/first',
    component:resolve => require(['@/components/First'],resolve)
  },
  {
    path:'/second',
    component: resolve => require(['@/components/Second'],resolve)
  }
//這里require組件路徑根據(jù)自己的配置引入
]
//最后創(chuàng)建router 對路由進(jìn)行管理，它是由構(gòu)造函數(shù) new vueRouter() 創(chuàng)建，接受routes 參數(shù)。

 const router = new VueRouter({
 routes
})

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

vue.js 核心知識點七

vue.js 核心知識點七

目錄

- 7.1 vue項目中，定義全局函數(shù) 全局變量

- 7.2 Vue axios 給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址

- 7.3 VNode是什么？虛擬 DOM是什么？

- 7.4 為什么避免 v-if 和 v-for 用在一起

- 7.5 為什么使用key？

- 7.6 vue-loader是什么？使用它的用途有哪些？

- 7.7 scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

- 7.8 vue按需加載

- 7.1 vue項目中，定義全局函數(shù) 全局變量

- 7.2 Vue axios 給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址

- 7.3 VNode是什么？虛擬 DOM是什么？

- 7.4 為什么避免 v-if 和 v-for 用在一起

- 7.5 為什么使用key？

- 7.6 vue-loader是什么？使用它的用途有哪些？

- 7.7 scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

- 7.8 vue懶加載按需加載

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

vue.js 核心知識點七

目錄

- 7.1 vue項目中，定義全局函數(shù) 全局變量

- 7.2 Vue axios 給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址

- 7.3 VNode是什么？虛擬 DOM是什么？

- 7.4 為什么避免 v-if 和 v-for 用在一起

- 7.5 為什么使用key？

- 7.6 vue-loader是什么？使用它的用途有哪些？

- 7.7 scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

- 7.8 vue按需加載

- 7.1 vue項目中，定義全局函數(shù) 全局變量

- 7.2 Vue axios 給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址

- 7.3 VNode是什么？虛擬 DOM是什么？

- 7.4 為什么避免 v-if 和 v-for 用在一起

- 7.5 為什么使用key？

- 7.6 vue-loader是什么？使用它的用途有哪些？

- 7.7 scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

- 7.8 vue懶加載 按需加載

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

- 7.8 vue懶加載按需加載