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

强烈推荐使用 yarn 安装项目依赖

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

vscode 插件安装

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

vscode setting.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 代码只能自行百度

一，下载模板

    yarn create vite

    输入项目名

    选择使用的模板，选vue

    选vue-ts

    cd 项目名

二，下载安装包

    yarn //下载包

    yarn add pinia

    yarn dev //运行

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

<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>

改为

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

此时 App.vue 会报错，大概的意思为 HelloWorld没有导出默认的模块改为下列代码。然后关闭再打开 App.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 中)

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）

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 用法和普通的一样

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

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

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

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

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

1. 安装 vue-router

    yarn add vue-router

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

//   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;

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

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

// 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')

// 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好像有默认的支持)

  yarn add  less

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

1.安装基本的类型

  yarn add   @types/node --dev

2.修改 vite.config.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

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

4. 修改tsconfig.json、

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

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

import Hello from "@/

八，使用less变量

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

// 基本的less变量
@borderColor: #c8c8c8;
@containerWidth: 1190px;
@titleColor: #5b9be9;
@textColor: #333;

2. 在 vite.config.ts 添加以下代码

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

});

九，引入antd(按需引入)

1.引入antd

  yarn ant-design-vue@next

<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去帮我们自动的样式文件），此时就需要用到插件的帮忙了

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

// 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, 安装插件

yarn add  swagger-to-ts -D

2, 配置命令 (package.json)

"scripts": {
        "doc": "swagger-to-ts --docUrl http://127.0.0.1:8082/v2/api-docs  --outputDir apitypes"
    }

duanmulianjin / vite-vue3-ts-pinia .gitee-modal { width: 500px !important; }

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

vscode 插件安装

vscode setting.json 添加配置

从零搭建本项目指南

一，下载模板

二，下载安装包

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

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

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

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

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

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

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

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

1. 安装 vue-router

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

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

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

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

1.安装基本的类型

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

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

4. 修改tsconfig.json、

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

八，使用less变量

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

2. 在 vite.config.ts 添加以下代码

九，引入antd(按需引入)

1.引入antd

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

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

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

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

1, 安装插件

2, 配置命令 (package.json)

十一 使用官方的setup编码风格

1.其实已经是支持了的，只是语法提示不友好，

2.卸载vue2的格式化插件 vetur 然后安装新的插件 volar 就可以了

规范（非必须，但强烈推荐）

简介

发行版

贡献者

近期动态

搜索帮助

duanmulianjin / vite-vue3-ts-pinia

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

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

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

十一使用官方的setup编码风格