npm插件安装相关解析

一. npm init -y

命令的作用是: 对项目进行初始化操作,对包进行管理

-y 的含义:yes的意思,在init的时候省去了敲回车的步骤,生成的默认的package.json

如果不想使用默认的package.json,可以用npm init来自定义

二. npm install -D -S -g的区别

npm install 后缀写入到适用打包环境举例
-D、–save-devdevDependencies对象开发环境babel,sass-loader,gulp ,webpack
-S、–savedependencies对象生产环境axios,当无后缀时,默认 -S
-g全局安装vue

三.全局安装和本地安装

1. 全局安装

全局安装的包可提供直接执行的命令(例:gulp -h可以查看gulp定义了什么命令)。 比如gulp全局安装后,可以在命令行上直接执行gulp -v、gulp -h等(原理:全局安装的gulp会将其package.json中的bin命令注入到了全局环境,使得你可以全局执行:gulp xxx命令,这另一个话题了,不深入)。倘若只在本地安装了gulp,未在全局安装gulp,直接执行这些命令会报错。你想要执行相应的命令则可能需要例如:node ./node_modules/gulp/bin/gulp.js -v(查看版本) 这样用一大串命令来执行。因此全局安装就发挥到他的好处了,一个gulp -v就搞定

当然,不是每个包都必须要全局安装的,一般在项目中需要用到该包定义的命令才需要全局安装。比如gulp 执行gulp任务…等,所以是否需要全局安装取决于我们如何使用这个包。全局安装的就像全局变量有点粗糙,但在某些情况下也是必要的,全局包很重要,但如果不需要,最好避免使用。

2. 本地安装

(1)如果只是全局安装了而没本地安装,就得require(‘’) 例:引入一个全局的包可能就是requirt(‘/usr/local/…’)通过全局包的路径引入,这样显然十分的不灵活。如果安装了本地包,那么就可以直接require(‘’)引入使用。
(2)一个包通常会在不同的项目上会重复用到,如果只全局安装,那么当某个项目需要该包更新版本时,更新后可能就会影响到其他同样引用该包的项目,因此本地安装可以更灵活地在不同的项目使用不同版本的包,并避免全局包污染的问题,

要用到该包的命令执行任务的就需要全局安装,要通过require引入使用的就需要本地安装

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI中的Scrollbar插件是基于perfect-scrollbar封装的一个自定义滚动条组件,用于替代浏览器原生的滚动条。它可以实现更加美观、灵活的滚动效果,并且支持横向和纵向的滚动。 使用方法如下: 1.安装依赖 ``` npm install element-ui@2.0.11 --save ``` 2.在Vue项目中引入ElementUI ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3.在需要使用Scrollbar组件的页面中引入 ```javascript import { Scrollbar } from 'element-ui' ``` 4.在模板中使用Scrollbar组件 ```html <el-scrollbar wrap-class="scrollbar-wrap" view-class="scrollbar-view" style="height: 200px;"> <div class="content"> <!-- 滚动内容 --> </div> </el-scrollbar> ``` 其中,`wrap-class`和`view-class`分别用于设置滚动条的外层和内层样式类名,`style`用于设置滚动条的高度。 完整的Scrollbar配置项如下: | 属性名 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | wrap-class | String | '' | 自定义外层样式类名 | | view-class | String | '' | 自定义内层样式类名 | | noresize | Boolean | false | 是否禁用resize事件 | | tag | String | 'div' | 组件标签名 | | native | Boolean | false | 是否使用原生滚动条 | | wrap-style | Object | {} | 自定义外层样式 | | view-style | Object | {} | 自定义内层样式 | | wrap-click | Boolean | false | 外层元素是否响应click事件 | | horizontal | Boolean | false | 是否开启横向滚动 | | maxHeight | String, Number | '' | 最大高度,滚动区域超过该高度时出现滚动条 | | minimalThumbsize | Number | 20 | 最小拖动条尺寸 | | disabled | Boolean | false | 是否禁用滚动条 | 注意事项: 1. 在使用Scrollbar时,需要给外层元素设置固定高度或者最大高度,否则Scrollbar会失效。 2. 如果需要在横向滚动时自动隐藏滚动条,可以设置`wrap-style`和`view-style`的`overflow-x`属性为`hidden`。 3. 如果需要在纵向滚动时自动隐藏滚动条,可以设置`wrap-style`和`view-style`的`overflow-y`属性为`hidden`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值