第三方库集成
1.1 vue.config.js配置
vue.config.js有三种配置方式:
- 方式一:直接通过CLI提供给我们的选项来配置:Vue CLI的API
- 比如publicPath:配置应用程序部署的子目录(默认是
/
,相当于部署在https://www.my-app.com/
); - 比如outputDir:修改输出的文件夹;
- 比如publicPath:配置应用程序部署的子目录(默认是
- 方式二:通过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}}