Vue3项目配置( 一 )：基本依赖配置

今天学习的内容是vue项目的初始化以及开发规范配置，包括以下内容：

• 🚀 vite搭建vue3开发环境
• 🌈 vue3生态pinia vue-router ant-design-vue，样式库tailwindcss
• 🐢 项目代码规范配置Eslint Prettier Editorconfig
• 💻 Git提交规范Commitizen Husky lint-staged

项目初始化

通过Pnpm执行命令🚁

pnpm create vite

• 输入项目名称
• 选择需要用到的框架，这里选择vue
• 这里选择TypeScript，在项目中添加ts依赖
• 出现以下内容，项目初始化成功
• 之后进入test文件夹，安装依赖并执行即可

访问 http://localhost:5173/ ，项目初始化成功

添加基本依赖

这里添加路由，状态管理，以及第三方组件库、样式库

pnpm add vue-router pinia ant-design-vue
pnpm add -D tailwindcss postcss autoprefixer less

tailwindcss

首先配置tailwindcss，安装依赖过后，执行以下命令进行初始化

npx tailwindcss init -p

初始化完成之后，在顶级目录下自动创建两个文件，一个用于配置postcss, 一个用于配置tailwindcss

1. 修改tailwindcss配置文件

// tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 在main.ts中添加样式文件

import "tailwindcss/tailwind.css"

3. 测试效果

<template>
  <div>
    <h1 class="text-red-400">我是App</h1>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="less"></style>

重启服务后查看，样式已生效

ant-design-vue

项目中按需引入组件，使用vite插件unplugin-vue-components

pnpm add unplugin-vue-components -D

之后在vite.config.ts中进行配置

// vite.config.ts
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import Components from "unplugin-vue-components/vite"
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
})

为了有更好的TypeScript的提示，可以在tsconfig.ts中添加配置

// tsconfig.ts
{
     "compilerOptions": {
        ...,
        "types": ["./node_modules/ant-design-vue/typings/global.d.ts"]
  },
}

在App.vue中测试效果

<template>
  <div>
    <a-button :type="'primary'">点我</a-button>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="less"></style>

这里的效果与原本的组件效果不一样，是因为tailwindcss对其造成了影响，需要在配置文件中设置选项

{
...
  corePlugins: {
   preflight: false,
 },
}

Vue-Router

配置路由和以前一样，在src下创建目录

• router配置路由
• views 页面组件

创建页面组件

// /views/Home/index.vue
<template>
  <div class="home">
    <h1 class="text-red-500">我是Home</h1>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>

// /views/About/index.vue
<template>
  <div class="about">
    <h1 class="text-blue-500">我是About</h1>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>

配置路由

// router/index.ts
import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router"
const routes: RouteRecordRaw[] = [
  //路由配置对象
  {
    path: "/",
    component: () => import("../views/Home/index.vue"),
  },
  {
    path: "/about",
    component: () => import("../views/About/index.vue"),
  },
]
const router = createRouter({
  //路由实例对象
  routes,
  history: createWebHistory(),
})
export default router

并在vue实例中进行使用

// /main.ts
import { createApp } from "vue"
import App from "./App.vue"
import "tailwindcss/tailwind.css"
import router from "./router"

const app = createApp(App)
app.use(router).mount("#app")

测试效果

// App.vue
<template>
  <div>
    <a-button :type="'primary'" @click="handleToHome">Home</a-button>
    <a-button :type="'primary'" @click="handleToAbout">About</a-button>
    <router-view />
  </div>
</template>
<script setup lang="ts">
  import { useRouter } from "vue-router"

  const router = useRouter()
  const handleToAbout = () => {
    router.push("/about")
  }
  const handleToHome = () => {
    router.push("/")
  }
</script>
<style scoped lang="less"></style>

Pinia

同router，在src目录下创建目录，stores

// stores/index.ts
import { createPinia } from "pinia"

const pinia = createPinia()
export default pinia

// main.ts
import pinia from "./stores"
import { createApp } from "vue"
import App from "./App.vue"
import "tailwindcss/tailwind.css"
import router from "./router"
import pinia from "./stores"
const app = createApp(App)
app.use(router).use(pinia).mount("#app")

测试效果

stores目录下创建modules用于存放各个独立的store

创建test.ts用于测试效果

// test.ts
import { defineStore } from "pinia"
import { ref } from "vue"

export const useTestStore = defineStore("test", () => {
  const count = ref(0)
  const increment = () => {
    count.value++
  }
  const decrement = () => {
    count.value--
  }
  return { count, increment, decrement }
})

在about页面中进行使用

// views/About/index.vue
<template>
  <div class="about">
    <h1 class="text-blue-500">我是About</h1>
    <a-button type="primary" @click="decrement">-1</a-button>
    <h1 class="text-xl text-green-700">{{ count }}</h1>
    <a-button type="primary" @click="increment">+1</a-button>
  </div>
</template>
<script setup lang="ts">
  import { storeToRefs } from "pinia"
  import { useTestStore } from "../../stores/modules/test"

  const testStore = useTestStore()
  const { count } = storeToRefs(testStore)
  const { increment, decrement } = testStore
</script>
<style lang="less" scoped></style>

补充

这里可以对项目的路径别名进行配置一下

解析

在vite配置文件中进行如下配置，在项目运行中，遇见对应标识符，解析对应的路径下的文件内容

import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  ...,
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

编辑器配置

配置tsconfig.ts便于编辑器对路径有更好的代码提示

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