使用npm package过程中,积累的一些依赖解决方案…
一、常规
1、node-sass
- 安装
Python 2.7
且配置环境变量 - 配置国内镜像
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install node-sass
2、monaco
代码编辑器
3、项目文档
4、core-js
JavaScript的模块化标准库,包括ECMAScript到2023的polyfill
二、前端框架
1、vue
1.1 vue-fragment
问题:Element中 菜单导航折叠后文字不隐藏
解决思路:
- 项目安装vue-fragment
npm install --save vue-fragment
- 在main.js中引入
// main.js
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
- 将
zMenu.vue
中的<div>
修改为<fragment>
即可
<!-- 视图层 -->
<el-menu style="width: 100%;" :collapse="isCollapse" :collapse-transition="false" background-color="#333" text-color="#fff">
<z-menu :menus="menus"></z-menu>
</el-menu>
<!-- zMenu.vue -->
<template>
<fragment>
<template v-for="menu in menus">
<el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.menuId + ''" :key="menu.menuId">
<template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{menu.menuName}}</span>
</template>
<z-menu :menus="menu.children"></z-menu>
</el-submenu>
<el-menu-item v-else :index="menu.menuId + ''" @click="handleRouter(menu)" :key="menu.menuId">
<i :class="menu.icon"></i>
<span slot="title">{{menu.menuName}}</span>
</el-menu-item>
</template>
</fragment>
</template>
<script>
export default {
name: 'zMenu', // 至关重要,就靠这个名字递归了
props: {
menus: {
type: Array,
default: function () {
return [];
},
required: false
}
},
methods: {
handleRouter(menu) {
// 跳转路由
this.$router.push(menu.route);
}
}
}
</script>
1.2 vue-contextmenujs
右键菜单
https://www.npmjs.com/package/vue-contextmenujs
1.3 Vue.Draggable
拖拽
https://www.npmjs.com/package/vuedraggable
1.4 vue-property-decorator
装饰器写法
https://www.npmjs.com/package/vue-property-decorator
1.5 el-tree-select
三、工程化
1、编译
1.1 runtime-import
前端资源(js & css)运行时加载工具. https://www.npmjs.com/package/runtime-import
2、监控日志
2.1 source-map
源文件解析Source Map
四、其他
1、patch-package
(修改源码补丁包)
源码的补丁包
patch-package
最后, 希望大家早日实现:成为编程高手的伟大梦想!
欢迎交流~
本文版权归原作者曜灵所有!未经允许,严禁转载!对非法转载者, 原作者保留采用法律手段追究的权利!
若需转载,请联系微信公众号:连先生有猫病,可获取作者联系方式!