pc_shop_admin

Build Setup

# install dependency
npm install

# develop
npm run dev

Build

# build for test environment
npm run build

# build for production environment
npm run build:prod

Advanced

# preview the release environment effect
npm run preview

# preview the release environment effect + static resource analysis
npm run preview -- --report

# code format check
npm run lint

# code format check and auto fix
npm run lint -- --fix

Docker 方案. add by Peter at 20221213.

以上为传统开发方案. 如果你遇到了 本地需要多个 node 环境 / 自己的项目需要新版 nodejs 又不想来回切 / 统一各平台开发差异 / 不想装 nodejs(环境洁癖) / 甚至本机装不上 nodejs 等场景, 可以考虑 Docker 开发方案.

1 安装 Docker 并启动.自行百度/谷歌/bing

2 拉取 nodejs 的镜像

或者这步跳过也行, 反正build镜像的时候, docker会自动拉取需要的基础镜像.

docker pull node:20.14.0-slim

3 cd 到本项目的根目录, 并构建镜像

docker build -t au_admin_front:dev .

4 基于 步骤 3 构建的镜像 启动 容器

docker run -d -p 3333:3333 -v ${PWD}:/app --name au_admin_front au_admin_front:dev

• 后续有项目配置相关更新就重启容器即可
• 日常开发直接启动容器就能跟传统方案一样开发了(相当于跑了 npm run dev)
• src 目录有自动关联, 改动代码会有热更新

注: 如果 win 平台跑不起来, 把${PWD}换成项目(从盘符起)的绝对路径.

注 2: 如果 win 平台无法正确热更新, 且改完代码后手动刷新浏览器也没变化, 可以考虑把Dockerfile文件里面的CHOKIDAR_USEPOLLING环境变量行首注释解开.

注 3: 用 docker 方案就不要用你本机的 node.js/npm 来操作项目里面的命令, 如 npm i, 要用 docker 容器里面的 npm 来操作

使用的技术

• Vue.js 主框架
• vue-router 主路由框架
• vuex 状态管理库
• axios 网络请求库
• dayjs 时间工具库
• element-ui 主UI库
• tailwindcss 样式工具库
• js-cookie cookie处理工具库
• loadsh 常用工具函数库
• mathjs 数字运算处理库
• vue-i18n i18n国际化语言支持
• vuedraggable 拖拽功能集成封装库
• html2canvas jspdf 前端处理生成pdf相关功能库
• vite及相关工具链 前端构建打包工具
• eslint及prettier 前端代码质量工具
• rollup-plugin-visualizer 前端代码打包提及分析优化库