sass使用
npm i node-sass sass-loader@10.2.0 --save-dev
因为当前sass的版本太高，webpack编译时出现了错误，所以指定：npm install sass-loader@10.2.0 --save-dev 安装低版本的。
axios
特别好用的网络请求的封装
npm install axios
echarts的使用
当项目中需要使用图表
vue-echarts
npm install echarts vue-echarts
使用
const app = createApp(App) import VueEcharts from 'vue-echarts' app.component("vue-echarts", VueEcharts)
ecomfe.github.io/vue-echarts…v-charts
npm i v-charts echarts -S
使用vue2中
// 引入 import VCharts from 'v-charts' import 'v-charts/lib/style.css' // 注册插件 Vue.use(VCharts)
v-charts由于不在维护，vue3不能使用。在vue2中使用还是挺方便的。
注意：安装的时候，由于没有在维护，可能会出现版本不兼容问题。建议安装一下版本的v-charts和echart
"echarts": "^4.9.0", "v-charts": "^1.19.0", "vue": "^2.6.11", "vue-echarts": "^5.0.0-beta.0",
element-plus组件库
npm install element-plus --save
按需加载
npm install babel-plugin-import -D
// babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'import', { libraryName: 'element-plus', // 引入组件 customName: name => { name = name.slice(3) return `element-plus/lib/components/${name}` }, // 引入样式 customStyleName: name => { name = name.slice(3) // 如果你需要引入 [name].scss 文件，你需要用下面这行 // return `element-plus/lib/components/${name}/style` // 引入 [name].css return `element-plus/lib/components/${name}/style/css` }, }, ], ], }
使用
import 'element-plus/dist/index.css' import {ElButton} from 'element-plus' const app = createApp(App) app.use(ElButton)
moment时间格式化
非常方便的一个事件格式化的js库
npm install moment --save
使用，返回传入的时间和现在相差多久。
// 转化为中文 moment.locale('zh-cn') moment(时间戳).startOf('hour').fromNow()
加载请求进度条
当请求数据时，会在窗口的头部出现加载进度条，增强了用户体验
npm install --save nprogress
引入加载进度条样式
//引入加载条样式 import 'nprogress/nprogress.css' import 'element-plus/lib/theme-chalk/index.css';
封装的请求方法
import axios from 'axios' import NProgress from 'nprogress' function request (config) { const instance = axios.create({ baseURL: 'http://127.0.0.1:7001', timeout: 5000 }) // 添加加载条样式 // axios请求拦截器 instance.interceptors.request.use( req => { NProgress.start() // 设置加载进度条(开始..) return req }, error => { return Promise.reject(error) } ) // axios响应拦截器 instance.interceptors.response.use( function (res) { NProgress.done() // 设置加载进度条(结束..) if (res.data.status === 200) { return res.data.data } else { return "请求错误" } }, function (error) { return Promise.reject(error) } ) return instance(config) } export default request
mitt 自定义事件
npm install --save mitt
由于vue3移除了自定义事件相关api。所以使用mitt非常方便。
import mitt from 'mitt' const emitter = mitt() // 发送事件 emitter.emit("字符串事件名", 参数) // 定义事件 emitter.on('字符串事件名', 回调函数)
marked 转化markdown到html
npm install marked
使用, 他可以提供很多辅助功能，当开发个人博客网站的时候编辑文章的时候很有用。
marked(markedText);
highlight.js 高亮代码片段
npm install highlight.js
使用：结合marked来高亮code片段。
vditor 一个非常好用的富文本编辑器
npm install vditor
