前端关于Vue的面试题（五）

最新推荐文章于 2024-09-04 22:27:53 发布

Jojorain

最新推荐文章于 2024-09-04 22:27:53 发布

阅读量354

点赞数

文章标签： vue 面试

本文链接：https://blog.csdn.net/Jojorain/article/details/104953070

版权

55.vue组件的scoped属性的作用

当 <style> 标签有scoped 属性时，它的 CSS 只作用于当前组件中的元素
你可以在一个组件中同时使用有 scoped 和 非scoped 样式：


<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

56.vue中集成的UI组件库

常用的UI组件库有：
vux： Vue.js 移动端 UI 组件库
Amaze ~ 妹子 UI
Element：饿了么组件库，适用于开发应用后台
mint-ui：移动端 UI 组件库
Ant-design : 阿里的UI组件库

57.如何适配移动端？【经典】

在css样式兼容性方面，我们可以使用autoprefixer插件

postcss可以被理解为一个平台，可以让一些插件在上面跑。它提供了一个解析器，
可以将CSS解析成抽象语法树。通过PostCSS这个平台，我们能够开发一些插件，
来处理CSS。热门插件如autoprefixer。

vue-cli已经自动集成了postcss，所以我们可以在postcss.config.js这个配置文件中直接添加autoprefixer这个插件

在屏幕大小适配方面，我们可以使用下面两种方案

a) 使用flexible和 postcss-px2rem

之前使用rem适配的思路：使用媒体查询，确定不同屏幕下html标签的font-size  (即1rem单位)，
然后在写css样式的时候，就可以使用1rem , 2rem这样的单位来做适配了。

但是这种适配的问题是需要手动把px单位换算成rem单位，比较麻烦。对应的，
我们可以使用flexible和 postcss-px2rem来解决这个问题

//1.安装flexible。 flexible主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题
npm install lib-flexible --save

//2.main.js引入flexible
import 'lib-flexible'

//此时运行程序会看到html中自动加上了font-size    font-size的默认值为viewport的十分之一
//在页面中引入flexible.js后，flexible会在<html>标签上增加一个data-dpr属性和font-size样式（如下图）。

//3.安装postcss-pxtorem
npm install postcss-pxtorem --save-dev

//4.修改postcss.config.js
module.exports = {
  plugins: {
    //autoprefixer 自动补全css前缀的东西
    'autoprefixer': {
      //兼容的机型
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //换算基数，一般和html的font-size一致
      propList: ['*']  //哪些css属性需要换算
    }
  }
};

b) 使用postcss-px-to-viewport

`vw` 与 `vh`单位，以`viewport`为基准，`1vw` 与 `1vh`分别为`window.innerWidth` 
与 `window.innerHeight`的百分之一。

vw/vh 单位其实出现比较早了，只是以前支持性不太好，现在随着浏览器的发展，
大部分（92%以上）的浏览器已经支持了vw/vh

npm i postcss-px-to-viewport -save -dev

//修改postcss.config.js
module.exports = {
  plugins: {
      autoprefixer: {
          //兼容的机型
      	  browsers: ['Android >= 4.0', 'iOS >= 7']
      },
    //px转换为vw单位的插件
    "postcss-px-to-viewport": {
      //1vw = 3.2
      viewportWidth: 320,
      //1vh = 5.68
      viewportHeight: 568,
      // px to vw无法整除时，保留几位小数
      unitPrecision: 5,
      // 转换成vw单位   
      viewportUnit: 'vw',
     //不转换的类名
      selectorBlackList: [],
      // 小于1px不转换
      minPixelValue: 1,
     //允许媒体查询中转换
      mediaQuery: false,
      //排除node_modules文件中第三方css文件
      exclude: /(\/|\\)(node_modules)(\/|\\)/  
    },
  }
};

58.vue-cli工程中如何使用背景图？

第一种方法：通过 import 引入

首先，引入要使用的背景图片：
<script type="text/javascript">
    import  cover  from  "../assets/images/cover.png";
    export  default{
        ...
    }
</script>

然后，通过 v-bind:style 使用：
<div :style="{ backgroundImage:'url(' + cover + ')' }"></div>

第二种方法：通过 require 引入：

直接通过 v-bind 和 require 配合使用

<div :style="{ backgroundImage:'url(' + require('../assets/images/couver.png') + ')' }"></div>

59.vue中如何实现tab切换功能？

在 vue 中，实现 Tab 切换主要有三种方式：
1、使用 component 动态组件实现 Tab切换 [推荐移动端使用]
2、使用 vue-router 路由配合<router-view></router-view>标签实现
3、使用第三方组件

60.vue中如何利用`<keep-alive></keep-alive>`标签实现某个组件缓存功能？

vue-cli工程中实现某个组件的缓存功能，可用 keep-alive 标签与 vue-router的meta形式数据传递配合完成。

//第一步：在 app.vue 里面 template部分 使用 <keep-alive></keep-alive> 组件：

<template>
  <div id="app">
  		<keep-alive>
        	<router-view v-if="$router.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$router.meta.keepAlive"></router-view>
  </div>
</template>


//第二步：在src/router.js:
import account from '../page/demo/account.vue'
import course from '../page/demo/course.vue'

export default new Router({
  routes: [
  		{ 
    		path: '/account', 
    		name: 'account', 
   		 	component: Account, 
    		meta:{
            	keepAlive:false //false为不缓存
            }
  		}，
        { 
    		path: '/course', 
    		name: 'course', 
   		 	component: course, 
    		meta:{
            	keepAlive:true //true为缓存
            }
  		} 
	]
})

61.vue中实现切换页面时为左滑出效果

