VUE 项目编译后逆向工程项目01

原创

已于 2022-05-18 09:26:14 修改 · 5.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #sass #前端

于 2022-05-16 14:13:25 首次发布

vue 文件被编译后对应的 css 文件关系

1.浏览器开发者工具查看【源代码】
项目中 src/assets文件夹里的 SASS 文件夹下的编译后统一合并成类似 app.xxxxxxxx.css 文件
2.如果每个 VUE 文件本身使用的 <style scoped> 后，编译后会独立生成类似 chunk-xxxxxxxx.xxxxxxxx.css 文件，例如：

浏览器源文件名：chunk-f0d84694.cfad3104.css，如下图

css 文件内容，参考如下：

[data-v-0d07d11e] .p-multiselect {
    min-width: 15rem
}

[data-v-0d07d11e] .multiselect-custom-virtual-scroll .p-multiselect {
    min-width: 20rem
}

[data-v-0d07d11e] .multiselect-custom .p-multiselect-label {
    padding-top: .25rem;
    padding-bottom: .25rem
}

[data-v-0d07d11e] .multiselect-custom .country-item.country-item-value {
    padding: .25rem .5rem;
    border-radius: 3px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: .5rem;
    background-color: var(--primary-color);
    color: var(--primary-color-text)
}

[data-v-0d07d11e] .multiselect-custom .country-item.country-item-value img.flag {
    width: 17px
}

.country-item[data-v-0d07d11e] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.country-item img.flag[data-v-0d07d11e] {
    width: 18px;
    margin-right: .5rem
}

[data-v-0d07d11e] .multiselect-custom .country-placeholder {
    padding: .25rem
}

[data-v-0d07d11e] .p-chips .p-chips-token {
    background-color: var(--primary-color);
    color: var(--primary-color-text)
}

[data-v-0d07d11e] .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
    margin: .1rem .5rem .1rem 0
}

这里去除后 [data-v-0d07dlle] 后和原始的 inputDemo.vue 文件中的内容是一样的，参考下图：

代码内容，参考如下：

<template>
	<div class="grid p-fluid">
		<div class="col-12 md:col-6">
			<div class="card">
				<h5>InputText</h5>
				<div class="grid formgrid">
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<InputText type="text" placeholder="Default"></InputText>
					</div>
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
					</div>
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<InputText type="text" placeholder="Invalid" class="p-invalid" />
					</div>
				</div>

				<h5>Icons</h5>
				<div class="grid formgrid">
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<span class="p-input-icon-left">
							<i class="pi pi-user" />
							<InputText type="text" placeholder="Username" />
						</span>
					<