vue3.0新特性setup:vue3中的setup使用和原理解析
目录1.前言 2.setup 3.源码分析setupStatefulComponent 执行setup函数 finishComponentSetup4.总结1.前言 最近在做vue3相关的项目,用到
顺晟科技
2021-07-22 09:39:04
81
早起不分前后,早期jsp、php等多种语言发展到现在,已经有很多语言没有使用,没有人学,严格来说没有人教。毕竟,对人力最强的学院都是以能工作为准,现在开发是前后分开的,前端就业是vue (VUE)。
实际上,package.json文件与Vue没有直接关系,属于web包。所谓vue-cli(脚手架)是web包的配置快速生成工具。
概述:
从与前端的接触开始,每个项目的根目录下通常都有package.json文件。此文件定义当前项目所需的各种模块以及项目的配置信息(名称、版本、许可证等)。
运行Npm install命令时,将根据package.json文件的配置自动下载所需的模块,即配置项目所需的执行和开发环境。
例如,以下文件只有简单的项目名称和版本号。
{
Name' : 'yindong ',
版本' :' 1.0.0 ',
}
Package。JSON文件是JSON对象,其后缀。可以在JSON上看到。该对象的每个成员都是当前项目的设置。例如,name是项目名称,version是版本号。
当然,很多人对package.json的配置不感兴趣,更多地应用dependencies或devDependencies配置。
以下是更完整的package.json文件,详细说明了每个字段的实际含义。
{
Name': 'yindong ',
版本' :' 0.0.1 ',
说明' :' antd-theme ',
Keywords' : ['Node.js ',' antd ',' theme'],
Homepage ' : ' https://zhi qianduan.com ',
Bugs ' : { ' URL ' : ' http://path/to/bug ',' email' :' yin dong @ xxxx.com '
License': 'ISC ',
Author': 'yindong ',
contributors ' :[{ ' name ' : ' yin dong ',' email ' : ' yin dong @ xxxx.com ' }]]
文件“:”,
缅因州“:”./dist/default.js ',
空的“:”,
万“:”,
Directories': ',
存储库“: {
Type': 'git ',
Url': 'https://path/to/url '
},
脚本“: {
start ' : ' web pack服务-config web pack . con fig . dev . js-progress '
},
config ' : { ' port ' : ' 8080 ' },
Dependencies': {},
DevDependencies': {
@ babel/core' :' 7.14.3 ',
@ babel/preset-env' :' 7.14.4 ',
@ babel/preset-react ' : ' 7 . 13 . 13 ',
Babel-Babel-loader ' : ' 8 . 2 . 2 ',
Babel-Plugin-Import ' : ' 1 . 13 . 3 ',
Glob ' : ' 7.1.7 ',
Less ' : ' 3.9.0 ',
LESS-LESS-loader ' : ' 9 . 0 . 0 ',
风格-装载机“:”2 . 0 . 0”,
网络包“:”5 . 38 . 1”,
web pack-CLI ' : ' 4 . 7 . 0 ',
web pack-dev-server ' : ' 3 . 11 . 2 '
},
“PeerDependencies”: {
Tea': '2.x '
},
BundledDependencies': [
“Renderized”,“super-streams”
],
Engines ' : { ' node ' : ' 0.10 . x ' },
Os' : ['win32 ',' Darwin ',' Linux'],
Cpu' : ['x64 ',' ia32'],
Private': false,
PublishConfig': {}
}
1.name字段
Package.json文件中最重要的是name和version字段,这两个字段是必需的。名称和版本一起构成标识符,被认为是完全的。对软件包的更改必须与版本更改一起执行。
Name必须少于214个字符。不能以或_开头,不能使用大写。名称最终会成为URL的一部分,因此不能包含非URL的安全字符。
Npm当局建议不要使用与核心节点模块相同的名称。请勿在名称中添加js或node。如有必要,可以使用engines指定运行环境。
此名称作为参数传递给require,因此需要简短但合理的说明。
2.版本字段
Version的一般格式为x.x.x,必须遵守此规则。
Package.json文件中最重要的是name和version字段,这两个字段是必需的。名称和版本一起构成标识符,被认为是完全的。每次发行时,version都不能与现有版本匹配。
3.说明字段
Description是写入描述信息的字符串。帮助人们在NPM库中搜索时找到模块。
4.keywords字段
Keywords是一个字符串数组,它可以帮助人们在搜索NPM库时找到模块。
5.homepage字段
Homepage项目的主页地址。
6.bugs字段
Bugs项目问题的反馈issue地址或邮箱。
“bug”: {
URL ' : ' https://github.com/owner/project/issues ',
电子邮件“:”项目@主机名。com
}
7.许可证字段
License是当前项目的协议,它告诉用户使用模块的权限以及对模块使用的限制。
License' : 'BSD-3-Clause '
8.author字段contributors字段
Author是具体的人,contributors代表一群代表当前项目共享者的人。同时,每个人都是一个对象。“名称”字段和可选的“URL”和“电子邮件”字段。
Author': {
Name' : 'yindong ',
电子邮件' :' yin dong @ xx.com ',
URL ' : ' https://zhi qianduan.com/'
}
也可以写为字符串
Author ' : ' yin dong yin dong @ xx.com(3359 zhi qianduan.com/)'
9.文件字段
Files属性值是包含模块下的文件名或文件夹名的数组。如果是文件夹名称,则文件夹下的所有文件都将包括在内,除非文件被其他配置排除
在模块根目录下。可以创建npmignore文件。写入此文件的文件即使写在files属性中,也排除在外。写得很像gitignore。
10.main字段
Main字段指定导入require时加载的门户文件。此字段的默认值为模块根目录下的index.js。
11.bin字段
Bin条目用于指定与每个内部命令相对应的可执行文件的位置。创建Node工具时,必须使用bin字段。
编写Cli工具时,需要指定工具(如常规web包模块)的运行命令。运行命令是web包。
“空”: {
web包“:”bin/index . js”,
}
Bin/index.js文件中的代码在运行webpack命令时执行。
如果有Bin选项,模块将以从属方式安装。Node_modules/。在bin/中创建相应的文件。
Npm将找到此文件,并将其放置在node_modules/.在bin/目录中创建符号链接。Node_modules/。bin/目录在运行时包含系统的PATH变量,因此在运行NPM时,可以通过命令直接调用脚本,而无需路径。
Node_modules/。bin/目录中的所有命令都可以NPM run[ command]格式执行。在命令行下输入NPM run,然后按tab键,将显示所有可用命令。
12.man字段
Man用于指定当前模块的man文档的位置。
man ' :[]./doc/calc.1']
13.目录字段
Directories开发一种方法,用于向用户说明每个目录在哪里的模块的结构。
14.存储库字段
指定代码存档地址对想为项目贡献代码的人有帮助
存储库“: {
Type' : 'git ',
URL ' : ' https://github.com/NPM/NPM . git '
}
15.脚本字段
Scripts指定执行脚本命令的NPM命令行缩写。例如,start指定运行NPM run start时要运行的命令。
脚本“: {
开始“:”节点。/开始。“js”
}
使用Scripts字段可以快速执行shell命令,并可以解释为alias。
“脚本”可以直接使用安装在node_modules中的模块。也就是说,直接运行需要npx命令。
脚本“: {
内部版本“:”web包
}
//NPM run build
//npx web pack
16.config字段
Config字段用于在命令行中添加环境变量。
{
Name' : 'yindong ',
config ' : { ' port ' : ' 8080 ' },
scripts ' : { ' start ' : ' node server . js ' }
}
然后,您可以在server.js脚本中引用config字段的值。
console . log(process . env . NPM _ package _ config _ port);//8080
用户可以通过NPM config set修改此值。
Npm config set yin dong :端口8000
17.dependencies字段,devDependencies字段
Dependencies字段指定依赖于项目执行的模块,devDependencies指定开发项目所需的模块。
它的值都是一个对象。该对象的每个成员都由模块名称及其版本要求组成,表示从属模块及其版本范围。
如果对安装相关性使用-save参数,则模块将写入dependencies属性;如果使用- save-dev,则模块将写入devDependencies属性。
DevDependencies': {
网络包“:”5 . 38 . 1”,
}
对象中的每个条目都由模块名称前面带有该模块版本号的键值对表示。版本号遵循bright version . subversion . persion格式规则。
发行说明
固定版本:(例如5.38.1)仅安装安装时指定的版本。
波浪符号:(例如~5.38.1)表示安装5.38.x的最新版本(5.38.1或更高版本),但不安装5.39.x。也就是说,安装时不更改大版本号和次版本号。
插入编号:例如5.38.1,表示安装5.x.x的最新版本(5.38.1或更高版本),但不安装6.x.x。也就是说,安装时不更改较大的版本号。如果较大的版本号为0,则插入号当前处于开发阶段,即使次要版本号发生更改,程序也可能发生不兼容,因此行为与波号相同。
Latest:将安装最新版本。
18.peerDependencies字段
开发模块时,如果与当前模块所依赖的模块同时依赖一个第三方模块,并依赖两个不兼容的版本,则可能会出现问题。
例如,项目依赖A模块和B模块的版本1.0,A模块本身依赖B模块的版本2.0。
大多数情况下,这不是问题,两个版本的B模块共存,可以同时运行。但是,这种依赖关系可能会出现向用户公开的问题。
最常见的场景是插件。例如,A模块是B模块的插件。用户安装的B模块版本为1.0,但A插件仅适用于版本2.0 b模块。此时,如果用户将版本1.0 B的实例传递给A,就会出现问题。因此,安装模板时,如果同时安装A和B,则需要一种机制来通知用户B必须是2.0模块。
PeerDependencies字段是插件用于指定所需基本工具的版本。Myless模块可以通过peerDependencies字段限制,该字段要求依赖less模块的3.9.x版。
{
名字' : ' Miles ',
“PeerDependencies”: {
Less': '3.9.x '
}
}
从NPM 3.0版开始,将不再默认安装peerDependencies。初始化时基本上是不拿出来的。
19.bundledDependencies字段
BundledDependencies指定发布时要一起包装的模块。
20.optionalDependencies字段
如果从属模块可用,并且在找不到或不可用时希望NPM继续运行,则可以依赖optionalDependencies配置。此配置的符号与dependencies的符号相同。但是,此处写入的模块安装失败不会导致NPM install失败。
21.engines字段
Engines字段指示运行模块的平台,如Node或NPM版本或浏览器。
{ ' engines ' : { ' node ' : '=0 . 10 . 3 0 . 12 ',' NPM ' 3360 ' ~ 1 . 0 . 20 ' } }
22.操作系统字段
您可以指定可以运行模块的操作系统
Os' : ['Darwin ',' Linux ',' win32']
23.CPU字段
限制模块只能在特定体系结构的CPU上运行
Cpu' : ['x64 ',' ia32']
24.private字段
如果将此属性设置为true,NPM将拒绝发布,以防止意外发布个人模块。
Private': true
25.publishConfig字段
此配置在发布模块时应用,用于设置用于发布的部分值集。如果不想将模块默认为最新状态,或者默认情况下不发布到公共仓库,则可以在此配置标记或仓库地址。
通常,publishConfig与private一起使用,如果只想将模块发布到特定的NPM仓库(如内部仓库),则使用此选项。
Private': true,
PublishConfig': {
标签' :' 1.0.0 ',
注册表“:”https://注册表. npmjs.org/”,
Access': 'public '
}
26.preferGlobal字段
PreferGlobal值是一个布尔值,指示当用户不将模块安装为全局模块(即不使用-global参数)时,是否警告用户模块的原始意图将安装为全局模块。
PreferGlobal': false
27.browser字段
Browser指定要在浏览器中使用的模板。可以通过浏览器包装工具(如Browserify)得知,该文件需要打包。
Browser': {
Tipso' : './node _ modules/tipso/src/tipso . js’
},
30
2022-09
30
2022-09
23
2022-09
23
2022-09
16
2022-09
16
2022-09