# vue3-project-template

**Repository Path**: nieanshow/vue3-project-template

## Basic Information

- **Project Name**: vue3-project-template
- **Description**: Vue3+TS+Pinia项目开发空模板。
集成包含：Vue3、Vite、TS、Pinia、Eslint、Prettier、Vue-Router、TailwindCSS、Sass等前沿的Vue3当前生态下的模块与插件。
更利于大家学习Vue3，低门槛上手Vue3。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/nieanshow/vue3-project-template
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-09-18
- **Last Updated**: 2024-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, vite, Eslint, Pinia

## README

<div align="center">
   <img alt="Vue3 Project Template" width="200" height="200" src="./src/assets/logo/logo.png">
   <p>
     <a href="https://cn.vuejs.org/" target="_blank">
        <img src="https://img.shields.io/npm/v/vue?label=vue&color=%2342b883" />
    </a>
     <a href="https://pinia.vuejs.org/zh/" target="_blank">
        <img src="https://img.shields.io/npm/v/pinia?label=pinia&color=%23ffd34e" />
    </a>
    <a href="https://cn.vitejs.dev/" target="_blank">
        <img src="https://img.shields.io/npm/v/vite?label=vite&color=%238d6efe" />
    </a>
    <a href="https://www.tailwindcss.cn/" target="_blank">
        <img src="https://img.shields.io/npm/v/tailwindcss?label=tailwindcss&color=%2338bdf8" />
    </a>
    <a href="https://www.typescriptlang.org/zh/" target="_blank">
        <img src="https://img.shields.io/badge/-TypeScript5-blue?logo=typescript&logoColor=white" />
    </a>
    <a href="https://eslint.org/" target="_blank">
        <img src="https://img.shields.io/badge/-ESLint8-4b32c3?logo=eslint&logoColor=white" />
    </a>
    <a href='https://gitee.com/nieanshow/vue3-project-template/stargazers'>
        <img src='https://gitee.com/nieanshow/vue3-project-template/badge/star.svg?theme=dark' alt='star'></img>
    </a>
    <a href='https://gitee.com/nieanshow/vue3-project-template/badge/fork.svg?theme=dark'>
        <img src='https://gitee.com/nieanshow/vue3-project-template/badge/fork.svg?theme=dark' alt='fork'></img>
    </a>
   </p>
  
</div>

### ⚡ 介绍

- 集成：Vue3、Vite、TS、Pinia、Eslint、Prettier、Vue-Router、TailwindCSS、Sass
- 示例组件：components/CustButton/index.vue
- 示例页面：views/homePage/index.vue
- Pinia：stores/index.ts

### ⚡ 技术栈

- [Vue3](https://cn.vuejs.org/api/application#app-config 'Vue3')
- [Vite](https://cn.vitejs.dev/ 'Vite')
- [Typescript](https://typescript.bootcss.com/ 'Typescript')
- [Pinia](https://pinia.vuejs.org/zh/introduction.html 'Pinia')
- [TailwindCSS](https://www.tailwindcss.cn/docs/installation 'TailwindCSS')

### 🚀 运行

```javascript
// Windows系统建议使用NVM作为node版本管理，非常方便
// 环境要求
node > 16

//安装依赖
npm install

// 以下运行方式仍选其一
// 运行项目，同时监听TailwindCSS
npm run dev:watchcss

// 独立运行项目
npm run dev

// 独立监听TailwindsCSS
npm run watchcss

// 手动重构CSS
npm run rebuildcss

```

### 📦️ 部署

```javascript
// 构建测试版
npm run build:dev

// 构建测试版
npm run build:stage

// 构建正式版
npm run build:prod
```

### 📦️ 代码检查

```javascript
// lint
npm run lint

```

### 🧨 注意

- TailwindCSS，需要启用监听编译，才能正常使用，命令集成了并行，在启动项目时同时启用css监听
  `npm run watchcss`

### 相关技术文章推荐

- [TailwindCSS在Vite项目中使用](https://juejin.cn/post/7222096611635658811 'TailwindCSS在Vite项目中使用')
- [npm-run-all 简化script配置](https://juejin.cn/post/6854573216363446286 'npm-run-all 简化script配置')
- [Vite 创建 Vue3+TS 项目配置 ESLint](https://juejin.cn/post/7219908995339124791 'Vite 创建 Vue3+TS 项目配置 ESLint')

### VsCode必备插件(\* 必装)

- [\* Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite 'Vite')
- [\* TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin 'TypeScript Vue Plugin (Volar)')
- [\* Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar 'Vue Language Features (Volar)')
- [\* Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets 'Vue VSCode Snippets')
- [\* Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss 'Tailwind CSS IntelliSense')
- [\* Prettier - Code formatter)](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 'Prettier - Code formatter')
- [\* ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 'ESLint')
- [\* Vue 3 Snippets](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets 'Vue 3 Snippets')
- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag 'Auto Close Tag')
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 'Live Server')
- [Microsoft Edge Tools for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools 'Microsoft Edge Tools for VS Code')
- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree 'Todo Tree')