h5制作_手机小程序怎么做_h5页面制作软件app_免费h5游戏制作平台_h5九宫格
当前位置:建站首页 > 新闻资讯 > 常见问题 >

NPM的一些普遍应用方式

发表日期:2021-04-04 10:52文章编辑:jianzhan浏览次数: 标签:    

Author:flymoo Source:飘易blog
Categories:互联网技术性 PostTime::28

本文纪录一些 NPM 在平时应用的全过程中碰到的一些难题和应用感受。


npm 版本号号:

npm -v


学习培训npm

Usage: mand


    access, adduser, audit, bin, bugs, c, cache, ci, cit,

    clean-install, clean-install-test, completion, config,

    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,

    edit, explore, get, help, help-search, hook, i, init,

    install, install-ci-test, install-test, it, link, list, ln,

    login, logout, ls, org, outdated, owner, pack, ping, prefix,

    profile, prune, publish, rb, rebuild, repo, restart, root,

    run, run-script, s, se, search, set, shrinkwrap, star,

    stars, start, stop, t, team, test, token, tst, un,

    uninstall, unpublish, unstar, up, update, v, version, view,

    whoami


npm  command  -h quick help on  command 
npm -l display full 
npm help  term  search for help on  term 
npm help npm involved overview

常见npm命令:


拆换阿里巴巴镜像系统

npm config set registry p>


查询镜像系统详细地址

npm config get registry


原始化新项目

npm init目地是转化成package.json文档,一直按回车键就可以了

该指令会了解这个新项目的基本资料,例如新项目名、创作者、叙述、Git库房等,假如你没想敲回车键,还可以立即应用

npm init -y


安裝包(先cd到包所属文件目录)

npm install(等额的于 npm i)

实例 

npm install axios -S(-S 等效电路 --save,添加宣布依靠dependencies)
npm install less (没有主要参数,默认设置会添加宣布依靠dependencies)
npm install sass --save-dev (等效电路 -D,会添加开发设计依靠devDependencies)
npm install 控制模块名 -g 全局性安裝(不用g则默认设置当地安裝)


大量instal指令:

npm install (with no args, in package dir)
npm install [ @scope /] pkg 
npm install [ @scope /] pkg @ tag 
npm install [ @scope /] pkg @ version 
npm install [ @scope /] pkg @ version range 
npm install  folder 
npm install  tarball file 
npm install  tarball url 
npm install  git:// url 
和static文档夹等,把他们拷贝到HTTP新项目文件目录一下吧。



起动虚似服务

npm run start

package.json里的scripts脚本制作里需配备start便捷方法。



查询新项目中控制模块所属的文件目录

npm root

查询全局性安裝的控制模块所属文件目录

npm root -g


查询某一包针对各种各样包的依靠关联

npm view 控制模块名 dependencies


升级node控制模块

npm update 控制模块名

自然你还可以update 该控制模块到特定版本号

npm update 控制模块名 @版本号号

假如安裝到全新版本号可使用于下指令

npm install ;


卸载掉node控制模块

npm uninstall 控制模块名


检索控制模块

npm search express


显示信息包信息内容

npm view vue


列举依靠项

npm ls


限定依靠项的等级

npm ls --depth=0



常见包

npm install --save lodash //轻量的JavaScript专用工具涵数库

npm install --save-dev webpack-dev-server //应用webpack搭建当地网络服务器

起动网络服务器时,假如错误:Module not found: Error: Can t resolve webpack/hot ,那麼必须在新项目文件目录下安裝webpack:

npm install webpack(不用-g)


// 安裝Babel

npm install --save-dev babel---preset-env babel-preset-react

// 安裝css-loader 和 style-loader

npm install --save-dev style-loader css-loader



webpack学习培训

webpack——devtool里的7种SourceMap方式

开发设计自然环境强烈推荐:

cheap-module-eval-source-map


生产制造自然环境强烈推荐:

cheap-module-source-map


安裝 Webpack

npm install webpack -g

npm install webpack-cli -g


装包

webpack 1.js 2.js --output bundle.js

webpack-cli src/index.js --output dist/bundle.js



vant 应用

* 安裝vue-cli

npm install -g @vue/cli


# 建立一个新项目

vue create hello-world


* 安裝vant

npm i vant -S


* 安裝全自动按需引进软件

npm i babel-plugin-import -D


随后在.babelrc 中加上配备

