企业级项目搭建

             

Introduction

Use vite to customize the build your Vue3&TypeScript company project
初始化项目基于脚手架工具 Vite搭建,技术框架Vue3并使用TypeScript语言开发,其他使用核心技术如: Vue-Router� + vite-plugin-pages Pinia.

Basic Build Lib

         

Using Tools

     

Install & Use

yarn

Compiles and hot-reloads for development

yarn run dev

Compiles and minifies for production

yarn run build (for production)
yarn run build:test (for pre)

Run unit test

yarn run test:unit

Lints and fixes files

yarn run lint:eslint
yarn run lint:stylelint

Remove cache/lib and ReIntsall

yarn run reinstall

Standard

文件或文件夹命名

新建文件或目录命名统一采取驼峰命名，例如 editorPlus.

样式

1、样式命名统一采取中划线方式，例如 class-*-. 2、基础样式已配置到全局,如果有新添加的内容可以按模块添加文件夹或补充到文件中,当前对 ant, transition,通用变量添加.

Iconfont 图标

项目中尽量使用字体图标,图标上传到 阿里巴巴 iconfont,上传成功后刷新并替换 index.html 中链接.

store

项目中默认已经部署 Pinia,新模块创建时需要创建文件夹和子文件***.ts,使用时仅需高如该模块即可. 建议在项目中可以尝试reactive ref 替代 Pinia.

router

项目基于File Base URL因此无需手动新建路由，但必须要注意在pages目录下新建文件子文件只能是index.vue

埋点与接口日志

暂不接入,作为 fix 版本接入,接入后补充文档

Project Tree

e-card-business
├─ .editorconfig
├─ .env   —环境配置文件 
├─ .env.development
├─ .env.production
├─ .env.test
├─ .eslintignore
├─ .eslintrc.js
├─ .husky  — git hook
│  ├─ _
│  │  └─ husky.sh
│  ├─ commit-msg
│  ├─ common.sh
│  └─ pre-commit
├─ .prettierignore
├─ .prettierrc
├─ .stylelintignore
├─ README.md
├─ build  — 打包配置文件 
│  ├─ config
│  │  └─ themeConfig.ts
│  ├─ constant.ts
│  ├─ generate
│  │  └─ generateModifyVars.ts
│  ├─ getConfigFileName.ts
│  ├─ index.ts
│  └─ script
│     ├─ buildChunk.ts
│     ├─ buildConf.ts
│     └─ buildServer.ts
├─ commitlint.config.js
├─ index.html
├─ jest.config.js
├─ mock —接口mock配置文件 
│  ├─ _createProductionServer.ts
│  └─ index.ts
├─ package.json
├─ postcss.config.js
├─ public
│  ├─ favicon.ico
│  └─ resource
│     └─ img
│        └─ logo.png
├─ src
│  ├─ App.vue
│  ├─ assets     — 静态资源 
│  │  ├─ fonts
│  │  ├─ images
│  │  │  └─ logo.png
│  │  └─ svg
│  ├─ components    — 公共组件  
│  │  └─ camcard
│  │     └─ index.vue
│  ├─ constants     — 常量及枚举类型 
│  │  ├─ enum.ts
│  │  └─ index.ts
│  ├─ env.d.ts
│  ├─ hooks          —hook钩子函数 
│  │  └─ useMessage.tsx
│  ├─ i18n           —多语言
│  │  ├─ en-US.json
│  │  └─ zh-CN.json
│  ├─ layouts
│  │  └─ default.vue
│  ├─ main.ts
│  ├─ pages         —页面，FIle Base Router
│  │  ├─ editor
│  │  │  ├─ index.less
│  │  │  └─ index.vue
│  │  ├─ index.vue
│  │  ├─ login
│  │  │  ├─ index.less
│  │  │  └─ index.vue
│  │  └─ pay
│  │     └─ index.vue
│  ├─ router       —基础路由配置
│  │  └─ index.ts
│  ├─ services
│  │  ├─ auth.ts
│  │  └─ index.ts
│  ├─ store        —状态管理
│  │  ├─ index.ts
│  │  └─ modules
│  │     ├─ auth
│  │     │  └─ index.ts
│  │     └─ login
│  ├─ styles    —常用样式配置
│  └─ utils     —工具配置
│     ├─ axios  —axios封装
│     ├─ dom    —dom操作
│     ├─ env.ts
│     ├─ file   —文件系统操作
│     ├─ flog   —埋点及日志操作
│     ├─ is.ts  —常用判断类型工具
│     └─ log.ts —console封装
├─ stylelint.config.js
├─ test      —单元测试
├─ tsconfig.json
├─ tsconfig.node.json
├─ types       —全局类型声明
├─ vite.config.ts
├─ windi.config.ts     — windicss配置
└─ yarn.lock

