第三方库集成
1.1 配置 vue.config.js
方式一：直接通过CLI提供给我们的选项来配置：
- 比如publicPath：配置应用程序部署的子目录（默认是 /，相当于部署在 https://www.my-app.com/）；
- 比如outputDir：修改输出的文件夹；
方式二：通过configureWebpack修改webpack的配置：
- 可以是一个对象，直接会被合并；
- 可以是一个函数，会接收一个config，可以通过config来修改配置；
方式三：通过chainWebpack修改webpack的配置：
因为项目是在node环境下运行的，这里使用 CommonJS 规范。
1.2 vue-router 集成
安装 vue-router
yarn add vue-router@next #或者用npm也可以 npm install vue-router@next
创建跳转页面：
创建router对象
import { createRouter, createWebHashHistory } from 'vue-router' import { RouteRecordRaw } from 'vue-router' const routes: RouteRecordRaw[] = [ { path: '/', redirect: '/main' }, { path: '/main', component: () => import('../views/main/main.vue') }, { path: '/login', component: () => import('../views/login/login.vue') } ] const router = createRouter({ routes, history: createWebHashHistory() }) export default router
在 mian.ts中注册路由
在App.vue 中测试是否跳转：
<template> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/main">首页</router-link> <router-view></router-view> </div> </template>
1.3 vuex 集成
安装 vuex
yarn addvuex@nex
创建 store （@/store/mian.ts)
import { createStore } from 'vuex' const store = createStore({ state() { return { name: 'evla' } } }) export default store
在 mian.ts中注册 vuex
在App.vue 中测试使用：
1.4 element-plus 集成
Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库：
- element-ui是主要在vue2中使用的，而element-plus正是element-ui针对于vue3开发的一个UI组件库；
- 它的使用方式和很多其他的组件库是一样的，所以学会element-plus，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；
安装 element-plus
yarn add element-plus # npm install element-plus
全局引入
//main.ts目录下 import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app')
局部引入
单独引入某一组件+样式是比较麻烦的，这里采用官网提供的按需引入的做法。
1.安装 babel 插件
yarn add babel-plugin-import -D
2.配置 babel.config.js
module.exports = { plugins: [ [ 'import', { libraryName: 'element-plus', customStyleName: (name) => { return `element-plus/lib/theme-chalk/${name}.css` } } ] ], presets: ['@vue/cli-plugin-babel/preset'] }
这里为了以后方便，我们直接采用全局注册，但是需要做封装处理。
import 'element-plus/dist/index.css' import { App } from 'vue' // 引入组件 import { ElButton, ElCheckbox, ElForm, ElFormItem, ElInput, ElLink, ElRadio, ElTabPane, ElTabs } from 'element-plus' // 注册组件 const components = [ ElButton, ElForm, ElFormItem, ElInput, ElRadio, ElTabs, ElTabPane, ElCheckbox, ElLink ] export default function (app: App): void { for (const component of components) { app.component(component.name, component) } }
最后测试
<template> <div class="app"> <h2>{{ $store.state.name }}</h2> <router-link to="/login">登录</router-link> <router-link to="/main">首页</router-link> <router-view></router-view> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </div> </template>
1.5 axios 集成
因为集成比较复杂，单独抽出成另外一篇文章
![[译] 用 Typescript + Composition API 重构 Vue 3 组件](https://ucc.alicdn.com/hid5ykfodc62m_20240829_e496cb22e4e94454b6319d817d78e968.webp?x-oss-process=image/resize,h_160,m_lfit)