电商项目

h5 移动端项目
框架Vue3+Vite2
VueRouter4+Vuex4
Vant3
PC后台
Flutter版本

项目构建

npm init vite@latest

安装依赖

npm i -S vant@next
npm i vue-router@4
npm i vuex@next
npm i -D sass

版本控制

git init
git add README.md
git commit -m “first commit”
git branch -M main
git remote add origin https://github.com/Stary21/lagou-shop-mobile.git git push -u origin main

代码风格校验

npx eslint —init
scripts 配置
“lint”:”eslint ./src/*/.{js, vue} —fix”
extends: [
‘plugin:vue/vue3-strongly-recommended’,
‘standard’
]

项目目录

添加相应的目录结构
引入相应工具
配置页面与路由规则

移动端适配

rem布局
使用插件
npm i -S amfe-flexible rem 基准值设置
入口文件引入
npm i -D postcss-pxtorem px转换rem 插件
需要配置vite.config.js 文件
添加css配置

import postCssPxToRem from 'postcss-pxtorem'
css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 37.5, //1rem的大小
          propList: ['*']  //需要转换的属性
        })
      ]
    }
  }

添加配置文件
postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

引入Vant 入口文件中引入 vant
并引入vant/lib/index.css文件
app.use(Vant)

项目中小技巧

请求数据是否存在

当数据不存在时页面中的属性读取不到会出现报错
这是应在数据键后添加？
例如 key？.value