完整原文地址见简书

更多完整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-spaces2.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 注意

标签的默认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项目初始化装ESLint插件协助做代码校验，规范代码：

装Vetur插件识别、高亮显示Vue语法：

目录 | node_modules、package.jsonnpm install之后（有时候项目会自动生成，就无需npm install了），

package.json 是 记录第三方库依赖 的目录，

node_modules 存放 第三方库依赖模块：

其中，package.json 的代码其实有很多学问：

如《package.json配置详解》中，

browserslist 指定项目兼容浏览器或设备的版本，

"> 1%"指全球范围内用户使用量> 1%的浏览器；

"last 2 versions"指上述的浏览器中，只支持最新的两个浏览器版本；

"not dead"指正在维护的浏览器；

代码语言：javascript复制{

"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，配置了网页的图标：

目录 | .editorconfig文件配置编辑器的特性；

EditorConfig使用介绍

目录 | package-lock.json保证多人协作的时候，依赖能有一个固定的版本；

目录 | src这里各个文件目录的作用和使用前面基本都用到过了；

assets目录下放一些静态的文件；

样式兼容浏览器 有些HTML标签，同一个标签，在不同的浏览器上，展示效果不一致；

为了 写出来的样式 可以在所有的浏览器上 保持一致，

需要借助一下normallize.css；

这里需要在项目上install一下：

添加@[版本]，可以指定安装的版本：

在src下新建一个style目录，下新建一个base.scss文件，

编写通用的样式，

这里指定html标签的样式——1rem = font-size = 100px;

清理router中多余的代码，

这边暂时简单测试即可：

在main.js中引入：

运行项目：

可以看到字体很大，

因为这里App.vue的布局自然是在html标签下的，

于是默认使用我们方才定义的样式尺寸：

使用移动端模拟器首先可以调整一下测试栏的位置：

然后打开移动端模拟器：

iconfont.cn阿里矢量图标库的使用【采集icon到项目】登录后，搜索图标然后加入购物车：

把购物车里的图标加入项目：

加入已有项目：

或者新建一个项目：

点击到【我的项目】：

可以查看已有的项目内容：

点击下载到本地，

可以将当前目录下的图标的各种格式打包成zip下载下来：

把其中的iconfont.css的这一部分代码复制一下：

在style目录下新建一个css文件，如iconfont.css，把复制的代码贴到这里，

不过这里引用的代码还是本地的，

我们可以替换成在线的：

点击查看在线连接，

点击【暂无代码，点此生成】，

可以生成在线连接代码：

复制上面的在线url引用代码，贴到项目里：

main.js引入这个css文件：

到这里环境就配置完成了；

接着在iconfont网页上，移动到图标上，点击复制对应图标的代码，如：

最后在DOM节点中使用就可以了，

注意写上class="iconfont"：

效果：

浏览器最小只能使用12px的文字尺寸，如果要显示10px，需要写20px然后缩小一半代码语言：javascript复制.docker_title {

font-size: 20px;

transform: scaleX(.5) scaleY(.5);//缩小一半

transform-origin: center top;//缩小中心点

}优化 | 有从属关系的css 可以简写注意这里的flex流式布局

代码语言：javascript复制

优化 | css引入的简写当前的css文件引入我们是这样写的：

其实我们可以在style目录下新建一个文件，如index.scss，

然后把需要引用的css文件都写在这里面：

这样，

使用的时候就只要引入index.scss这个“引用汇总文件”就可以了：

1.end 至此底部栏UI基本完成代码语言：javascript复制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解决方案：删除尾部多余的空格

2.2 注意 | CSS Class的优先级有时候同一个标签，

我们可能会给它定义了多个CSS Class：

这个时候，

我们可以用这种 嵌套 且 不使用&...简写 的方式，

提高CSS Class的优先级：

如此，position__icon的优先级会比iconfont高；

2.3 新建scss文件，定义通用的样式变量【类似 android的res/style/ 下文件】使用示例：

2.4 新建scss文件，封装mixin，效果同上使用示例：

位置栏至此初步完成代码语言：javascript复制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/d81edf449371f5d14972e5a6f0b328f2693cde8

3. 搜索和 banner区域3.1 新增iconfont项目图标【search】，更新项目 链接资源代码 运行效果：

3.2 防止弱网时，图标加载太慢 导致周围组件 发生抖动【padding、overflow 结合 图片宽高比的 占位技巧】代码语言：javascript复制.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 流式布局的魅力代码语言：javascript复制//附近栏

.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;

}

}

}代码语言：javascript复制//附近栏

.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;

}

}

}5.2 注意

标签的默认margin！！（其他标签 也要注意 默认margin等）代码语言：javascript复制 &__highlight {

// margin: 0.08rem 0 0 0;

margin-top: 0.08rem;

line-height: .18rem;

font-size: .13rem;

color: #e93b3b;

}优化方案：

使用详细的margin样式，处理掉默认的margin：

代码语言：javascript复制 &__highlight {

margin: 0.08rem 0 0 0;

line-height: .18rem;

font-size: .13rem;

color: #e93b3b;

}效果：

5.3 【overflow-y: auto】处理溢出，使得底部导航栏不会跟着动代码语言：javascript复制.wrapper {

overflow-y: auto;//处理溢出，使得底部导航栏不会跟着动

//内容的 根布局

position: absolute;

left: 0;

top: 0;

bottom: 0.5rem;

right: 0;

padding: 0 0.18rem; //整体内容留白 间隔 上下无 左右0.18

}6.拆分组件代码GitHub：

--- views目录下创建一个home目录，

home下新建一个Home.vue；

把App.vue的内容剪切过来；

这个时候App.vue没内容，

然后Home里面的引用路径得改一下：

然后这时候，

App.vue改成一下内容，

就可以如旧正常显示了：

代码语言：javascript复制

当然这时候只是把主页Home.vue从App.vue中拆除出去而已，

接下来还需要继续拆分；

首先把position部分到gap部分拆分出来，

为顶部业务部分【TopPart】：

view/home/TopPart.vue：

代码语言：javascript复制

然后作为子组件引入到Home.vue：

代码语言：javascript复制使用：

然后是Nearby部分的拆分新建文件，

views/home/Nearby.vue，

把home中的【附近栏】相关的代码移过来：

home.vue中注册为子组件：

代码语言：javascript复制使用：

最后拆分底部导航栏部分新建 views/home/Docker.vue，

把home中的【底部导航栏】相关的代码移过来：；

home.vue中注册为子组件：

代码语言：javascript复制使用：

7.使用v-for、v-html优化代码主要优化Grid菜单部分，附近栏 和 底部导航栏部分等 list特性的模块，

细节可以看 GitHub：

7.1 iconfont转义问题代码语言：javascript复制

7.2 巧用表达式控制css处理！！！处理前：代码语言：javascript复制