日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前言

專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來(lái)客戶和效益!成都創(chuàng)新互聯(lián)為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計(jì)制作，服務(wù)好的網(wǎng)站設(shè)計(jì)公司，成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)負(fù)責(zé)任的成都網(wǎng)站制作公司!

在此之前，你需要去npm官網(wǎng)注冊(cè)一個(gè)屬于自己的賬號(hào)，記住自己的賬戶名以及密碼、郵箱，后面會(huì)用的到。

第一步，安裝webpack簡(jiǎn)易框架

 
 
 
 

  
  
  
  
vue init webpack-simple marquee 
 
 
 
 

第二步，封裝Vue插件

1、安裝完成后，會(huì)出現(xiàn)以下目錄即可成功

 
 
 
 

  
  
  
  
marquee/ 
  
  
  
  
├── index.html 
  
  
  
  
├── package.json 
  
  
  
  
├── README.md 
  
  
  
  
├── .babelrc 
  
  
  
  
├── .editorconfig 
  
  
  
  
├── .gitignore 
  
  
  
  
├── src 
  
  
  
  
│   ├── App.vue 
  
  
  
  
│   ├── assets 
  
  
  
  
│   │   └── logo.png 
  
  
  
  
│   └── main.js 
  
  
  
  
└── webpack.config.js 
 
 
 
 

2、接下來(lái)，我們?cè)趕rc文件夾下創(chuàng)建一個(gè)名叫marquee的文件夾，在文件夾里面創(chuàng)建marquee.vue和index.js

 
 
 
 

  
  
  
  
marquee/ 
  
  
  
  
├── index.html 
  
  
  
  
├── package.json 
  
  
  
  
├── README.md 
  
  
  
  
├── .babelrc 
  
  
  
  
├── .editorconfig 
  
  
  
  
├── .gitignore 
  
  
  
  
├── src 
  
  
  
  
│   ├── App.vue 
  
  
  
  
│   ├── marquee 
  
  
  
  
│   │   └── marquee.vue 
  
  
  
  
│   │   └── index.js 
  
  
  
  
│   ├── assets 
  
  
  
  
│   │   └── logo.png 
  
  
  
  
│   └── main.js 
  
  
  
  
└── webpack.config.js 
 
 
 
 

3、開(kāi)始在marquee.vue封裝Vue插件了

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
  .marquee-wrap { 
  
  
  
  
    width: 100%; 
  
  
  
  
    overflow: hidden; 
  
  
  
  
    position: relative; 
  
  
  
  
  } 
  
  
  
  
  .marquee{ 
  
  
  
  
    margin-right: 16px; 
  
  
  
  
  } 
  
  
  
  
  p { 
  
  
  
  
    word-break:keep-all; 
  
  
  
  
    white-space: nowrap; 
  
  
  
  
    font-size: 16px; 
  
  
  
  
    font-family: "微軟雅黑 Light"; 
  
  
  
  
  } 
  
  
  
  
  .scroll { 
  
  
  
  
    display: flex; 
  
  
  
  
  } 
  
  
  
  
  .getWidth { 
  
  
  
  
    word-break:keep-all; 
  
  
  
  
    white-space:nowrap; 
  
  
  
  
    position: absolute; 
  
  
  
  
    opacity: 0; 
  
  
  
  
    top: 0; 
  
  
  
  
  } 
  
  
  
  
 
 
 
 
 

 4、為了方便查看效果，可以在App.vue先引入組件查看效果

5、啟動(dòng)命令，查看效果

 
 
 
 

  
  
  
  
npm install 
  
  
  
  
npm run dev 
 
 
 
 

第三步，發(fā)布Vue插件前配置

1、編輯marquee文件夾下的index.js

 
 
 
 

  
  
  
  
marquee/ 
  
  
  
  
├── index.html 
  
  
  
  
├── package.json 
  
  
  
  
├── README.md 
  
  
  
  
├── .babelrc 
  
  
  
  
├── .editorconfig 
  
  
  
  
├── .gitignore 
  
  
  
  
├── src 
  
  
  
  
│   ├── App.vue 
  
  
  
  
│   ├── marquee 
  
  
  
  
│   │   └── marquee.vue 
  
  
  
  
│   │   └── index.js 
  
  
  
  
│   ├── assets 
  
  
  
  
│   │   └── logo.png 
  
  
  
  
│   └── main.js 
  
  
  
  
└── webpack.config.js 
 
 
 
 

index.js

 
 
 
 

  
  
  
  
// index.js 
  
  
  
  
 
  
  
  
  
