【Vue3+TypeScript】---集成第三方库

2022-10-11 338

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3+TypeScript】---集成第三方库

第三方库集成

1.1 配置 vue.config.js

方式一：直接通过CLI提供给我们的选项来配置：

比如publicPath：配置应用程序部署的子目录（默认是 /，相当于部署在 https://www.my-app.com/）；
比如outputDir：修改输出的文件夹；

微信图片_20221011143547.png

方式二：通过configureWebpack修改webpack的配置：

可以是一个对象，直接会被合并；
可以是一个函数，会接收一个config，可以通过config来修改配置；

微信图片_20221011143701.png

方式三：通过chainWebpack修改webpack的配置：

微信图片_20221011143727.png

因为项目是在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中注册路由

微信图片_20221011144019.png

在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

微信图片_20221011144149.png

在App.vue 中测试使用：

微信图片_20221011144218.png

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

微信图片_20221011144347.png

全局引入

//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']
}

这里为了以后方便，我们直接采用全局注册，但是需要做封装处理。

微信图片_20221011144539.png

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 集成

因为集成比较复杂，单独抽出成另外一篇文章

【Vue3+TypeScript】---集成第三方库

第三方库集成

1.1 配置 vue.config.js

1.2 vue-router 集成

1.3 vuex 集成

1.4 element-plus 集成

1.5 axios 集成

热门文章

最新文章

相关课程

相关电子书

相关实验场景