// 留意:webpack 1 不用设定 libraryDirectory

{

  plugins : [

    [ import , {

      libraryName : vant ,

      libraryDirectory : es ,

      style : true

    }]

  ]

}


* 导进全部部件

Vant 适用一次性导进全部部件,引进全部部件会提升编码包容积,因而不强烈推荐这类作法


import Vue from vue

import Vant from vant

import vant/lib/index.css


Vue.use(Vant);

留意:配备 babel-plugin-import 软件后,将不容许以这类方法导进部件



* 安裝必需的部件

npm install axios -S



avue 新项目建立:

# 建立一个新项目

vue create hello-world


出現Please pick a preset:

default (babel, eslint)  //默认设置(默认设置选这一)

Manually select features //手动式挑选作用


# 安裝 avue

npm i @smallwei/avue -S


# 调节运作当地网络服务器

npm run serve


# 装包-生产制造

npm run build


装包时的低版本号安卓系统手机上适配难题:

* vue-cli 装包时 js 转es5,适配低版本号手机上;


AVUE BUG?:

后台管理的照片相对路径是标识符串方式的情况下,当不了传一切照片时,递交的是空数据信息(null),提交照片后,递交的是标识符串,因此后台管理解决的情况下要非常解决这一NULL值。

{
 label:  照片 ,
 prop:  filepaths ,
 type:  upload ,
 accept: [ image/jpeg , image/png ],
 dataType:  string ,//标识符串照片组
 hide: true,
 row: true,
 span: 24,
 multiple: true,//文档选取
 listType:  picture-card ,
 propsHttp: {
 home:  / 提交取得成功的文档键名
 },
 limit: 9,
 fileSize: 500*1024,//提交文档尺寸
 tip:  只有提交jpg/png文档,且不超出505kb ,
 action: `${this.baseUrl}/upload/upload`
 }

软件包 avue-plugin-ueditor

编写器 avue-plugin-ueditor 是根据wangeditor二次开发设计的。

1、编写器当地提交时提升home主要参数

{

            label: 內容 ,

            prop: content ,

            component: avueUeditor ,

            options:{

              //一般照片提交

              action: `${this.baseUrl}/upload/upload`,

              props: {

                home: p>

                url: file // 提交取得成功的文档键名

              }

            }

}


改动(新网络服务器安裝时,遮盖该文档):

node_modules\avue-plugin-ueditor\packages\ueditor\src\main.vue

190行提升:

// 提升home主要参数 - flymoo 2020.6.11

if(this.props.home) result = this.props.home + result;


2、自定小表情

node_modules\avue-plugin-ueditor\packages\ueditor\src\main.vue

127行提升自定小表情

this.editor.customConfig.emotions


3、改动成本费地依靠

把 avue-plugin-ueditor 依靠包改为当地管理方法的方法:

方式1、安裝当地依靠包的方法:

npm install --save file:file:src/local_node_modules/avue-plugin-ueditor


方式2、立即改动 package.json ,提升依靠:

 avue-plugin-ueditor :  file:src/local_node_modules/avue-plugin-ueditor ,


END.

相关新闻

Google营销推广成我国公司做营销推广的优选

亚洲地区较大的.COM网站域名申请注册商、中国著名的网络推广服务提供商 我国频道栏目 前不...

日期:2021-04-03 浏览次数:172

上海市公司企业网站建设中的16条留意事宜

上海市公司企业网站建设中的16条留意事宜 访问: 品创互联网 企业做为技术专业的上海市互...

日期:2021-04-02 浏览次数:65

400号码的五大优点

400号码的五大优点 2019-09-23 创作者:admin 阅读文章: 1、提高公司知名品牌品牌形象一个好...

日期:2021-04-01 浏览次数:93

企业网站建设文件格式的详细介绍

企业网站建设文件格式的详细介绍引言:静态数据网页页面 网站静态数据分成二种:伪静态数...

日期:2021-04-01 浏览次数:168

重要词相对密度测算公式计算是如何的?(SEO提升

每一个网页页面中的关键重要词最好仅有一个,随后全部內容都紧紧围绕这一重要词进行,才...

日期:2021-04-01 浏览次数:79

哪些的人合适做客户感受?

在做客户感受时,你没必变成一个杰出的设计方案师。你只必须去解决不尽人意的设计方案,...

日期:2021-03-30 浏览次数:131