// 引入組件 
  
  
  
  
import marquee from './marquee'; 
  
  
  
  
// 組件需要添加name屬性，代表注冊(cè)的組件名稱，也可以修改成其他的 
  
  
  
  
marquee.install = Vue => Vue.component(marquee.name, marquee); //注冊(cè)組件 
  
  
  
  
 
  
  
  
  
export default marquee; 
 
 
 
 

2、修改webpack.config.js

 
 
 
 

  
  
  
  
const NODE_ENV = process.env.NODE_ENV; 
  
  
  
  
module.exports = { 
  
  
  
  
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/marquee/index.js', 
  
  
  
  
  output: { 
  
  
  
  
    path: path.resolve(__dirname, './dist'), 
  
  
  
  
    publicPath: '/dist/', 
  
  
  
  
    filename: 'marquee.js', //輸出文件名 
  
  
  
  
    library: 'marquee', // 指定的就是你使用require時(shí)的模塊名 
  
  
  
  
    libraryTarget: 'umd', // 指定輸出格式， UMD 同時(shí)支持兩種執(zhí)行環(huán)境：node環(huán)境、瀏覽器環(huán)境。 
  
  
  
  
    umdNamedDefine: true // 會(huì)對(duì) UMD 的構(gòu)建過(guò)程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define 
  
  
  
  
  }, 
  
  
  
  
} 
 
 
 
 

3、打包

 
 
 
 

  
  
  
  
npm run build 
 
 
 
 

如果成功的話，根目錄下會(huì)出現(xiàn)dist文件夾，里面分別是marquee.js和marquee.js.map

 
 
 
 

  
  
  
  
marquee/ 
  
  
  
  
├── dist 
  
  
  
  
│   ├── marquee.js 
  
  
  
  
│   ├── marquee.js.map 
  
  
  
  
├── index.html 
  
  
  
  
├── package.json 
  
  
  
  
├── README.md 
  
  
  
  
├── .babelrc 
  
  
  
  
├── .editorconfig 
  
  
  
  
├── .gitignore 
  
  
  
  
├── src 
  
  
  
  
│   ├── App.vue 
  
  
  
  
│   ├── marquee 
  
  
  
  
│   │   └── marquee.vue 
  
  
  
  
│   │   └── index.js 
  
  
  
  
│   ├── assets 
  
  
  
  
│   │   └── logo.png 
  
  
  
  
│   └── main.js 
  
  
  
  
└── webpack.config.js 
 
 
 
 

4、修改package.json

 
 
 
 

  
  
  
  
{ 
  
  
  
  
 "author": "maomincoding",  
  
  
  
  
  "main": "dist/marquee.js", 
  
  
  
  
  "license": "ISC", 
  
  
  
  
  "keywords": ["marquee"], 
  
  
  
  
  "private": false, 
  
  
  
  
} 
 
 
 
 

author的值為npm用戶名，這里一定要注意。main的值為你剛才打包的路徑文件license的值按照以上即可keywords為用戶搜索的關(guān)鍵詞private設(shè)為false, 開(kāi)源因此需要將這個(gè)字段改為 false

5、修改.gitignore

可以 刪除 dist/字段，提交的時(shí)候一并上傳上去。

 
 
 
 

  
  
  
  
.DS_Store 
  
  
  
  
node_modules/ 
  
  
  
  
dist/     
  
  
  
  
npm-debug.log 
  
  
  
  
yarn-error.log 
  
  
  
  
 
  
  
  
  
# Editor directories and files 
  
  
  
  
.idea 
  
  
  
  
*.suo 
  
  
  
  
*.ntvs* 
  
  
  
  
*.njsproj 
  
  
  
  
*.sln 
 
 
 
 

6、編輯README.md

這是你上傳之后的自述文件，可以在網(wǎng)頁(yè)上顯示，用的也是md語(yǔ)法，這里就不顯示代碼了，來(lái)張網(wǎng)頁(yè)圖示范，也可以直接去marquee查看說(shuō)明

第四步，npm包發(fā)布

1、在此之前，你一定要注意先查看登錄源，切換到根目錄下marquee/

 
 
 
 

  
  
  
  
npm config get registry 
 
 
 
 

如果是 https://registry.npm.taobao.org 那么，輸入以下命令，切換到http://registry.npmjs.org

 
 
 
 

  
  
  
  
npm config set registry=http://registry.npmjs.org 
 
 
 
 

切換淘寶源

 
 
 
 

  
  
  
  
npm config set registry=https://registry.npm.taobao.org 
 
 
 
 

2、登錄，輸入命令

 
 
 
 

  
  
  
  
npm login 
 
 
 
 

