前言：个人，全是干货
一、知名网站建设定制本次搭建项目涉及到、vite、pinia、vue-router、typescript、element-plus，知名网站建设定制下面先简单介绍一下大知名网站建设定制家比较陌生的框架或库
1、vue3
vue团队官宣：2022年2月7日，vue3作为vue知名网站建设定制的默认版本。现在打开，界面默认显示的是vue3版本的指导文档。vue团队在2020年9月18日就已经发布了vue3.0版本，俗称vue3。
熟悉掌握vue3相关技术搭建项目很有必要，这篇文章是比较全面的介绍如何使用vue3以及相关框架搭建。
2、vite
下一代前端开发与构建工具，由尤大大团队开发，突出了“快”的特点。介绍了六大特点：极速的服务启动、轻量快速的热重载、丰富的功能、优化的构建、通用的插件、完全类型化的API。
3、pinia
一种新的状态管理工具，
4、element-plus
正如首页说的，element-plus是基于Vue3、面向设计师和开发者的组件库
二、开始搭建
本次使用yarn安装依赖包
1、搭建vue3、vite、typescript集成环境
npm i yarn -g // 如果没有安装yarn，需先安装yarnyarn 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 -Syarn 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' // 引入routerimport './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