完整原文地址见简书
更多完整Vue笔记目录敬请见《前端 Web 笔记 汇总目录(Updating)》
本文内容提要
- 项目初始化
- 装ESLint插件
- 装Vetur插件
- 目录 | node_modules、package.json
- 目录 | public目录
- 目录 | .editorconfig文件
- 目录 | package-lock.json
- 目录 | src
- 样式兼容浏览器
- 使用移动端模拟器
- iconfont.cn阿里矢量图标库的使用【采集icon到项目】
- 浏览器最小只能使用12px的文字尺寸,如果要显示10px,需要写20px然后缩小一半
- 优化 | 有从属关系的css 可以简写
- 优化 | css引入的简写
- 1.end 至此底部栏UI基本完成
- 2.1 bug | error Trailing spaces not allowed no-trailing-spaces
- 2.2 注意 | CSS Class的优先级
- 2.3 新建scss文件,定义通用的样式变量【类似 android的res/style/ 下文件】
- 2.4 新建scss文件,封装mixin,效果同上
- 位置栏至此初步完成
- 3. 搜索和 banner区域
- 3.1 新增iconfont项目图标【search】,更新项目 链接资源代码
- 3.2 防止弱网时,图标加载太慢 导致周围组件 发生抖动
- 4.图标 Grid网格布局
- 5.附近栏
- 5.1 流式布局的魅力
- 5.2 注意<p>标签的默认margin!!(其他标签 也要注意 默认margin等)
- 5.3 【overflow-y: auto】处理溢出,使得底部导航栏不会跟着动
- 6.拆分组件代码
- 然后是Nearby部分的拆分
- home.vue中注册为子组件:
- 最后拆分底部导航栏部分
- 7.使用v-for、v-html优化代码
- ** 7.1 iconfont转义问题**
- 7.2 巧用表达式控制css处理!!!
- ** 7.3 字符串模板 匹配实战**
- 7.4 首页UI基本实现(画完了)
- 8.1 scoped 限制 样式的作用范围
- 8.2 安装、使用Vue.js devtools
项目初始化
![](https://img-blog.csdnimg.cn/img_convert/7ca3434eaf3a0185642949450f21457f.png)
![](https://img-blog.csdnimg.cn/img_convert/455853d5a2f4dcee94ac292b3dd30bc1.png)
![](https://img-blog.csdnimg.cn/img_convert/e5dddf7e536e2ed1e4c98866c0f831b7.png)
装ESLint插件
协助做代码校验,规范代码:
![](https://img-blog.csdnimg.cn/img_convert/5c88a4d8a504825c1cc6a0c1bff24286.png)
装Vetur插件
识别、高亮显示Vue语法:
![](https://img-blog.csdnimg.cn/img_convert/42946e30ea572aa8685a2eb25d486e52.png)
目录 | node_modules、package.json
npm install之后(有时候项目会自动生成,就无需npm install了),
package.json 是 记录第三方库依赖 的目录,
node_modules 存放 第三方库依赖模块:
![](https://img-blog.csdnimg.cn/img_convert/327c54c8b67a4ecec2238ecc1716518b.png)
如《package.json配置详解》中,
browserslist 指定项目兼容浏览器或设备的版本,
"> 1%"指全球范围内用户使用量> 1%的浏览器;
"last 2 versions"指上述的浏览器中,只支持最新的两个浏览器版本;
"not dead"指正在维护的浏览器;
{
"name": "h5-components",
"version": "1.2.0",
"description": "",
"main": "./lib/index",
"module": "./es/index",
"files": [
"lib",
"es",
"dist",
"assets"
],
"repository": "http://.../h5-components.git",
"homepage": "http://...",
"author": "",
"license": "MIT",
"scripts": {
"dll": "webpack --config webpack.dll.config.js",
"rccompile": "rc-tools run compile --babel-runtime --copy-files",
"dev": "webpack-dev-server --env.api dev",
"rcdist": "rc-tools run dist",
"ucs": "yarn upgrade h5-css",
"rclint": "rc-tools run lint",
"build": "yarn rccompile && git add . && git commit -m '[compile]' && git pull && git push"
},
"config": {
"port": 8089,
"entry": {
"h5-components": [
"./index.js"
]
}
},
"dependencies": {
"antd-mobile": "^2.2.0",
"classnames": "^2.2.1",
"exif-js": "^2.3.0"
},
"devDependencies": {
"file-loader": "^1.1.5",
"less-loader": "^4.1.0",
"lodash": "^4.17.4",
"lodash-webpack-plugin": "^0.11.4",
"mini-css-extract-plugin": "^0.4.1"
},
"sideEffects": [
"*.scss"
],
"browserslist": [
"iOS >= 8",
"Firefox >= 20",
"Android > 4.2",
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
目录 | public目录
这里主要是配置了一些通用的内容,如这里的index.html中的icon,配置了网页的图标:
![](https://img-blog.csdnimg.cn/img_convert/840df435ecd0fbf7ff6ae13cf898a5e0.png)
![](https://img-blog.csdnimg.cn/img_convert/3b636ce8ebe21c181a6762320c39a4d7.png)
![](https://img-blog.csdnimg.cn/img_convert/efac9564eea3f0aa9364a358da0f136b.png)
目录 | .editorconfig文件
配置编辑器的特性;
![](https://img-blog.csdnimg.cn/img_convert/9ef596fddcc670cda977b7284dec2d27.png)
![](https://img-blog.csdnimg.cn/img_convert/70d1ceed2e74c00944ba96dcb4af3a3a.png)
目录 | package-lock.json
保证多人协作的时候,依赖能有一个固定的版本;
目录 | src
这里各个文件目录的作用和使用前面基本都用到过了;
assets目录下放一些静态的文件;
![](https://img-blog.csdnimg.cn/img_convert/b30d3823ff3340731f84b9bac9b66f97.png)
样式兼容浏览器
有些HTML标签,同一个标签,在不同的浏览器上,展示效果不一致;
为了 写出来的样式 可以在所有的浏览器上 保持一致,
需要借助一下normallize.css
;
这里需要在项目上install一下:
![](https://img-blog.csdnimg.cn/img_convert/a58c277233629aa32a31bcb816e31236.png)
![](https://img-blog.csdnimg.cn/img_convert/4afb3a0b18ed53667e263b86cbab6a67.png)
编写通用的样式,
这里指定html标签的样式——
1rem = font-size = 100px;
![](https://img-blog.csdnimg.cn/img_convert/8364bee3aba7697f3b6eb911153e0a0a.png)
清理router中多余的代码,
这边暂时简单测试即可:
![](https://img-blog.csdnimg.cn/img_convert/083a9eee8f18806b0e820e1bb5ba1b2f.png)
在main.js中引入:
![](https://img-blog.csdnimg.cn/img_convert/eec4c9fd634f7a3252235fd3b5a8607b.png)
![](https://img-blog.csdnimg.cn/img_convert/8340ca50545e95e722ab1a3abdcf760a.png)
因为这里App.vue的布局自然是在html标签下的,
于是默认使用我们方才定义的样式尺寸:
![](https://img-blog.csdnimg.cn/img_convert/82cd85c055548e7ff416cb93144aca13.png)
![](https://img-blog.csdnimg.cn/img_convert/02535893833cd6f8497b67d5d3f5a144.png)
使用移动端模拟器
首先可以调整一下测试栏的位置:
![](https://img-blog.csdnimg.cn/img_convert/e5f0fdcba7610c114698c61872ca6150.png)
![](https://img-blog.csdnimg.cn/img_convert/3567b6976ea5336470056e37a6c1182d.png)
iconfont.cn阿里矢量图标库的使用【采集icon到项目】
登录后,搜索图标然后加入购物车:
![](https://img-blog.csdnimg.cn/img_convert/d8f02f1e59bd2b978b530a2a4a410acb.png)
![](https://img-blog.csdnimg.cn/img_convert/6611bb0a5409c10092da2c959e1c01b6.png)
![](https://img-blog.csdnimg.cn/img_convert/0b8146d738f939a8346f18a1778c986c.png)
![](https://img-blog.csdnimg.cn/img_convert/f3af397428065b6df83090ec258bfd62.png)
![](https://img-blog.csdnimg.cn/img_convert/2de597a36cc20294520874b633299a76.png)
![](https://img-blog.csdnimg.cn/img_convert/0d4bf3005677375d8cd09d2ab1f15251.png)
可以将当前目录下的图标的各种格式打包成zip下载下来:
![](https://img-blog.csdnimg.cn/img_convert/c76b3925a8a73fd1f16a1e10dc465e6f.png)
![](https://img-blog.csdnimg.cn/img_convert/e3baf9dabf2dd4d748a06c4372e4e705.png)
在style目录下新建一个css文件,如iconfont.css,把复制的代码贴到这里,
不过这里引用的代码还是本地的,
我们可以替换成在线的:
![](https://img-blog.csdnimg.cn/img_convert/d75a8c6c6b98fc4df029b7f8b92509d0.png)
点击查看在线连接,
点击【暂无代码,点此生成】,
可以生成在线连接代码:
![](https://img-blog.csdnimg.cn/img_convert/4547ec90a53494dc8379ccfb0cbce70f.png)
![](https://img-blog.csdnimg.cn/img_convert/067405ccc3c29d8d3988105ac156482a.png)
![](https://img-blog.csdnimg.cn/img_convert/e56044ddfc329cb251fbb0527d34183b.png)
![](https://img-blog.csdnimg.cn/img_convert/832c13c98f2deafe6b6ea311f3a930e5.png)
接着在iconfont网页上,移动到图标上,点击复制对应图标的代码,如

:
![](https://img-blog.csdnimg.cn/img_convert/a18048b5c3c874a86fdf0f4195c84c7d.png)
注意写上
class="iconfont"
:
![](https://img-blog.csdnimg.cn/img_convert/f9783ec7d7bd8f7735aa78da21e259aa.png)
![](https://img-blog.csdnimg.cn/img_convert/e2d3512d04c3e4cdb1bb5b6911f49a0e.png)
浏览器最小只能使用12px的文字尺寸,如果要显示10px,需要写20px然后缩小一半
.docker_title {
font-size: 20px;
transform: scaleX(.5) scaleY(.5);//缩小一半
transform-origin: center top;//缩小中心点
}
优化 | 有从属关系的css 可以简写
注意这里的flex流式布局
<template>
<div class="docker">
<span class="docker__item docker__item--active">
<div class="iconfont"></div>
<div class="docker_title">首页</div>
</span>
<span class="docker__item docker__item--active">
<div class="iconfont"></div>
<div class="docker_title">购物车</div>
</span>
<span class="docker__item docker__item--active">
<div class="iconfont"></div>
<div class="docker_title">订单</div>
</span>
<span class="docker__item docker__item--active">
<div class="iconfont"></div>
<div class="docker_title">我的</div>
</span>
</div>
</template>
<style lang="scss">
.docker {
display: flex;
box-sizing: border-box;
position: absolute;
padding: 0 0.18rem; //间隔
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid #f10000;
&__item {
//等价于 .docker__item
flex: 1;
text-align: center;
.iconfont {
margin: 0.07rem 0 0.02rem 0; //图标间隔
font-size: 0.18rem; //调整图标大小
}
&--active {
//等价于 .docker__item--active
color: skyblue;
}
}
&_title {
//等价于 .docker_title
font-size: 20px;
transform: scaleX(0.5) scaleY(0.5); //缩小一半
transform-origin: center top; //缩小中心点
}
}
// .docker__item {
// flex: 1;
// text-align: center;
// .iconfont {
// margin: 0.07rem 0 0.02rem 0; //图标间隔
// font-size: 0.18rem; //调整图标大小
// }
// }
// .docker__item--active {
// color: skyblue;
// }
// .docker_title {
// font-size: 20px;
// transform: scaleX(0.5) scaleY(0.5); //缩小一半
// transform-origin: center top; //缩小中心点
// }
</style>
优化 | css引入的简写
当前的css文件引入我们是这样写的:
![](https://img-blog.csdnimg.cn/img_convert/9f3efa62b890cef29b6278ccd52c0d88.png)
index.scss
,然后把需要引用的css文件都写在这里面:
![](https://img-blog.csdnimg.cn/img_convert/eec9508769b8da219c8b98ffa7e9eefb.png)
使用的时候就只要引入
index.scss
这个“引用汇总文件”就可以了:
![](https://img-blog.csdnimg.cn/img_convert/089c191546d81fbd45187516ff567f62.png)
1.end 至此底部栏UI基本完成
commit a0c19703acc3c0da070c9b2b291bdce11ff33646 (HEAD -> master)
Author: aaLiweipeng <31944741+aaLiweipeng@users.noreply.github.com>
Date: Sat May 8 22:18:29 2021 +0800
Preliminary completion of the bottom bar
github-commit: https://github.com/aaLiweipeng/ec-pro-202105/commit/30a33b963c323a12b3c1f5a15b238d3aac289a4e
2.1 bug | error Trailing spaces not allowed no-trailing-spaces
解决方案:删除尾部多余的空格
![](https://img-blog.csdnimg.cn/img_convert/0abe114e05b62f7e6a76c7e7031c8f96.png)
2.2 注意 | CSS Class的优先级
有时候同一个标签,
我们可能会给它定义了多个CSS Class:
![](https://img-blog.csdnimg.cn/img_convert/d631854f0dd7dc1efee603a2af3f6ca7.png)
我们可以用这种 嵌套 且 不使用
&...
简写 的方式,提高CSS Class的优先级:
![](https://img-blog.csdnimg.cn/img_convert/b7da33beddb024905f900ebc5e0898b5.png)
position__icon
的优先级会比iconfont
高;
2.3 新建scss文件,定义通用的样式变量【类似 android的res/style/
下文件】
![](https://img-blog.csdnimg.cn/img_convert/7b67257b1caf69ed63283bc35b598f23.png)
![](https://img-blog.csdnimg.cn/img_convert/2ffd4e72c39e8c3f4bf0f7a7af4f4503.png)
2.4 新建scss文件,封装mixin,效果同上
![](https://img-blog.csdnimg.cn/img_convert/fd2c2f8d418695a13927c2585e42c75f.png)
![](https://img-blog.csdnimg.cn/img_convert/fbecbc9f6d2246748e45e6912b9725a9.png)
位置栏至此初步完成
commit d81edf449371f5d14972e5a6f0b328f2693cde8e (HEAD -> main, origin/main, origin/HEAD)
Author: aaLiweipeng <31944741+aaLiweipeng@users.noreply.github.com>
Date: Mon May 10 00:23:59 2021 +0800
Add the top position bar
github:https://github.com/aaLiweipeng/ec-pro-202105/commit/d81edf449371f5d14972e5a6f0b328f2693cde8e
3. 搜索和 banner区域
3.1 新增iconfont项目图标【search】,更新项目 链接资源代码
![](https://img-blog.csdnimg.cn/img_convert/0bab93a7154c4f6dbf98cd92cb596e3d.png)
![](https://img-blog.csdnimg.cn/img_convert/03581f2c840c3bc07798301a15eedbc3.png)
![](https://img-blog.csdnimg.cn/img_convert/4e9c2ae1e37e395cfa4a914abab1ba05.png)
3.2 防止弱网时,图标加载太慢 导致周围组件 发生抖动【padding、overflow 结合 图片宽高比的 占位技巧】
.banner{
//以下三行,用于防止弱网时,图标加载太慢
//导致周围组件 发生抖动
height: 0;
overflow: hidden;
padding-bottom: 46.7%;//图片的宽高比,图片未下载好时提前占位 373/798≈0.4674
&__img {
width: 100%;//撑满父布局
}
}
搜索框和banner初步完成,
GitHub:
4.图标 Grid网格布局
GitHub:**
5.附近栏
GitHub:**
5.1 流式布局的魅力
//附近栏
.nearby {
&__title {
margin: .16rem 0 0.04rem 0;
font-size: .18rem;
font-weight: normal;
color: $content-fontcolor;
}
&__item {
// display: flex;
&__img {
width: .56rem;
height: .56rem;
}
}
}
![](https://img-blog.csdnimg.cn/img_convert/6e1571e518db812f8d3453c202e9d988.png)
//附近栏
.nearby {
&__title {
margin: .16rem 0 0.04rem 0;
font-size: .18rem;
font-weight: normal;
color: $content-fontcolor;
}
&__item {
display: flex;
&__img {
width: .56rem;
height: .56rem;
}
}
}
![](https://img-blog.csdnimg.cn/img_convert/04a2331f161a25c218002f11ba53f3e9.png)
5.2 注意<p>标签的默认margin!!(其他标签 也要注意 默认margin等)
&__highlight {
// margin: 0.08rem 0 0 0;
margin-top: 0.08rem;
line-height: .18rem;
font-size: .13rem;
color: #e93b3b;
}
![](https://img-blog.csdnimg.cn/img_convert/7e6a0a83e403e7042272b94d8bf78571.png)
使用详细的margin样式,处理掉默认的margin:
&__highlight {
margin: 0.08rem 0 0 0;
line-height: .18rem;
font-size: .13rem;
color: #e93b3b;
}
效果:
![](https://img-blog.csdnimg.cn/img_convert/7a29ea2c99f3c2233315f2ae5a29f4c9.png)
5.3 【overflow-y: auto】处理溢出,使得底部导航栏不会跟着动
.wrapper {
overflow-y: auto;//处理溢出,使得底部导航栏不会跟着动
//内容的 根布局
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem; //整体内容留白 间隔 上下无 左右0.18
}
![](https://img-blog.csdnimg.cn/img_convert/20517c831031935b62cf90bd1ef8d970.png)
![](https://img-blog.csdnimg.cn/img_convert/824b834055ec322f5a13e713584b346c.png)
![](https://img-blog.csdnimg.cn/img_convert/db4f41a81933dceb975e36fb34b3ae40.png)
6.拆分组件代码
GitHub:--- views目录下创建一个home目录,
home下新建一个Home.vue;
把App.vue的内容剪切过来;
这个时候App.vue没内容,
然后Home里面的引用路径得改一下:
![](https://img-blog.csdnimg.cn/img_convert/3ce6f40a0a652f37691a51c5c0d71d41.png)
然后这时候,
App.vue改成一下内容,
就可以如旧正常显示了:
<template>
<Home />
</template>
<script>
import Home from './views/home/Home'
export default {
name: 'App',
components: { Home }
}
</script>
当然这时候只是把主页Home.vue从App.vue中拆除出去而已,
接下来还需要继续拆分;
首先把position部分
到gap部分
拆分出来,
为顶部业务部分【TopPart】:
![](https://img-blog.csdnimg.cn/img_convert/687c6ed6b8019d51d349a1a94aa2855a.png)
view/home/TopPart.vue:
<template>
<div class="position">
<span class="iconfont position__icon"></span>
XXXX大学XXXX区66号楼66层
<span class="iconfont position_notice"></span>
</div>
<div class="search">
<span class="iconfont"></span>
<span class="search__text">菠萝菠萝包</span>
</div>
<div class="banner">
<img
class="banner__img"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yipic.cn%2Fthumb%2Ff0f77685%2Fbdaa5f3f%2Ffa49ab25%2Fc7151244%2Fbig_f0f77685bdaa5f3ffa49ab25c7151244.png&refer=http%3A%2F%2Fimg.yipic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623252871&t=7a27caac9990c344d03ff0dfff8f6c1d"
/>
</div>
<!-- icon网格布局 -->
<div class="icons">
<div class="icons__item">
<img
class="icons__item__img"
src="http://www.dell-lee.com/imgs/vue3/菜市场.png"
/>
<p class="icons__item__desc">菜市场</p>
</div>
...
</div>
<!-- 网格布局下 灰色间隔线区 -->
<div class="gap"></div>
</template>
<style lang="scss">
...
.position {
...
.position__icon {
...
}
.position_notice {
...
}
color: $content-fontcolor;
}
.search {
...
.iconfont {
...
}
&__text {
...
}
} //search
//icon网格布局
.icons {
...
&__item {
...
&__img {
...
}
&__desc {
...
}
}
}
.banner {
...
&__img {
...
}
}
//网格布局下 灰色间隔线区
.gap {
...
}
</style>
然后作为子组件引入到Home.vue
:
<script>
import TopPart from './TopPart'
export default {
name: 'Home',
components: { TopPart }
}
</script>
使用:
![](https://img-blog.csdnimg.cn/img_convert/bf8308a61e5a510bf3c7ecff51036bf8.png)
然后是Nearby部分的拆分
新建文件,
views/home/Nearby.vue,
把home中的【附近栏】相关的代码移过来:
![](https://img-blog.csdnimg.cn/img_convert/3806bf7074acefeec7ca082688026240.png)
home.vue中注册为子组件:
<script>
import TopPart from './TopPart'
import Nearby from './Nearby'
export default {
name: 'Home',
components: { TopPart, Nearby }
}
</script>
使用:
![](https://img-blog.csdnimg.cn/img_convert/d35ba0d2b261c8af719c27b1b9cb00a3.png)
最后拆分底部导航栏部分
新建 views/home/Docker.vue,
把home中的【底部导航栏】相关的代码移过来:;
home.vue中注册为子组件:
<script>
import TopPart from './TopPart'
import Nearby from './Nearby'
import Docker from './Docker'
export default {
name: 'Home',
components: { TopPart, Nearby, Docker }
}
</script>
使用:
![](https://img-blog.csdnimg.cn/img_convert/334bd9392a92aa1a4f3a23af32951f59.png)
7.使用v-for、v-html优化代码
主要优化Grid菜单部分,附近栏 和 底部导航栏部分等 list特性的模块,
细节可以看 GitHub:
7.1 iconfont转义问题
<!-- 底部导航栏 -->
<div class="docker">
<div
v-for = "item in dockerList"
class="docker__item docker__item--active"
:key="item.icon"
>
<!-- 这里不可以用插值表达式写,
因为 &# 会被自动转义成 文本,
无法实施符号特性;
改完记得刷新下页面!!! -->
<!-- <div class="iconfont">{{item.icon}}</div> -->
<div class="iconfont" v-html="item.icon" />
<div class="docker_title">{{item.text}}</div>
</div>
</div>
7.2 巧用表达式控制css处理!!!
- 处理前:
<!-- 底部导航栏 -->
<div class="docker">
<div
v-for = "item in dockerList"
class="docker__item docker__item--active"
:key="item.icon"
>
.....
![](https://img-blog.csdnimg.cn/img_convert/290762ff826c1a4ae826c4a176fd50d2.png)
- 处理后,
更改class属性,使得颜色的样式需要判断,默认是第一个有蓝色:
<!-- 底部导航栏 -->
<div class="docker">
<div
v-for = "(item, index) in dockerList"
:class="{ 'docker__item': true, 'docker__item--active': index === 0}"
:key="item.icon"
>
![](https://img-blog.csdnimg.cn/img_convert/1f7ad2b9841aad4a2d53cf12532a345d.png)
7.3 字符串模板 匹配实战
![](https://img-blog.csdnimg.cn/img_convert/b546a1592190c9ebc7b9336ab599d836.png)
7.4 首页UI基本实现(画完了)
![](https://img-blog.csdnimg.cn/img_convert/268080e5bb253e48297521e8ca44941f.png)
8.
8.1 scoped 限制 样式的作用范围
一个组件的样式
应该只能作用于自身组件
,
不能影响外部组件
或者其他组件
;
实现方式很简单,
只要style标签
加个scoped
即可,
建议如果没有特殊的需求,
所有单文件组件
的style标签
都可以加上这个特性:
![](https://img-blog.csdnimg.cn/img_convert/c83e5faaad45d59f1df9e8cbeabadebc.png)
8.2 安装、使用Vue.js devtools
需要梯子,需要在Chrome中进行,
打开网上应用商店:
![](https://img-blog.csdnimg.cn/img_convert/077b9c3e86d15b827231b7585b878bf8.png)
搜索 类似
vue dev
字眼:
![](https://img-blog.csdnimg.cn/img_convert/43fb9cb8869e2c0e34f986a19f7423e7.png)
![](https://img-blog.csdnimg.cn/img_convert/e8510b386f033108afaef180caffb9ae.png)
![](https://img-blog.csdnimg.cn/img_convert/14b3d75ed8aa96d68b9981865cf9de12.png)
点击如下图的位置,可以打开工具:
![](https://img-blog.csdnimg.cn/img_convert/62edd894b4eefa3922a70861796b7d0f.png)
页面各个 分模块/子组件 的区域 以及 分模块/子组件 名:
![](https://img-blog.csdnimg.cn/img_convert/a43e7b88e7bc47ba0e581f4f40e72ace.png)
文件名
【毕竟单文件组件
】:
![](https://img-blog.csdnimg.cn/img_convert/25eb942c7e65acb1cdc74e8a1fadf30d.png)
<script>
中,有对name
属性进行定义的话,则根据这个name
属性来处理显示:
![](https://img-blog.csdnimg.cn/img_convert/da0cf673ceb42d2661859c9d16f2e542.png)
双击某个模块,可以看到其对应的数据、路由情况,
方便做参数调测等:
![](https://img-blog.csdnimg.cn/img_convert/2777edd17f5d47a1704464986e247108.png)