一、本次建立项目涉及到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>