# vite-vue3-ts-pinia

**Repository Path**: yuzhaoboy/vite-vue3-ts-pinia

## Basic Information

- **Project Name**: vite-vue3-ts-pinia
- **Description**: 本框架使用 Vue 3.2.25 + TypeScript + Vite + vue-router + pinia ,摈弃了webpack 和vuex 替代为vite 和pinia,
本项目的创建过程 可查阅 从零搭建本项目指南
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 3
- **Created**: 2022-02-15
- **Last Updated**: 2025-09-29

## Categories & Tags

**Categories**: Uncategorized

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

## README

# Vite + Vue 3 + Typescript + vue-router + pinia

**_<font color=red size=4 >强烈推荐使用 yarn 安装项目依赖</font>_**

```text
本框架使用 Vue 3.2.25 + TypeScript + Vite + vue-router + pinia ,摈弃了webpack 和vuex 替代为vite 和pinia,
本项目的创建过程 可查阅 从零搭建本项目指南
```

## vscode 插件安装

```text
1、ESLint
2、Prettier - Code formatter
3、Stylelint
4、Vue Language Features (Volar)
5、Path Intellisense
6、TypeScript Importer
7、markdownlint
```

## vscode setting.json 添加配置

```json
"editor.codeActionsOnSave": {
  "source.fixAll": false,
  "source.fixAll.eslint": true //保存自动修复, eslint.autoFixOnSave已废弃
},
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"stylelint.validate": [
  "css",
  "scss",
  "less",
  "styl",
  "vue"
],
```

## 从零搭建本项目指南

**建议先下载 yarn 再开始立项，否则同含义的 npm 代码只能自行百度**

### 一，下载模板

```text
    yarn create vite

    输入项目名

    选择使用的模板，选vue

    选vue-ts

    cd 项目名
```

### 二，下载安装包

```text
    yarn //下载包

    yarn add pinia

    yarn dev //运行

```

### 三.由于个人认为vite默认的 vue3 写法不是很好，所以改掉 vite 默认的风格 （如下代码）

```vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
</script>
```

**改为**

```vue
<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
export default defineComponent({
  components: { HelloWorld },
});
</script>
```

#### 此时 App.vue 会报错，大概的意思为 HelloWorld没有导出默认的模块 改为下列代码。然后关闭再打开 App.vue 就没报错了

```vue
<script lang="ts">
import { defineComponent } from "vue";
import { ref } from "vue";
export default defineComponent({
  props: {
    msg: String,
  },
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
});
</script>
```

### 四，使用 pinia 具体用法可参见 src/stores/main.ts

#### 1.全局挂载 (在/src/main.ts 中)

```ts
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const app = createApp(App);
app.use(createPinia());
app.mount("#app");
```

#### 2.创建一个仓库（具体用法可参见 src/stores/main.ts）

```ts
import { defineStore } from "pinia";
export const IndexStore = defineStore("index", {
  state: () => ({
    counter: 0,
    name: "Eduardo",
  }),
  getters: {
    doubleCount: (state: any) => state.counter * 2,
  },
  actions: {
    resetCounter(param: any) {
      this.counter = param;
    },
  },
});
```

#### 3.使用（参见./components/HelloWorld.vue）getters 用法和普通的一样

```ts
import { IndexStore } from "../stores/main";
setup() {
    const indexStore = IndexStore();
    const addCounter = () => {
      indexStore.$patch({ counter: indexStore.counter + 1 })
    };
    return {
      indexStore,
      addCounter,
    };
  }
```

```htm
<span>{{ indexStore.counter }}*2={{ indexStore.doubleCount }}</span>
```

#### 4.更新（参考 上述代码中的 addCounter）

```ts
//   甚至可以这样
indexStore.counter++;
```

### 五，使用 vue-router （注意看注释）

#### 1. 安装 vue-router

```text
    yarn add vue-router
```

#### 2. 建立工程目录（按照第一行注释的位置建文件和修改代码）

```ts
//   src/route/index.ts
import { createRouter, createWebHashHistory } from "vue-router";
const Home = () => import("../views/Home.vue");
const About = () => import("../views/About.vue");
const routes = [
  { path: "/", redirect: "/home" },
  {
    path: "/home",
    name: "home",
    component: Home,
  },
  {
    path: "/about",
    name: "about",
    component: About,
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});
export default router;
```

``` vue
// src/views/Home.vue
<template>
  <div>首页</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    return {};
  },
});
</script>
<style scoped></style>
```

```vue
// src/views/About.vue
<template>
  <div>关于我们</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    return {};
  },
});
</script>
<style scoped></style>
```

```ts
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
import router from './route/index'
const app=createApp(App)
app.use(createPinia());
app.use(router);
app.mount('#app')
```

```vue
// src/App.vue
<template>
  <router-view></router-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({});
</script> 
<style>
</style>
```

#### 3. 运行后再浏览器中输入 <http://localhost:3000/#/about>

### 六，在项目中使用less(直接下载less就可以了，sass，stylus,也一样，vite好像有默认的支持)

```text
  yarn add  less
```

### 七，使用文件别名（@/views/**）

#### 1.安装基本的类型

```text
  yarn add   @types/node --dev
```

#### 2.修改 vite.config.ts （修改后已经可以使用了，但是开发工具没有路径提示）

``` ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require("path");
const resolve = (dir: string): string => path.resolve(__dirname, dir);
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
    alias: [
      { find: "@", replacement: resolve("src") },
    ],
  },
});
```

#### 3.顶级目录新建一个 tsconfig.paths.json

```json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*":["./*"],
    }
  }
}

```

#### 4. 修改tsconfig.json、

```json
{
  "extends": "./tsconfig.paths.json",
  // 后面的部分不要动
  "compilerOptions": .....

```

#### 5. 在App.vue中键入  (此时就可以看到路径提示了)

``` ts
import Hello from "@/
```

## 八，使用less变量

#### 1. 新建一个less文件（src/styles/variable.less）

  ``` less
  // 基本的less变量
@borderColor: #c8c8c8;
@containerWidth: 1190px;
@titleColor: #5b9be9;
@textColor: #333;
  ```
  
#### 2. 在 vite.config.ts 添加以下代码

  ``` ts
export default defineConfig({
  // ... 其他的配置不变
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `@import "${path.resolve(
          __dirname,
          "./src/styles/variable.less"
        )}";`,
      },
    },
  },
  // ... 其他的配置不变
 
});
  ```

### 九，引入antd(按需引入)

#### 1.引入antd

``` text
  yarn ant-design-vue@next 
  
```

```vue
<template>
    <Button type="primary">哈哈哈哈</Button>
</template>
<script lang="ts">
import { Button } from 'ant-design-vue';
import 'ant-design-vue/es/button/style/css'; 
export default defineComponent({
  components:{Button,},
});
</script> 

```

#### 此时虽然已经做到了按需引入，但是需要手动的引入样式文件，极其的不方便

#### 2.简化写法，（由vite去帮我们自动的样式文件），此时就需要用到插件的帮忙了

``` text
  yarn add vite-plugin-style-import@1.4.1 -D 
  // 由于 vite-plugin-style-import 的最新版本（2.0.0） 有bug 所以降级使用 1.4.1 
  
```

``` ts
// vite.config.ts 
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require("path");
import styleImport from 'vite-plugin-style-import'
const resolve = (dir: string): string => path.resolve(__dirname, dir);
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    styleImport({
      libs: [{
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/css`;
        },
      }]
    }),
    vue(),
  ],
  resolve: {
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
    alias: [{ find: "@", replacement: resolve("src") }],
  },
});
```

### 此时去掉手动引入样式文件的代码，依然可以使用antd的button 组件

## 十，使用插件自动生成接口文档（ts类型）

### 1, 安装插件

``` text
yarn add  swagger-to-ts -D

```

### 2, 配置命令 (package.json)

``` json
"scripts": {
        "doc": "swagger-to-ts --docUrl http://127.0.0.1:8082/v2/api-docs  --outputDir apitypes"
    }
```
<!-- swagger-to-ts --docUrl http://220.112.1.174:8082/v2/api-docs --paths  --outputDir apitypes -->
## 十一 使用官方的setup编码风格
### 1.其实已经是支持了的，只是语法提示不友好，
### 2.卸载vue2的格式化插件 vetur 然后安装新的插件 volar 就可以了
## 规范（非必须，但强烈推荐）