vue3项目模板技术

搭建：基于 Vue3.2、TypeScript、Vite3、Pinia、Element-Plus 的后台管理框架，使用目前最新技术栈开发。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能
需要掌握的基础知识：
vue3 文档：https://cn.vuejs.org/guide/introduction.html
vue-router文档：https://router.vuejs.org/zh/guide/
vite文档：https://cn.vitejs.dev/guide/
TypeScript文档：https://www.typescriptlang.org/zh/docs/
Pinia文档：https://pinia.web3doc.top/introduction.html
Element-Pius文档：https://element-plus.org/zh-CN/component/button.html
Es6教程：https://es6.ruanyifeng.com/

快速上手：
（1）环境准备
本地环境需要安装 Node.js 16.x+、pnpm 7.x+、Git
Node.js 版本推荐安装 16+ 以上，版本过低依赖包可能安装失败。
默认使用 pnpm 作为安装依赖包工具，使用 yarn、npm 没有 lock 可能会安装到最新版依赖。

# 全局安装pnpm
npm i -g pnpm

工具配置：
本项目推荐使用 VSCode 进行开发，项目里面已内置 VSCode 配置，包含推荐的插件和设置。
插件请在外网下载安装包后复制到内网开发机安装。
推荐安装以下插件：
•https://marketplace.visualstudio.com/items?itemName=Vue.volar==> Vue3 官方插件
• TypeScript Vue Plugin (Volar) ==> Vue3 官方插件（TypeScript）
https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin
• Vue 3 Snippets ==> Vue3 代码提示
https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
• ESLint ==> 代码检查
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Stylelint ==> CSS 代码检查 && 格式化
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
• Prettier - Code formatter ==> 代码格式化
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Code Spell Checker ==> 校验单词拼写错误
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
• Sass ==> Sass 样式编写
https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented
• DotENV ==> 高亮 .env 文件
https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

.vscode > extensions.json

{
    "recommendations": [
        "vue.volar",
        "vue.vscode-typescript-vue-plugin",
        "hollowtree.vue-snippets",
        "dbaeumer.vscode-eslint",
        "stylelint.vscode-stylelint",
        "esbenp.prettier-vscode",
        "streetsidesoftware.code-spell-checker",
        "syler.sass-indented",
        "mikestead.dotenv"
    ]
}

• 开发 Vue3 项目请开启 Volar 插件、禁用 Vetur 插件。
• 请配置项目默认格式化程序为 Prettier。

代码拉取
从 GitLab拉取代码：

# 克隆代码
git clone 

#根目录 安装依赖
pnpm install

#运行项目
pnpm dev
pnpm serve

#打包项目
# 开发环境
pnpm build:dev
# 测试环境
pnpm build:test
# 生产环境
pnpm build:pro

#校验格式化代码
# eslint 检测代码
pnpm lint:eslint
# prettier 格式化代码
pnpm lint:prettier
# stylelint 格式化样式
pnpm lint:stylelint

npm script 详解

{
    "scripts": {
        // 本地运行(dev环境)
        "dev": "vite",
        // 本地运行(dev环境)
        "serve": "vite",
        // 构建打包(dev环境)
        "build:dev": "vue-tsc && vite build --mode development",
        // 构建打包(test环境)
        "build:test": "vue-tsc && vite build --mode test",
        // 构建打包(pro环境)
        "build:pro": "vue-tsc && vite build --mode production",
        // 检查项目 ts 类型
        "type:check": "vue-tsc --noEmit --skipLibCheck",
        // 本地环境预览构建后的 dist
        "preview": "npm run build:dev && vite preview",
        // 执行 eslint 校验
        "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
        // 执行 prettier 格式化
        "lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
        // 执行 stylelint 格式化
        "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
        // 执行 lint-staged.config.js 文件下的命令
        "lint:lint-staged": "lint-staged",
        // 初始化 husky 配置
        "prepare": "husky install",
        // 自动更新版本
        "release": "standard-version"
    }
}

项目规范配置（插件及配置）