Vue3 仿京东电商项目 | 首页开发【项目初始化】

最新推荐文章于 2025-05-06 18:24:42 发布

原创

最新推荐文章于 2025-05-06 18:24:42 发布 · 3.1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #css #javascript #less

完整原文地址见简书

更多完整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

项目初始化

装ESLint插件

协助做代码校验，规范代码：

装Vetur插件

识别、高亮显示Vue语法：

目录 | node_modules、package.json

npm install之后(有时候项目会自动生成，就无需npm install了)，
package.json 是记录第三方库依赖的目录，
node_modules 存放第三方库依赖模块：

其中，package.json 的代码其实有很多学问：
如《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"
  ]
}

这里主要是配置了一些通用的内容，如这里的index.html中的icon，配置了网页的图标：