vue前端项目第三方库集成

2022-10-19 13:07:11

第三方库集成

1.1 vue.config.js配置

vue.config.js有三种配置方式:

  • 方式一:直接通过CLI提供给我们的选项来配置:Vue CLI的API
    • 比如publicPath:配置应用程序部署的子目录(默认是/,相当于部署在https://www.my-app.com/);
    • 比如outputDir:修改输出的文件夹;
  • 方式二:通过configureWebpack修改webpack的配置:
    • 可以是一个对象,直接会被合并;
    • 可以是一个函数,会接收一个config,可以通过config来修改配置;
  • 方式三:通过chainWebpack修改webpack的配置:
    • 是一个函数,会接收一个基于webpack-chain 的config对象,可以对配置进行修改;
const path=require('path')
module.exports={
  outputDir:'./build',// configureWebpack: {//   resolve: {//     alias: {//       views: '@/views'//     }//   }// }// configureWebpack: (config) => {//   config.resolve.alias = {//     '@': path.resolve(__dirname, 'src'),//     views: '@/views'//   }// },chainWebpack:(config)=>{
    config.resolve.alias.set('@', path.resolve(__dirname,'src')).set('views','@/views')}}

2.2. vue-router集成;配置路由

安装vue-router的最新版本:

npminstall vue-router@next

新建router.ts文件,创建router对象:

import{ createRouter, createWebHashHistory}from'vue-router';import{ RouteRecordRaw}from'vue-router';// routes的类型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()})exportdefault router

安装router

import routerfrom'./router';createApp(App).use(router).mount('#app');

在App.vue中配置跳转:

<template><divid="app"><router-linkto="/login">登录</router-link><router-linkto="/main">首页</router-link><router-view></router-view></div></template>

2.3. vuex集成;

安装vuex:

npminstall vuex@next

创建store对象:

import{ createStore}from'vuex'const store=createStore({state(){return{
      name:'coderwhy'}}})exportdefault store

安装store

createApp(App).use(router).use(store).mount('#app')

App.vue中使用:

<h2>{{ $store.state.name }}</h2>

2.4. element-plus集成

Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库:

  • 相信很多同学在Vue2中都使用过element-ui,而element-plus正是element-ui针对于vue3开发的一个UI组件库;
  • 它的使用方式和很多其他的组件库是一样的,所以学会element-plus,其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的;

安装element-plus

npminstall element-plus

2.4.1. 全局引入

一种引入element-plus的方式是全局引入,代表的含义是所有的组件和插件都会被自动注册:

import ElementPlusfrom'element-plus';import'element-plus/lib/theme-chalk/index.css';// element-plus组件库的样式import routerfrom'./router';import storefrom'./store';createApp(App).use(router).use(store).use(ElementPlus).mount('#app');

2.4.2. 局部引入

也就是在开发中用到某个组件对某个组件进行引入:

<template><divid="app"><router-linkto="/login">登录</router-link><router-linkto="/main">首页</router-link><router-view></router-view><h2>{{ $store.state.name }}</h2><el-button>默认按钮</el-button><el-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el-button><el-buttontype="info">信息按钮</el-button><el-buttontype="warning">警告按钮</el-button><el-buttontype="danger">危险按钮</el-button></div></template><scriptlang="ts">import{ defineComponent}from'vue'import{ ElButton}from'element-plus'exportdefaultdefineComponent({name:'App',components:{
    ElButton}})</script><stylelang="less"></style>

但是我们会发现是没有对应的样式的,引入样式有两种方式:

  • 全局引用样式(像之前做的那样);
  • 局部引用样式(通过babel的插件);

1.安装babel的插件:

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

但是这里依然有个弊端:

  • 这些组件我们在多个页面或者组件中使用的时候,都需要导入并且在components中进行注册;
  • 所以我们可以将它们在全局注册一次;
import{
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,}from'element-plus'const app=createApp(App);// 添加组件const components=[
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge]for(const cpnof components){
  app.component(cpn.name, cpn)}

2.5. axios集成

安装axios:

npminstall axios

封装axios:

