京东到家webapp

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

vscode插件

eslint
vetur vue单文件 template下必须是单标签，vue3中不需要

chrome插件

vue.js devtools

基础样式集成及开发模拟器的使用

npm install normalize.css --save 固定版本 npm install [email protected] --save style中统一管理样式文件，并在main.js引入主文件

index.scss
base.scss
iconfont.css 使用在线unicode形式
viriables.scss 样式变量颜色
mixins.scss 样式片段省略号设置chrome控制台，在模拟器 iphone6下开发

BEM(block element Modifier) css命名规则 block_element--Modifier(表状态) block 块如何看待 CSS 中 BEM 的命名方式？ https://www.zhihu.com/question/21935157

组件style+scoped 避免样式冲突

登录校验

router.beforeEach 做登录校验登录操作后，将记录登录标识isLogin在localStorage 如果没有登录,访问其他页面跳转login页，访问login/register页直接next() 如果已经登录，其他页面直接next()，访问login/register页跳转home页(也可配置在路由配置选项beforeEnter中)

小技巧

如何设置字体10px(chrome浏览器默认字体最小是12px)

.title {
    font-size: 20px;
    transform: scale(.5, .5);
    transform-origin: center top;
}

position:relative;经常用于微调位置

根据图片比例设置占位，防止图片加载完成前的塌陷问题

.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  &__img {
    width: 100%;
  }
}

依赖

npm install axios normalize.css --save

封装axios

封装出post方法，基础路径 'Content-Type': 'application/json'，减少一层嵌套 res.data

mock

fastmock

通用组件及复用组件

通用组件：Toast 复用组件：ShopInfo

通过代码拆分增加逻辑可维护性

input不显示旧密码 autocomplete

<input
    type="password"
    class="wrapper__input__content"
    placeholder="请输入密码"
    autocomplete="new-password"
    v-model="password"
/>

路由懒加载提高首屏加载速度

rem

图片没有时，会显示缩略图的问题 1.设置默认图片 2.通过v-show v-if控制显隐，当url不加载时不显示图片

wangtongmeng / vue3-jd-home Goto Github PK

vue3-jd-home's Introduction