目录
- 7.1 vue项目中，定义全局函数 全局变量
- 7.2 Vue axios 给开发环境和生产环境配置不同的接口地址
- 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项目中，定义全局函数 全局变量
定义全局变量
设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。
全局变量模块文件：
Global.vue
<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,//服务器地址
hasLogin,//用户登录状态
}
</script>
- 使用方式1：
在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。
<template>
<div>{{ token }}</div>
</template>
<script>
import global_ from '../../components/Global'//引用模块进来
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也可以设置全局变量
定义全局函数
新建一个模块文件，然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面，通过this.函数名，来运行函数。
- 在main.js里面直接写函数
简单的函数可以直接在main.js里面直接写
Vue.prototype.changeData = function (){//changeData是函数名
alert('执行成功');
}
组件中调用：
this.changeData();//直接通过this运行函数
- 写一个模块文件，挂载到main.js上面。
base.js文件，文件位置可以放在跟main.js同一级，方便引用
- 写一个模块文件，挂载到main.js上面。
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象
export default{
install(Vue,options)
{
Vue.prototype.getData = function () {
console.log('我是插件中的方法');
}
}
}
或者
exports.install = function (Vue, options) {
Vue.prototype.text1 = function (){//全局函数1
alert('执行成功1');
};
Vue.prototype.text2 = function (){//全局函数2
alert('执行成功2');
};
};
main.js入口文件：
import base from './base'//引用
Vue.use(base);//将全局函数当做插件来进行注册
组件里面调用：
this.text1();
this.text2();
附工具函数使用方法，变量和类的使用方法一样
写一个公共的 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 给开发环境和生产环境配置不同的接口地址
-
1.为什么
由于我在开发过程中，前端请求访问的是我本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以就在config/index.js文件中配置了代理，如下：
image
意思就是说凡是以api开头的请求，会帮我转到8089端口去获取数据。所以前端的请求都统一写成'api'+'接口名'
但是在生产环境下，我们不需要在接口前面加api发送请求，所以我们需要判断开发环境和生产环境，然后写相应接口
-
2.具体配置
在项目中找到以下两个文件：
config/dev.env.js 和 config/prod.env.js
-
2.1 在config/dev.env.js文件中加入一行代码：API_ROOT: ' "//localhost:8080/api" '
image
-
2.2 在config/dev.env.js文件中加入一行代码： API_ROOT: ' "" '
image
3.在src/main.js文件中配置全局变量（挂在vue原型上）
process.env是一个全局变量，能够判断当前环境。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 = axios; ），这样就不用每次在用axios之前都要引入axios了；
原文：https://blog.csdn.net/u014054437/article/details/82970725
- 7.3 VNode是什么？虚拟 DOM是什么？
Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。
- 7.4 为什么避免 v-if 和 v-for 用在一起
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。
- 7.5 为什么使用key？
当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
- 7.6 vue-loader是什么？使用它的用途有哪些？
解析.vue文件的一个加载器。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
- 7.7 scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
答：css的预编译。
使用步骤：
第一步：先装css-loader、node-loader、sass-loader等加载器模块
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：在同一个文件，配置一个module属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
特性:
可以用变量，例如（$变量名称=值）；
可以用混合器，例如（）
可以嵌套
- 7.8 vue懒加载 按需加载
懒加载
（1）定义：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
（2）异步加载的三种表示方法：
- vue异步组件技术
这种情况下一个组件生成一个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技术，也可以实现按需加载。
这种情况下，多个路由指定相同的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官网上已经声明将逐渐废除,不推荐使用
3. () => import(URL), webpack2官网推荐使用,属于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）按需加载原因：首屏优化，第三方组件库依赖过大,会给首屏加载带来很大的压力，一般解决方式是按需求引入组件。
（2）element-ui按需加载
element-ui 根据官方说明，先需要引入babel-plugin-component插件，做相关配置，然后直接在组件目录，注册全局组件。
- 安装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中写入以下内容：
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) /* 或写为 *Vue.use(Button) *Vue.use(Select) */
（3）iView按需求加载：
import Checkbox from'iview/src/components/checkbox';
特别提醒:
1.按需引用仍然需要导入样式，即在 main.js 或根组件执行 import 'iview/dist/styles/iview.css';
2.按需引用是直接引用的组件库源代码，需要借助 babel进行编译，以 webpack为例：
module: {
rules: [
{test: /iview.src.*?js$/, loader: 'babel' },
{test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]
}
如下例子中:
//懒加载路由
const routes = [
{ //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示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组件路径根据自己的配置引入
]
//最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
const router = new VueRouter({
routes
})
网友评论