vue 面试问题总结

vue-cli 工程常用的 npm 命令有哪些?

全局安装 vue-cli
npm install --global vue-cli
创建一个基于 webpack 模板的新项目
vue init webpack my-project
进入项目目录,运行
cd my-project
npm install
npm run dev

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

npm run build 

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

npm run build --report

webpack


//全局安装webpack
cnpm install -g webpack
//安装到你的项目目录
cnpm install --save-dev webpack
//初始化package.json
cnpm init
//使用webpack构建本地服务器
cnpm install --save-dev webpack-dev-server
//运行本地服务器
npm run server
// npm一次性安装多个依赖模块,模块之间用空格隔开
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
//css-loader 和 style-loader
cnpm install --save-dev style-loader css-loader
//安装less-loader和less: 
cnpm install less less-loader --save-dev
//自动根据模版生成html插件
cnpm install --save-dev html-webpack-plugin
//分离CSS和JS文件
cnpm install --save-dev extract-text-webpack-plugin
--save和--save-dev的区别
相同点:都是写入到package.json中
不同点:1使用 --save-dev 安装的 插件,被写入到 devDependencies 对象里面去,而使用 --save 安装的插件,则被写入到 dependencies 对象里面去。
2devDependencies  里面的插件只用于开发环境,不用于生产环境,而 dependencies  是需要发布到生产环境的。

 

vue-cli目录解析:

  1. build 文件夹:用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库,或者配置一下 UI 库。
  2. config 文件夹:主要存放配置文件,用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
  3. dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署。
  4. node_modules:存放npm命令下载的开发环境和生产环境的依赖包。
  5. src: 存放项目源码及需要引用的资源文件。
  6. src下assets:存放项目中需要用到的资源文件,css、js、images等。
  7. src下componets:存放vue开发中一些公共组件:header.vue、footer.vue等。
  8. src下emit:自己配置的vue集中式事件管理机制。
  9. src下router:vue-router vue路由的配置文件。
  10. src下service:自己配置的vue请求后台接口方法。
  11. src下page:存在vue页面组件的文件夹。
  12. src下util:存放vue开发过程中一些公共的.js方法。
  13. src下vuex:存放 vuex 为vue专门开发的状态管理器。
  14. src下app.vue:使用标签渲染整个工程的.vue组件。
  15. src下main.js:vue-cli工程的入口文件。
  16. index.html:设置项目的一些meta头信息和提供
    用于挂载 vue 节点。
  17. package.json:用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。

config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置

build 对象下 对于 生产环境 的配置:

  • index:配置打包后入口.html文件的名称以及文件夹名称
  • assetsRoot:配置打包后生成的文件名称和路径
  • assetsPublicPath:配置 打包后 .html 引用静态资源的路径,一般要设置成 "./"
  • productionGzip:是否开发 gzip 压缩,以提升加载速度

dev 对象下 对于 开发环境 的配置:

  • port:设置端口号
  • autoOpenBrowser:启动工程时,自动打开浏览器
  • proxyTable:vue设置的代理,用以解决 跨域 问题

介绍一些 package.json 里面的配置

常用对象解析:

  • scripts:npm run xxx 命令调用node执行的 .js 文件
  • dependencies:生产环境依赖包的名称和版本号,即这些 依赖包 都会打包进 生产环境的JS文件里面
  • devDependencies:开发环境依赖包的名称和版本号,即这些 依赖包 只用于 代码开发 的时候,不会打包进 生产环境js文件 里面。

vue.js的两个核心是什么?

核心思想是:数据驱动、组件系统。

 

请说出vue几种常用的指令

v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;

v-show 与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none";

v-else 必须跟在v-if/v-show指令之后,不然不起作用;如果v-if/v-show指令的表达式为true,则else元素不显示;如果v-if/v-show指令的表达式为false,则else元素显示

v-for  类似JS的遍历,用法为 v-for="item in items", items是数组,item为数组中的数组元素。

v-bind  这个指令用于响应地更新 HTML 特性,比如绑定某个class元素或元素的style样式。

v-on  用于监听指定元素的DOM事件,比如点击事件。

v-if和v-show的区别?

v-if根据bool值判断显示或不显示元素

v-show根据bool值判断显示或隐藏元素

vue常用的修饰符

.prevent: 提交事件不再重载页面

.stop: 阻止单击事件冒泡

.self: 当事件发生在该元素本身而不是子元素的时候会触发

.capture: 事件侦听,事件发生的时候会调用

.once: 跟v-once作用类似,只渲染一次,第二次不会执行

v-on可以监听多个方法吗?

 v-on='{click:DoSomething,mouseleave:MouseLeave}'>doSomething

vue中 key 值的作用

需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

 key 管理可复用的元素,提高循环的性能。

vue中子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件:


子组件:


第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

父组件:


子组件:



                    
                    

你可能感兴趣的:(其他,Vue小笔记)