左滑效果实现，需要使用 <transition></transition> 组件配合 css3 动画效果实现。

<div id="app">
      <!-- 使用transiton来规定页面切换时候的样式-->
      <transition name="slide-left">
        <router-view></router-view>
      </transition> 
</div>
  
<style lang="less">
  /*左滑动效*/
   .slide-left-enter-active {
     animation: slideLeft 0.3s;
   }
  /*自定义动画*/
  @keyframes slideLeft {
    from {
      transform: translate3d(100%, 0, 0);/*横坐标,纵坐标,z坐标*/
      visibility: visible;
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }
</style>

62.在vue-cli工程中如何实现无痕刷新？

无痕刷新:在不刷新浏览器的情况下,实现页面的刷新

一般常用的两种刷新方法：
window.location.reload()，原生 js 提供的方法；
this.$router.go(0)，vue 路由里面的一种方法；

这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，
页面的重新载入，会有短暂的白屏。

vue开启无痕刷新

原理：先在全局组件注册一个方法，用该方法控制router-view的显示与否，然后在子组件调用全局方法。

//第一步：在app.vue里面设置
    <template>
        <div id="app">
             <!--通过切换isRouterAlive的值来控制页面的显示与否-->
             <router-view v-if="isRouterAlive"></router-view>
        </div>
    </template>
    
    <script>
    export  default {
		//给子组件暴露一个方法：这里将当前组件中的reload方法暴露给子组件
        provide(){
            return{
                reload:this.reload
            }
        },
        data(){
            return {
                isRouterAlive:true
            }
        },
        methods:{
            //reload方法中先把isRouterAlive该为false，让router-view不显示
            //然后在$nextTick方法里面重新把isRouterAlive该为true，让router-view重新显示
            //$nextTick表示下一次dom更新完毕之后，在更新dom的时候我们让router-view隐藏，更新dom完毕我们让router-view显示，此时就做到了无痕刷新
            reload(){
                this.isRouterAlive = false;
                this.$nextTick(function(){
                    this.isRouterAlive = true;
                })
            }
        }
    }
    </script>
    

//第二步：在.vue组件中使用全局方法(先用inject注册全局方法，然后即可通过this调用)
    <script>
    export  default{
        inject:['reload'],
        mounted(){
            this.reload();
        }
    }
    </script>

63.vue中中央事件总线？

中央事件总线 ：就是一个名字可以叫做Bus的vue空实例,里边没有任何内容。

它就像一个公交车一样，来回输送人，将组件A输送到组件B，再将组件B输送到组件A；

这里A，B组件可以是父、子组件，也可以是兄、弟组件，或者两个没有任何关系的组件；

我们可以使用中央事件总线这种技术来实现vue组件之间的数据通信。

//1.创建中央事件总线
var bus = new Vue();

//2.使用Bus中央事件总线在A组件中发送信息
Bus.$emit('自定义事件名'，'$on发送过来的数据')；

//3.使用Bus中央事件总线在B组件中接收信息
Bus.$on('自定义事件名'，function(){
     //然后执行什么你自己懂的。。。
})；

64.vue开发命令 `npm run dev` 输入后的执行过程【拓展】

npm run dev 是执行配置在package.json中的脚本，比如：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config webpack.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  
npm run dev 执行的就是webpack-dev-server --inline ....命令,通过webpack-dev-server开启一个本地调试服务器。

在webpack.conf.js文件中找到App的入口文件 ./src/main.js
```
entry: {
   app: './src/main.js'
},
```
main.js用到了页面元素#app、用到了路由和根组件App，并根据这些信息创建一个vue实例

new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
})

webpack-dev-server会将main.js中的代码以及所有引用打包成一个bundle.js，然后配置到内存中
webpack.conf.js中配置的HtmlWebpackPlugin会将index.html文件配置到内存，并且将内存中的bundle.js注入到内存中的index.html中

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
}),

根据webpack.config.js中所配置的devServer的信息，会决定是否自动打开浏览器呈现网页

devServer: { 
    open: true, // 自动打开浏览器
    port: 3000, // 设置启动时候的运行端口
    contentBase: 'src', // 指定托管的根目录
    hot: true // 启用热更新 的 第1步
},

65.vue打包命令是什么？

vue-cli 生成生产环境部署资源的 npm命令：

npm run build

用于查看 vue-cli 生产环境部署资源文件大小的 npm命令：

npm run build --report

66.vue-cli 打包后会生成哪些文件？

dist
  --index.html       单页面文件
  --app.[hash].css   将组件中的css编译合并成一个app.[hash].css的文件
  --app.[hash].js    包含了所有components中的js代码
  --vendor.[hash].js   包含了生产环境所有引用的node_modules中的代码
  --mainfest.[hash].js 包含了webpack运行环境及模块化所需的js代码
  --0.[hash].js        是vue-router使用了按需加载生产的js文件
  
这样拆分的好处是：每块组件修改重新编译后不影响其他未修改的js文件的hash值，
这样能够最大限度地使用缓存，减少HTTP的请求数。

67.如何配置 vue 打包生成文件的路径？

//vue.config.js

//部署应用包时的URL，如果是生产环境，部署到 ./cli-study/dist 路径；如果是开发环境，部署到根路径
publicPath: process.env.NODE_ENV === 'production'? './cli-study/dist': './',
outputDir: 'dist',

Jojorain

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端关于Vue的面试题（五）

55.vue组件的scoped属性的作用当 <style> 标签有scoped 属性时，它的 CSS 只作用于当前组件中的元素你可以在一个组件中同时使用有 scoped 和非scoped 样式：<style>/* 全局样式 */</style><style scoped>/* 本地样式 */</style>5...
复制链接

扫一扫