前言：个人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 // 启动项目- 1
- 2
- 3
- 4
- 5
2、安装配置pinia
yarn add pinia -S
yarn add pinia-plugin-persist -S // 如果需要数据持久化，就安装这个- 1
- 2
在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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
然后在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')- 1
- 2
- 3
- 4
- 5
- 6
- 7
在组件中使用：
首先引入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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
3、安装配置vue-router
安装vue-router
yarn add vue-router -S- 1
在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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
在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')- 1
- 2
- 3
- 4
- 5
- 6
- 7
4、安装配置less
首先安装less和less-loader
yarn add less less-loader -D- 1
然后在vite.config.ts中配置css预处理器：
export default defineConfig({
/*
其它代码省略
*/
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true
}
}
}
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
5、安装配置element-plus
先安装element-plus包
yarn add element-plus -S- 1
再安装按需引入需要的依赖包unplugin-auto-import和unplugin-vue-components
yarn add unplugin-auto-import unplugin-vue-components -D- 1
在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()],
}),
],
/*
其它代码省略
*/
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
运行时项目自动生成auto-imports.d.ts和components.d.ts导入用到的组件。
组件中使用element plus组件，以button为例，在标签中写入：
<el-button type="primary" @click="count++">count is {{ count }}</el-button>- 1