# vite+vue3.2+elementPlus+Pinia

**Repository Path**: capgemini-china/vite-vue3-2-element-plus-Pinia

## Basic Information

- **Project Name**: vite+vue3.2+elementPlus+Pinia
- **Description**: 与vite+vue3.2+elementPlus+Vuex相比，仅是Vuex变成了Pinia
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2022-03-19
- **Last Updated**: 2022-09-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.


# 安装（node>12  v14.15.4）
#### 安装vite并创建app
参考vite官网：https://vitejs.bootcss.com/guide/#scaffolding-your-first-vite-project

    yarn create vite

安装eslint (.eslintrc.js查看配置结果)

    yarn add eslint --dev

eslint 初始化项目

    yarn run eslint --init
    （To check syntax, find problems, and enforce code style）

router安装

    yarn add vue-router@4  (关掉serve，不然可能会报错)

Pinia 安装

    yarn add pinia@next

    中文文档：https://pinia.web3doc.top/getting-started.html
    相关资料：https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651593782&idx=1&sn=7818ad73b224a1223a5491fe89e2959f&chksm=8022cbf7b75542e112e5e20d03e8503035f6687817c56b11f9499de68c6e9e7683b7c5d1098a&mpshare=1&scene=1&srcid=010137hbAJUXw4ACtXdnOUf3&sharer_sharetime=1647358256379&sharer_shareid=cf75244b11947de897a1cf76d3e2bafe#rd

# .scss and .sass（默认）
    yarn add sass

# .less
     yarn add  less

# .styl and .stylus
    npm install -D stylus
# 进度条
<!--yarn add -D @types/nprogress -->
    yarn add nprogress

# 下载spreadjs
    yarn add @grapecity/spread-sheets-vue
    yarn add @grapecity/spread-sheets               
    <!--根据实际项目来，不用刻意去掉-->
    // "@grapecity/spread-sheets": "latest",
    // "@grapecity/spread-sheets-vue": "latest",
    // "@grapecity/spread-excelio": "latest",
    // "@grapecity/spread-sheets-charts": "latest",
    // "@grapecity/spread-sheets-print": "latest",
    // "@grapecity/spread-sheets-pdf": "latest",
    // "@grapecity/spread-sheets-barcode": "latest",
    // "@grapecity/spread-sheets-shapes": "latest",
    // "@grapecity/spread-sheets-resources-ko": "latest",
    // "@grapecity/spread-sheets-resources-ja": "latest",
    // "@grapecity/spread-sheets-resources-zh": "latest",
    // "@grapecity/spread-sheets-languagepackages": "latest",
    // "@grapecity/spread-sheets-tablesheet": "latest",
    // "@grapecity/spread-sheets-pivot-addon": "latest",

# 下载lodash

    yarn add lodash -S
    yarn add @types/lodash -S
    例子：
    import { lowerFirst } from 'lodash-es'
    console.log(lowerFirst('SDFSFDSFSF'))

# 下载moment(可能需要vpn下载)
    yarn add moment
    import moment from 'moment'
    console.log(moment().format('dddd'))

# 前端生成pdf
    yarn add  html2canvas 将html转换为图片
    yarn add jspdf  将图片转换为pdf

# vueuse
    yarn add @vueuse/core @vueuse/components
    @vueuse/core 用于API的使用
    @vueuse/components  组件调用

更新包版本
    yarn upgrade //用于更新包到基于规范范围的最新版本

    yarn upgrade --latest # //忽略版本规则，升级到最新版本，并且更新 package.json
    rm node_modules/ -rf
## 添加富文本编辑器
      yarn add tinymce
      yarn add @tinymce/tinymce-vue
## Git Message format
    [Commitlint](https://commitlint.js.org/#/)
    type:
    `build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test`

    'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
    'feat', // 新功能
    'fix', // 修补bug
    'docs', // 文档修改
    'style', // 代码格式修改, 注意不是 css 修改
    'refactor', // 重构
    'perf', // 优化相关，比如提升性能、体验
    'test', // 测试用例修改
    'revert', // 代码回滚
    'ci', // 持续集成修改
    'config', // 配置修改
    'chore' // 构建过程或辅助工具的变动
    Example:
    `git commit -m "feat: add new feature"`
    
    // 级别：可选0,1,2。0禁用规则，1警告，2报错。
    // 适用：可选 always, never。