Vue学习日记23

1.cursor: pointer
解析:鼠标指针变成手的形状,即和放到链接上面的鼠标指针一样。
说明:cursor属性规定要显示的光标的类型[形状]。

2.display:none和visibility:hidden元素
解析:
[1]display与元素的隐藏:如果给一个元素设置了display:none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。
[2]visibility与元素的隐藏:给元素设置visibility:hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。

3.display:none与visibility:hidden的区别
解析:除display:none隐藏后的元素不占据任何空间,而visibility:hidden隐藏后的元素空间依旧保留外。如下所示:
[1]visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别。
[2]visibility: hidden不会影响计数器的计数,visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样。

4.use strict指令
解析:"use strict"指令在JavaScript 1.8.5 [ECMAScript5]中新增。它不是一条语句,但是是一个字面量表达式,在JavaScript旧版本中会被忽略。"use strict"的目的是指定代码在严格条件下执行。严格模式下不能使用未声明的变量。

5.exports和module.exports
解析:
[1]exports返回的是模块函数,它的方法可以直接调用。
[2]module.exports返回的是模块对象本身,返回的是一个类,它需要new对象之后才可以调用。
[3]exports是module.exports的一个引用,exports指向的是module.exports。

6.export和export default区别
解析:
[1]export与export default均可用于导出常量、函数、文件、模块等。
[2]在一个文件或模块中,export、import可以有多个,export default仅有一个。
[3]通过export方式导出,在导入时要加{ },export default则不需要。
[4]export能直接导出变量表达式,export default不行。

7.vue.config.js
解析:vue.config.js是一个可选的配置文件,如果项目的[和package.json同级的]根目录中存在这个文件,那么它会被@vue/cli-service自动加载。也可以使用package.json中的vue字段,但是注意这种写法需要严格遵照JSON的格式来写。

8.baseUrl
解析:从Vue CLI 3.3起已弃用,可使用publicPath。

9.publicPath
解析:部署应用包时的基本URL。用法和webpack本身的output.publicPath一致,但是Vue CLI在一些其它地方也需要用到这个值,所以请始终使用publicPath而不要直接修改webpack的output.publicPath。

10.相对publicPath的限制
解析:在以下情况下,应当避免使用相对publicPath:
[1]当使用基于HTML5 history.pushState的路由时
[2]当使用pages选项构建多页面应用时

11.outputDir
解析:默认为’dist’。当运行vue-cli-service build时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除[构建时传入–no-clean可关闭该行为]。
说明:始终使用outputDir而不要修改webpack的output.path。

12.assetsDir
解析:默认为为’’。放置生成的静态资源[js、css、img、fonts]的目录。

13.indexPath
解析:默认为’index.html’。指定生成的index.html的输出路径,也可以是一个绝对路径。

14.filenameHashing
解析:默认为true。默认情况下,生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存。然而,这也要求index的HTML是被Vue CLI自动生成的。如果无法使用Vue CLI生成的 index HTML,可以通过将这个选项设为false来关闭文件名哈希。

15.runtimeCompiler
解析:默认值为false。是否使用包含运行时编译器的Vue构建版本。设置为true后就可以在Vue组件中使用template选项了,但是这会让应用额外增加10kb左右。

16.transpileDependencies
解析:默认值为[]。默认情况下babel-loader会忽略所有node_modules中的文件。如果想要通过Babel显式转译一个依赖,可以在这个选项中列出来。

17.productionSourceMap
解析:默认为true。如果不需要生产环境的source map,可以将其设置为false以加速生产环境构建。

18.configureWebpack
解析:如果这个值是一个对象,则会通过webpack-merge合并到最终的配置中。如果这个值是一个函数,则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。

19.chainWebpack
解析:它是一个函数,会接收一个基于webpack-chain的ChainableConfig实例。允许对内部的webpack配置进行更细粒度的修改。

20.devServer.proxy
解析:如果前端应用和后端API服务器没有运行在同一个主机上,需要在开发环境下将API请求代理到API服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。devServer.proxy可以是一个指向开发环境API服务器的字符串:

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

这会告诉开发服务器将任何未知请求[没有匹配到静态文件的请求]代理到http://localhost:4000。如果想要更多的代理控制行为,也可以使用一个path:options成对的对象。如下所示:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

21.ESLint
解析:ESLint可以通过.eslintrc或package.json中的eslintConfig字段来配置。

22.TypeScript
解析:TypeScript可以通过tsconfig.json来配置。

23.Babel
解析:Babel可以通过babel.config.js进行配置。

24.lintOnSave
解析:默认为true。是否在开发环境下通过eslint-loader在每次保存时lint代码。这个值会在@vue/cli-plugin-eslint被安装之后生效。

25.chunks和bundle
解析:多个chunk合在一起就是bundle,一个bundle可以理解为一个大的js打包之后生成的文件,而多个bundle里可能有公共的部分,或者一个bundle里的东西并不需要一次性加载,需要按照路由按需加载,这个时候就需要按需加载,拆分成不同的chunk。

参考文献:
[1]手摸手,带你用合理的姿势使用webpack4 [上]:https://juejin.im/post/5b56909a518825195f499806
[2]手摸手,带你用合理的姿势使用webpack4 [下]:https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc
[3]ES6入门教程:http://es6.ruanyifeng.com/#README
[4]Vue CLI配置参考:https://cli.vuejs.org/zh/config/
[5]http-proxy-middleware:https://github.com/chimurai/http-proxy-middleware
[6]webpack相关:https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F

发布了364 篇原创文章 · 获赞 422 · 访问量 36万+

猜你喜欢

转载自blog.csdn.net/shengshengwang/article/details/103922027
今日推荐