最全最详细的使用vue3+vite+pinia+vue-router+ts+less+element-plus搭建前端项目教程

前言：个人git仓库，全是干货

一、本次搭建项目涉及到vue3、vite、pinia、vue-router、typescript、element-plus，下面先简单介绍一下大家比较陌生的框架或库

1、vue3

vue团队官宣：2022年2月7日，vue3作为vue的默认版本。现在打开vue官网，界面默认显示的是vue3版本的指导文档。vue团队在2020年9月18日就已经发布了vue3.0版本，俗称vue3。

熟悉掌握vue3相关技术搭建项目很有必要，这篇文章是比较全面的介绍如何使用vue3以及相关框架搭建vue3项目。

2、vite

下一代前端开发与构建工具，由尤大大团队开发，突出了“快”的特点。vite官网介绍了六大特点：极速的服务启动、轻量快速的热重载、丰富的功能、优化的构建、通用的插件、完全类型化的API。

3、pinia

一种新的状态管理工具，进入官网

4、element-plus

正如element-plus官网首页说的，element-plus是基于Vue3、面向设计师和开发者的组件库

二、开始搭建

本次使用yarn安装依赖包

1、搭建vue3、vite、typescript集成环境

npm i yarn -g // 如果没有安装yarn，需先安装yarn
yarn create vite vue3-vite-app --template vue-ts // 创建vite项目
cd vue3-vite-app // 进入项目根目录
yarn // 安装依赖
yarn dev // 启动项目

2、安装配置pinia

yarn add pinia -S
yarn add pinia-plugin-persist -S // 如果需要数据持久化，就安装这个

在src目录下创建store文件夹，创建index.ts文件，文件内容如下：

import { defineStore, createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

export const globalStore = defineStore({
    id: 'global-store',
    state: () => ({
        name: '--'
    }),
    getters: {},
    actions: {
        setName(name: string) {
            this.name = name
        }
    },
    persist: {
        enabled: true,
        strategies: [
            {
                storage: sessionStorage,
                paths: ['name']
            }
        ]
    }
})

const store = createPinia()
store.use(piniaPluginPersist)

export default store

然后在src/main.ts文件里引入store文件，main.ts文件内容如下（其中router等配置是在后面讲到）：先引入store，app实例use(store)

import { createApp } from 'vue'
import store from './store'
import router from './router'
import './style.css'
import App from './App.vue'

createApp(App).use(store).use(router).mount('#app')

在组件中使用：
首先引入store暴露出的store，例如这个globalStore，得到globalStore的执行结果globalStoreData，在template中使用globalStoreData，代码中的name属性对应store文件里state返回的name属性

<script setup lang="ts">
import { ref } from 'vue'
import { globalStore } from '@/store';
defineProps<{ msg: string }>()
const count = ref(0)
const globalStoreData = globalStore()
</script>

<template>
  <div>hello</div>
   <div>{{ globalStoreData.name }}</div>
</template>

<style scoped lang="less">
</style>

3、安装配置vue-router

安装vue-router

yarn add vue-router -S

在src目录下创建router文件夹，在router文件夹下创建index.ts文件。
先引入createRouter, createWebHistory, RouteRecordRaw，引入需要的组件（这里使用懒加载引入，提高前端性能），创建routes数组，创建router实例，抛出router

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const HelloWorld = import('@/components/HelloWorld.vue')
const Hello = import('@/components/Hello.vue')

const routes: RouteRecordRaw[] = [
    {
        path: '/hello',
        component: Hello
    },
    {
        path: '/hello-w',
        component: HelloWorld
    },
    {
        path: '/',
        redirect: '/hello'
    },
]

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

export default router

在src/main.ts中引入并且配置router, 先引入router实例，app再use(router)：

import { createApp } from 'vue'
import store from './store'
import router from './router' // 引入router
import './style.css'
import App from './App.vue'

createApp(App).use(store).use(router).mount('#app')

4、安装配置less

首先安装less和less-loader

yarn add less less-loader -D

然后在vite.config.ts中配置css预处理器：

export default defineConfig({
  /*
  其它代码省略
  */
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
})

5、安装配置element-plus

先安装element-plus包

yarn add element-plus -S

再安装按需引入需要的依赖包unplugin-auto-import和unplugin-vue-components

yarn add unplugin-auto-import unplugin-vue-components -D

在vite.config.ts文件中配置按需引入相关配置

// 其它代码省略
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  /*
  其它代码省略
  */
})

运行时项目自动生成auto-imports.d.ts和components.d.ts导入用到的组件。

组件中使用element plus组件，以button为例，在标签中写入：

<el-button type="primary" @click="count++">count is {{ count }}</el-button>