vue3-imooc-front

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Vscode插件

Prettier - Code formatter

Eslint

Tailwind CSS IntelliSense

Volar

项目架构

├── src │ ├── App.vue // 项目根组件，一级路由出口 │ ├── api // 接口请求 │ ├── assets // 静态资源 │ │ ├── icons // svg icon 图标 │ │ ├── images // image 图标。比如:xxx.png │ │ └── logo.png // logo │ ├── components // 通用的业务组件。比如：一个组件在多个页面中使用到 │ ├── constants // 常量 │ ├── directives // 自定义指令 │ ├── libs // 通用组件，可用于构建中台物料库或通用组件库 │ ├── main.js // 入口文件 │ ├── permission.js // 页面权限控制中心 │ ├── router // 路由 │ │ ├── index.js // 路由处理中心 │ │ └── modules // 路由模块 │ │ ├── mobile-routes.js // 移动端路由 │ │ └── pc-routes.js // PC 端路由 │ ├── store // 全局状态 │ │ ├── getters.js // 全局状态访问处理 │ │ ├── index.js // 全局状态中心 │ │ └── modules // 状态子模块 │ ├── styles // 全局样式 │ │ └── index.scss // 全局通用的样式处理 │ ├── utils // 工具模块 │ ├── vendor // 外部供应资源。比如：人类行为认证 │ └── views // 页面组件。与 components 的区别在于：此处组件对应路由表，以页面的形式展示 │ └── layout // 用于 PC 端，分割一级路由和二级路由 │ ├── components // 该页面组件下的业务组件 │ └── index.vue // layout 组件 ├── tailwind.config.js // wailwind css 配置文件，与 src 平级 └── vite.config.js // vite 配置文件，与 src 平级