相繼輸入用戶名、密碼、郵箱?；剀?chē)出現(xiàn) Logged in as maomincoding on http://registry.npmjs.org,那么就登陸成功了

3、上傳發(fā)布

 
 
 
 

  
  
  
  
npm publish 
 
 
 
 

第五步，插件下載使用

替代marquee標(biāo)簽的文字橫向滾動(dòng)Vue插件

1、安裝

 
 
 
 

  
  
  
  
# install dependencies 
  
  
  
  
npm i marquee-components 
 
 
 
 

2、使用

在main.js引入

 
 
 
 

  
  
  
  
import marquee from 'marquee-components' 
  
  
  
  
Vue.use(marquee ); 
 
 
 
 

在頁(yè)面使用

val后加文字即可，當(dāng)超過(guò)文本容器長(zhǎng)度時(shí)，觸動(dòng)橫向滾動(dòng)效果。

第六步，npm包更新和撤銷(xiāo)

1、撤銷(xiāo)包

當(dāng)你想撤銷(xiāo)上傳的包時(shí)，你可以看看下面的說(shuō)明：撤銷(xiāo)的壞處：

• 1、根據(jù)規(guī)范，只有在發(fā)包的24小時(shí)內(nèi)才允許撤銷(xiāo)發(fā)布的包。
• 2、即使你撤銷(xiāo)了發(fā)布的包，發(fā)包的時(shí)候也不能再和被撤銷(xiāo)的包的名稱和版本重復(fù)了(即不能名稱相同，版本相同，因?yàn)檫@兩者構(gòu)成的唯一標(biāo)識(shí)已經(jīng)被“占用”了)
• 3、這里要說(shuō)一點(diǎn)，取消發(fā)布包可能并不像你想象得那么容易，這種操作是受到諸多限制的，撤銷(xiāo)發(fā)布的包被認(rèn)為是一種不好的行為(試想一下你撤銷(xiāo)了發(fā)布的包[假設(shè)它已經(jīng)在社區(qū)內(nèi)有了一定程度的影響]，這對(duì)那些已經(jīng)深度使用并依賴你發(fā)布的包的團(tuán)隊(duì)是件多么崩潰的事情!)

所以，慎行!!!

撤銷(xiāo)命令：

 
 
 
 

  
  
  
  
npm unpublish 包名 --force 
 
 
 
 

送給你一句官方說(shuō)的話

 
 
 
 

  
  
  
  
I sure hope you know what you are doing 
 
 
 
 

2、更新包

看到了撤銷(xiāo)的壞處，所以我推薦你更新包。更新包很簡(jiǎn)單，只需兩步：

(1)、打開(kāi)根目錄下的package.json找到version字段具體體現(xiàn)為："version":"a.b.c"

1.修復(fù)bug,小改動(dòng)，c加1 2.增加了新特性，但仍能向后兼容，b加1 3.有很大的改動(dòng)，無(wú)法向后兼容，a加1

(2)、根目錄下輸入npm publis

 
 
 
 

  
  
  
  
npm publish 
 
 
 
 

結(jié)語(yǔ)

這里是以發(fā)布Vue插件為例，你也可以單獨(dú)發(fā)布一個(gè)包。

1、輸入命令

 
 
 
 

  
  
  
  
npm init 
 
 
 
 

根據(jù)自己的情況輸入然后回車(chē)，會(huì)自動(dòng)生成一個(gè)package.json文件

 
 
 
 

  
  
  
  
{ 
  
  
  
  
  "name": "vue-cli-configjs", 
  
  
  
  
  "version": "2.0.0", 
  
  
  
  
  "description": "vue.config.js by vue-cli3+", 
  
  
  
  
  "main": "vue.config.js", 
  
  
  
  
  "scripts": { 
  
  
  
  
    "test": "echo \"Error: no test specified\" && exit 1" 
  
  
  
  
  }, 
  
  
  
  
  "keywords": [ 
  
  
  
  
    "vue-cli-config" 
  
  
  
  
  ], 
  
  
  
  
  "author": "maomincoding", 
  
  
  
  
  "license": "ISC" 
  
  
  
  
} 
 
 
 
 

2、然后建一個(gè)readme.md自述文件，用于說(shuō)明

3、最后發(fā)布即可

 
 
 
 

  
  
  
  
npm publish 
 
 
 
 

網(wǎng)頁(yè)標(biāo)題：npm發(fā)布包以及更新包還有需要注意的幾點(diǎn)問(wèn)題（這里以發(fā)布vue插件為例）
本文路徑：http://www.dlmjj.cn/article/dphddhc.html