# Vue3-Vite-Template

**Repository Path**: immortal_sun/vue3-vite-template

## Basic Information

- **Project Name**: Vue3-Vite-Template
- **Description**: 运用vite+vue3+ts构建基础项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2022-07-29
- **Last Updated**: 2024-12-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, Ant-Design, Sass, Vue

## README

# Vue 3 + TypeScript + Vite
## 简介

本项目基于 `vite` 创建的 `vue3 + ts` 的脚手架基础项目。
> 其中用到技术栈：`vue3.2x + ts + element-plus + eslint + axios + sass + prettier + husky + lint-staged`

```bash
# 安装依赖
npm install	/ yarn ...

# 本地启动
npm run dev	/	yarn dev ...

# 生产打包
npm run build	/	yarn build ...

# 自动修复eslint
npm run lint / yarn lint ...

# 自动进行格式化
npm run prettier / yarn prettier ...
```

## 项目搭建流程
> 从零开始进行构建

### 一、 使用 `vite` 创建脚手架、
> 使用vite创建完成后可以直接启动

1. 默认手动开始

```bash
# 使用 npm 
npm init vite@latest
# 使用 yarn
yarn create vite
# 使用 pnpm
yarn create vite
```

2. 直接指定模板和名称

```bash
# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue
```

3. 添加 `router`
> 完成 `router` 安装后进行定义，然后 `main.ts` 文件中引入

```bash
# 安装路由
yarn add vue-router
```

> 新建 `router` 管理页
```js
// @/src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'HomePage',
    component: () => import('@/pages/HomePage.vue'), // 注意这里要带上 文件后缀.vue
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
```

> 修改入口文件 `main.ts` ，修改之后就完成 `router` 引入
```ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index';

const app = createApp(App);
app.use(router);
app.mount('#app');
```

4. 添加 `pinia` (等同于`vuex`)
> 安装完成之后在入口文件内引入即可(同`router`)

```bash
# 安装
yarn add pinia@next
```
```ts
// main.ts
// 引入
import { createPinia } from "pinia";
// 创建根存储库并将其传递给应用程序
app.use(createPinia());
```

5. 添加组件库 element-plus
> 安装依赖后在 `vite.config.ts` 中进行自动引入和按需引入配置后，可以直接在页面中进行使用，无需二次引入

```bash
# 安装
yarn add element-plus

# 自动导入
npm install -D unplugin-vue-components unplugin-auto-import
```

> 自动导入后进行 `vite.config.ts` 文件配置
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ]
  // ...
});
```

### 二、 添加代码约束

1. `eslint` 支持
> 安装完成之后新建 .eslintrc.js 进行规则配置以及 .eslintignore 设置忽略目录

```bash
# eslint 安装
yarn add eslint --dev

# eslint 插件安装
yarn add eslint-plugin-vue --dev

# typescript plugin
yarn add @typescript-eslint/eslint-plugin --dev

# prettier模式支持
yarn add eslint-plugin-prettier --dev

# typescript parser
yarn add @typescript-eslint/parser --dev
```

2. `prettier` 支持
> 安装完成之后新建 .prettierrc 进行规则配置以及 .prettierignore 设置忽略目录.
```bash
# 安装 prettier
yarn add prettier --dev
```

3. 配置 `husky + lint-staged`
> 用于在进行git提交时进行规范校验； husky 是一个为 git 客户端增加 hook 的工具，可以在pre-commit阶段进行lint 检查、单元测试、代码美化等操作；lint-staged 只过滤出 Git 代码暂存区文件(被 git add 的文件)的工具，用于提升lint检测速度。

```bash
# 安装 husky
yarn add husky --dev

# 安装 lint-staged
yarn add lint-staged --dev
```

> 添加 `package.json` 中配置
```json
// package.json
// ...
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,vue,ts,tsx}": [
    "yarn lint",
    "prettier --write",
    "git add"
  ]
}
// ...
```

### 三、 添加 `config` 配置
> 添加 `vite.config.ts` 文件中相关配置

1. 配置文件引用别名 `alias`
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path' // node适用ts版本时需要提前引入ts类型声明（@types/node）进行支持
// yran add @types/node --dev

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  }
});
```

2. 配置 `sass`
```bash
# 添加 sass
yarn add sass --dev
```
> config 中进行全局引入变量，可在所有页面中直接使用该sass变量
```ts
// vite.config.ts
// ...
css: {
  preprocessorOptions: {
    scss: {
      additionalData: "@import '@/assets/css/variables.scss';"
    }
  }
}
// ...
```

3. 配置gzip压缩
```bash
# 添加 vite-plugin-compression
yarn add vite-plugin-compression --dev
```
> config 中进行配置
```ts
// vite.config.ts
// ...
plugins: [ 
  // ...
  viteCompression({
    verbose: true,
    disable: false,
    threshold: 10240,
    algorithm: "gzip",
    ext: ".gz"
  })
  // ...
]
// ...
```

4. 去除生产环境 `console` 和 `debugger`
```ts
// vite.config.ts
// ...
build: {
  // ...
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
}
// ...
```

5. 添加proxy代理
```ts
// vite.config.ts
// ...
server: {
  host: "0.0.0.0",
  port: 3000, // 端口号
  open: false, // 配置自动启动浏览器
  https: false,
  proxy: {
    "/xxx": {
      target: "http://xxx.xx.xx.xx", // 目标地址
      ws: true, // 代理的WebSockets
      changeOrigin: true, // 允许websockets跨域
      pathRewrite: {
        "^/xxx": ""
      }
    }
  }
}
// ...
```