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
