vue项目开发常用的依赖

无知的小菜鸡

已于 2022-05-22 10:55:06 修改

阅读量3.5k

点赞数 1

分类专栏： vue基础文章标签： vue.js javascript 前端

于 2020-07-24 21:58:01 首次发布

本文链接：https://blog.csdn.net/weixin_41897680/article/details/107560873

版权

vue基础专栏收录该内容

68 篇文章 13 订阅

订阅专栏

声明：这是目前碰到过的，后续还会补充

element ui
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

axios
用于发起Ajax请求，设置拦截请求和响应等
学习文章：axios的基本使用

babel-plugin-syntax-dynamic-import
路由懒加载时用到的组件，把不同路由对应的组件分割成不同代码块，然后当路由被访问时才加载对应组件
文档：路由懒加载

less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展

less-loader
处理scss，将less编译为css

nprogress页面加载进度条
nprogress 虚拟进度条可以在axios请求拦截器中和响应拦截器的时候或者
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})

router.afterEach(() => {
NProgress.done()
})
中使用，会有一个页面加载的动画效果

vue-quill-editor
基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用
注：引入文章中样式时，就用原生scc，less和scss不支持
推荐文章

tinymce 富文本组件
功能更多，支持vue3

传送门

echarts
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求（注：使用Apache版的）

v-distpicker
省市区/县级联选择插件，就是用来选择省、市、区的

babel-plugin-transform-remove-console

作用：用于项目builder阶段，将项目中的console函数移除
地址：传送门
使用：在babel.config.js中的plugins中进行修改，使其只在发布阶段（build）中移除console函数，在开发阶段（serve）不移除console函数

//这是项目发布阶段需要用到的babel插件
const prodPlugins = []
// 生产环境移除console
if (process.env.NODE_ENV === 'production') {
	prodPlugins.push("transform-remove-console")
}

module.exports = {
	"presets": [
		"@vue/app"
	],
	"plugins": [
		[
			"component",
			{
				"libraryName": "element-ui",
				"styleLibraryName": "theme-chalk"
			}
		],
		//发布产品时候的插件数组
		...prodPlugins
	]
}