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