Support Feature

• 支持Pinia状态管理;
• 支持vue3 API，Image自动导入，也可以手动配置全局或部分文件夹的组件自定义导入；

**使用前提：** 安装`vue-global-api`并配置`.eslintrc.js `->`extends:[‘vue-global-api’]`

const test = ref(10)
onMounted(() => {
  console.log('mounted===')
})
**组件自定义导入：**
Components({
   ...,
   resolvers: [
     name => {
         // where `name` is always CapitalCase
         if (name.startsWith('App')) {
             return { importName: 'default', path: `./components/$                {kebabCase(name)}/index.vue` }
         }
     }
   ]
})

......

• 基于Vue-Router,使用vite-plugin-pages实现File Base Router；
• 支持TSX语法;
• 支持axios, 二次封装完成;
• 支持jest单元测试；
• 支持Mock数据;
• 支持i18n 国际化,全局配置完成;
• 支持dayjs,日期格式化;
• 支持lodash,全局注入防抖与节流;
• 支持Less;
• 支持windicss，优势是大多数情况无需额外编写css文件;
• 支持ant-desgin-vue,样式自动导入，UI 组件已按需加载, 特殊的如message 等非组件化模块样式仍需手动注入;
• 支持styleLint,eslint,prettier，语法检查;
• 支持命令行工具cross_env(设置脚本变量),rimraf, dotenv(将环境变量加载到 process.env),配合vite .env.**对不同环境作区分;
• 支持 Git Hook(husky),脚本支持 lint-stage 检查;
• 支持esno,基于 esbuild 的 TS/ESNext node 运行时;

GIT 规范

Pull Request

项目对 git 流程做强制规范

1. checkout 分支: git checkout -b feature/xxxx
2. commit 提交: git commit -m 'feature: add xxxxx'

Reference

• master 生产环境分支
• pre 预发环境分支
• daily 公共日常开发分支(daily/1.0.0)
• bugfix 修复 bug
• feature 新增功能

Use Suggestion

• JSX 模块导出支持,语法使用建议参考Babel Plugin JSX

import { defineComponent } from 'vue'

// named exports w/ variable declaration: ok
export const Foo = defineComponent({})

// named exports referencing variable declaration: ok
const Bar = defineComponent({ render() { return <div>Test</div> }})
export { Bar }

// default export call: ok
export default defineComponent({ render() { return <div>Test</div> }})

// default export referencing variable declaration: ok
const Baz = defineComponent({ render() { return <div>Test</div> }})
export default Baz

• 新建或添加文件后,通过project-tree更新项目结构树

Other

• vscode推荐安装 Vue Language Features (Volar)和 EditorConfig for VS Code
• vscode推荐安装 project-tree
• vscode推荐安装WindiCSS

主要技术库文档

• Vite
• Vue3
• TypeScript
• ant-design-vue
• vite-plugin-pages
• Pinia
• MockJS
• lodash-es

相关文档参考

• setup\Composition
• 使用 reactive ref 替代 VUEX 状态管理
• JSX 开发 Vue3
• husky
• mac brew 安装

Next Todo

• npm package publish
• 加入日志系统