vue3+ts+pinia+vue-router+element-plus+tailwindcss项目搭建与基本框架的构建

项目的基本创建

一、通过脚手架生成项目结构

使用npx命令创建项目主体框架

npx create-vue

二、安装项目依赖

yarn

三、安装第三方插件包

针对项目所需使用的第三方包进行安装集成，当前项目使用到了element-pluis、axios、tailwindcss、animate.css、sass、unplugin-auto-import、unplugin-vue-components、vite-plugin-compression、md5等，这里通过npm或者yarn等包管理工具进行安装进行安装

yarn add packageName

四、配置package.json文件

这里主要是添加几条命令，对项目的调试和打包进行快速操作

// package.json
"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only"
  },

五、运行项目

通过上一步的配置的命令，进行项目运行

yarn dev

项目的初始化配置

一、element-plus的配置

这里是根据element-plus官网提供的方式进行配置，配置了中文模式，以及注册了所有element-plus中的icon图标

完整导入

// main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 导入图标
import * as Icons from '@element-plus/icons-vue'

app.use(ElementPlus, {
    locale: zhCn,
  })

// 注册所有图标
for (const [key, component] of Object.entries(Icons)) {
    app.component(key, component)
}

按需导入（通过unplugin-auto-import 和 unplugin-vue-components 插件实现）

// vite.config.ts

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: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core', "pinia"],
      resolvers: [ElementPlusResolver()],
      dts: './auto-imports.d.ts',
    }),
    Components({
      // 指定组件位置，默认是src/components
      dirs: ['src/components'],
      extensions: ['vue'],
      // 配置文件生成位置
      dts: './components.d.ts',
      resolvers: [
        ElementPlusResolver()
      ]
    }),
  ]
})

二、tailwindcss的配置

样式引入

注意，此处的 main.css 和 base.css 我都放到了assets/style文件夹中

// main.ts
import './assets/style/main.css'
import './assets/style/tailwindcss.css'
import "tailwindcss/tailwind.css"

/* tailwindcss.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

基本配置

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    theme: {
      extend: {}
    },
    corePlugins: {
      preflight: false, // 关闭默认样式
    },
    plugins: []
  }

// vite.config.ts
export default defineConfig({
  css: {
    postcss: {
      plugins: [require('tailwindcss')],
    },
  },
})

页面结构布局

一、路由配置

// router/index.ts
const router = createRouter({
  // history: createWebHistory(process.env.NODE_ENV === 'production' ? '/admin-test/' : ''),
  history: createWebHistory(import.meta.env.VITE_BASE),
  // history: createWebHashHistory(import.meta.env.VITE_BASE),
  routes: [
    {
      path: '/',
      name: 'main',
      meta: {
        title: '首页',
        icon: ''
      },
      component: () => import('@/views/layout/index.vue'),
      children: []
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/login.vue')
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('@/views/login/register.vue')
    },
    {
      path: '/:catchAll(.*)',
      name: '404',
      meta: {
        title: '404',
        icon: ''
      },
      component: () => import('@/views/error/404.vue')
    },
  ]
})

二、根页面配置

配置好根页面后，根据实际情况，按照路由对页面进行开发

// App.vue
<template>
  <div>
    <RouterView v-slot="{ Component }">
      <transition enter-active-class="my-element animate__animated animate__fadeIn  "
        leave-active-class="my-element animate__animated animate__fadeOut " mode="out-in">
        <component :is="Component" />
      </transition>
    </RouterView>
  </div>
</template>