Skip to main content

· One min read
Oxygen

image-20220122161800174

vue-cli-service作为第一个必然会被调用的plugin,其功能主要是生成项目模板文件,以及通过servebuild等命令进行开发环境server的启动和生产环境的构建打包等。下面分析其内部逻辑。

· One min read
Oxygen

image-20220122161800174

上文说到通过@vue/cli-service会加载执行文件,并通过插件机制注册命令行参数和执行文件的对应关系,这样在输入特定 CLI 命令参数的时候就能找到对应的执行程序,例如vue-cli-service serve会去执行servs.js程序。

这篇文章就来分析servs.js在开发环境下是如何构建运行vue项目的。

· One min read
Oxygen

devServer

webpack-devServer,一般简称WDS,是 webpack 内置的用于开发环境的服务器配置。webpack本身提供三种方式用于开发环境修改代码以后自动编译,以提高开发效率:

总体来说,WDS 配置最容易,并且提供 HMR 的功能,只需要配置devServer.hot: true就直接启用,方便到了极致!下面就重点看一下 WDS 的proxy配置。

· One min read
Oxygen

head标签是在 HTML 的根元素html里的第一个标签,它的内容如下:

  • 允许包含一个title标签,表示文档的标题,显示在浏览器的标签栏上;如果时iframe则可以允许不包含title标签
<head>
<title>My test page</title>
</head>
  • 最多只能包含一个base标签,给页面上所有的 URL 相对地址提供一个基础路径,因此它会影响全局的链接地址。base是一个非常危险的标签,容易造成跟 JavaScript 的配合问题
  • meta标签
<base target="_top" href="http://www.example.com/">
  • link标签,规定了当前文档与外部资源的关系,例如标识faviconcss等静态资源
<link rel="icon" href="favicon.ico">

<link rel="stylesheet" href="my-css-file.css">
  • style,即直接指定的CSS样式表
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
  • script标签,但是一般不会至于head中,如果要放在head中一般需要使用async来异步加载资源

· One min read
Oxygen

monorepo

什么是 monorepo

monorepo这个词是menorepo两个缩写词的组合,meno是更少的意思,reporepository的缩写,也就是仓库,合起来就是使用更少的仓库来进行版本管理控制,将所有项目都放在一个代码仓库进行管理。

截止到目前,主流的前端开源项目基本全部使用monorepo,例如reactvuebabel等。