Vue学习日记24

血红的双手。 提交于 2020-01-10 21:49:32

1.webpack-chain
解析:应用一个链式API来生成和简化2-4版本的webpack的配置的修改。webpack-chain尝试通过提供可链式或顺流式的API创建和修改webpack配置。API的Key部分可以由用户指定的名称引用,这有助于跨项目修改配置方式的标准化。可通过npm方式进行安装:npm install --save-dev webpack-chain。

2.vue-cli-service命令
解析:在一个Vue CLI项目中,@vue/cli-service安装了一个名为vue-cli-service的命令。可以在npm scripts中以vue-cli-service、或者从终端中以./node_modules/.bin/vue-cli-service访问这个命令。使用默认preset的项目的package.json:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

3.vue-cli-service serve
解析:vue-cli-service serve命令会启动一个开发服务器[基于webpack-dev-server]并附带开箱即用的模块热重载[Hot-Module-Replacement]。除了通过命令行参数,也可以使用vue.config.js里的devServer字段配置开发服务器。

用法:vue-cli-service serve [options] [entry]
选项:
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值:development)
  --host    指定 host (默认值:0.0.0.0)
  --port    指定 port (默认值:8080)
  --https   使用 https (默认值:false)

4.vue-cli-service build
解析:vue-cli-service build会在dist/目录产生一个可用于生产环境的包,带有JS/CSS/HTML的压缩,和为更好的缓存而做的自动的vendor chunk splitting。它的chunk manifest会内联在HTML里。如下所示:

用法:vue-cli-service build [options] [entry|pattern]
选项:
  --mode        指定环境模式 (默认值:production)
  --dest        指定输出目录 (默认值:dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值:app)
  --name        库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

5.vue-cli-service inspect
解析:可以使用vue-cli-service inspect来审查一个Vue CLI项目的webpack config。

用法:vue-cli-service inspect [options] [...paths]
选项:
  --mode    指定环境模式 (默认值:development)

6.runjs
解析:Minimalistic building tool. This project has been renamed to ‘tasksfile’. Install using ‘npm install tasksfile’ instead.

7.chalk
解析:Terminal string styling done right.

8.connect
解析:Connect是一个框架,它使用被称为中间件的模块化组件,在Connect中,中间件组件是一个函数,它拦截HTTP服务器提供的请求和响应对象,执行逻辑,或者结束响应,或者把它传递给下一个中间件组件。Connect用分派器把中间件连接在一起。

9.serve-static
解析:Serve static files.

10.svgo
解析:SVGO是基于node.js开发的SVG优化工具,可用来处理元数据、注释、隐藏元素、默认或非正规数值,以及其它不影响正常显示的东西。

11.常见的HTML事件
解析:
[1]onchange:HTML元素改变
[2]onclick:用户点击HTML元素
[3]onmouseover:用户在一个HTML元素上移动鼠标
[4]onmouseout:用户从一个HTML元素上移开鼠标
[5]onkeydown:用户按下键盘按键
[6]onload:浏览器已完成页面的加载

12.HTML事件的例子
解析:
[1]当用户点击鼠标时
[2]当网页已加载时
[3]当图像已加载时
[4]当鼠标移动到元素上时
[5]当输入字段被改变时
[6]当提交HTML表单时
[7]当用户触发按键时

13.prototype继承
解析:所有的JavaScript对象都会从一个prototype [原型对象]中继承属性和方法:
[1]Date对象从Date.prototype继承。
[2]Array对象从Array.prototype继承。
[3]Person对象从Person.prototype继承。
说明:
[1]所有JavaScript中的对象都是位于原型链顶端的Object的实例。
[2]JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。
[3]Date对象,Array对象,以及Person对象从Object.prototype继承。

14.Prototype
解析:Prototype是一种库,提供用于执行常见web任务的简单API。Prototype通过提供类和继承,实现了对JavaScript的增强。

参考文献:
[1]webpack-chain:https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans
[2]Vue CLI服务:https://cli.vuejs.org/zh/guide/cli-service.html
[3]HTML DOM事件:https://www.runoob.com/jsref/dom-obj-event.html
[4]JavaScript Browser对象实例:https://www.runoob.com/js/js-ex-browser.html
[5]JavaScript 对象实例:https://www.runoob.com/js/js-ex-dom.html
[6]HTML DOM教程:https://www.runoob.com/htmldom/htmldom-tutorial.html
[7]HTML DOM Document对象:https://www.runoob.com/jsref/dom-obj-document.html
[8]JavaScript和HTML DOM参考手册:https://www.runoob.com/jsref/jsref-tutorial.html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!