import axios,{ AxiosInstance, AxiosRequestConfig, AxiosResponse}from'axios';import{ Result}from'./types';import{ useUserStore}from'/@/store/modules/user';classHYRequest{private instance: AxiosInstanceprivatereadonly options: AxiosRequestConfigconstructor(options: AxiosRequestConfig){this.options= optionsthis.instance= axios.create(options)this.instance.interceptors.request.use((config)=>{const token=useUserStore().getTokenif(token){
          config.headers.Authorization=`Bearer${token}`}return config},(err)=>{return err})this.instance.interceptors.response.use((res)=>{// 拦截响应的数据if(res.data.code===0){return res.data.data}return res.data},(err)=>{return err})}request<T=any>(config: AxiosRequestConfig):Promise<T>{returnnewPromise((resolve, reject)=>{this.instance.request<any, AxiosResponse<Result<T>>>(config).then((res)=>{resolve((resasunknown)asPromise<T>)}).catch((err)=>{reject(err)})})}get<T=any>(config: AxiosRequestConfig):Promise<T>{returnthis.request({...config, method:'GET'})}post<T=any>(config: AxiosRequestConfig):Promise<T>{returnthis.request({...config, method:'POST'})}patch<T=any>(config: AxiosRequestConfig):Promise<T>{returnthis.request({...config, method:'PATCH'})}delete<T=any>(config: AxiosRequestConfig):Promise<T>{returnthis.request({...config, method:'DELETE'})}}exportdefault HYRequest

2.6. VSCode配置

{"workbench.iconTheme":"vscode-great-icons","editor.fontSize":17,"eslint.migration.2_x":"off","[javascript]":{"editor.defaultFormatter":"dbaeumer.vscode-eslint"},"files.autoSave":"afterDelay","editor.tabSize":2,"terminal.integrated.fontSize":16,"editor.renderWhitespace":"all","editor.quickSuggestions":{"strings":true},"debug.console.fontSize":15,"window.zoomLevel":1,"emmet.includeLanguages":{"javascript":"javascriptreact"},"explorer.confirmDragAndDrop":false,"workbench.tree.indent":16,"javascript.updateImportsOnFileMove.enabled":"always","editor.wordWrap":"on","path-intellisense.mappings":{"@":"${workspaceRoot}/src"},"hediet.vscode-drawio.local-storage":"eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWM7YXJyb3dzMjtmbG93Y2hhcnQ7ZXI7c2l0ZW1hcDt1bWw7YnBtbjt3ZWJpY29uc1wiLFwiY3VzdG9tTGlicmFyaWVzXCI6W1wiTC5zY3JhdGNocGFkXCJdLFwicGx1Z2luc1wiOltdLFwicmVjZW50Q29sb3JzXCI6W1wiRkYwMDAwXCIsXCIwMENDNjZcIixcIm5vbmVcIixcIkNDRTVGRlwiLFwiNTI1MjUyXCIsXCJGRjMzMzNcIixcIjMzMzMzM1wiLFwiMzMwMDAwXCIsXCIwMENDQ0NcIixcIkZGNjZCM1wiLFwiRkZGRkZGMDBcIl0sXCJmb3JtYXRXaWR0aFwiOjI0MCxcImNyZWF0ZVRhcmdldFwiOmZhbHNlLFwicGFnZUZvcm1hdFwiOntcInhcIjowLFwieVwiOjAsXCJ3aWR0aFwiOjExNjksXCJoZWlnaHRcIjoxNjU0fSxcInNlYXJjaFwiOnRydWUsXCJzaG93U3RhcnRTY3JlZW5cIjp0cnVlLFwiZ3JpZENvbG9yXCI6XCIjZDBkMGQwXCIsXCJkYXJrR3JpZENvbG9yXCI6XCIjNmU2ZTZlXCIsXCJhdXRvc2F2ZVwiOnRydWUsXCJyZXNpemVJbWFnZXNcIjpudWxsLFwib3BlbkNvdW50ZXJcIjowLFwidmVyc2lvblwiOjE4LFwidW5pdFwiOjEsXCJpc1J1bGVyT25cIjpmYWxzZSxcInVpXCI6XCJcIn0ifQ==","hediet.vscode-drawio.theme":"Kennedy","editor.fontFamily":"Source Code Pro, 'Courier New', monospace","editor.smoothScrolling":true,"editor.formatOnSave":true,"editor.defaultFormatter":"esbenp.prettier-vscode","workbench.colorTheme":"Atom One Dark","vetur.completion.autoImport":false,"security.workspace.trust.untrustedFiles":"open","eslint.lintTask.enable":true,"eslint.alwaysShowStatus":true,"editor.codeActionsOnSave":{"source.fixAll.eslint":true}}
  • 作者:wendyTan10
  • 原文链接:https://blog.csdn.net/weixin_42369598/article/details/125669016
    更新时间:2022-10-19 13:07:11