常用npm package使用
source link: https://lianpf.github.io/posts/%E5%BC%80%E5%8F%91%E6%97%A5%E8%AE%B0/19.%E5%B8%B8%E7%94%A8npm-package%E4%BD%BF%E7%94%A8/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
使用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
代码编辑器
二、前端框架
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 runtime-import
前端资源(js & css)运行时加载工具. https://www.npmjs.com/package/runtime-import
2、监控日志
2.1 source-map
源文件解析Source Map
最后, 希望大家早日实现:成为前端高手的伟大梦想!
欢迎交流~
本文版权归原作者曜灵所有!未经允许,严禁转载!对非法转载者, 原作者保留采用法律手段追究的权利!
若需转载,请联系微信公众号:连先生有猫病,可获取作者联系方式!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK