一：首先創建一個基于vue+ts的新項目
二：接下來修改項目目錄
image
1、src目錄
src/index.ts
②、
src/component/index.ts
2、examples目錄
①、
測試目錄
三：接下來修改項目配置
1：需要增加一項名為‘LICENSE’的文件
有MIT license 等等，具體可自行百度
2：package.json文件
{
"name": "vue-phone-preview",
"version": "0.4.12",
"private": false,
"description": "pc端手機預覽組件",
"main": "dist/VuePhonePreview.common.js",
"license": "MIT",
"author": "xxx",
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib --name VuePhonePreview ./src/index.ts",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"repository": {
"type": "git",
"url": "git+https://github.com/aTong9/vue-phone-preview"
},
"keywords": [
"vue",
"vuejs",
"typescript",
"vuecli3.x"
],
"engines": {
"node": ">= 12.3.1",
"npm": ">= 6.9.0"
},
"dependencies": {
"@types/core-js": "^2.5.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"cache-loader": "^4.1.0",
"core-js": "^3.1.2",
"postcss-pxtorem": "^4.0.1",
"ts-loader": "^6.2.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue": "^2.6.10",
"vue-class-component": "^7.1.0",
"vue-loader": "^15.7.1",
"vue-property-decorator": "^8.3.0",
"vue-style-loader": "^4.1.2",
"vuex": "^3.0.1",
"webpack": "^4.41.2"
},
"devDependencies": {
"@types/chai": "^4.1.0",
"@types/jest": "^24.0.19",
"@types/node": "^10.12.18",
"@vue/cli-plugin-babel": "^4.0.4",
"@vue/cli-plugin-typescript": "^4.0.4",
"@vue/cli-plugin-unit-jest": "^4.0.4",
"@vue/cli-service": "^4.0.4",
"@vue/test-utils": "1.0.0-beta.29",
"chai": "^4.1.2",
"css-loader": "^3.2.0",
"node-sass": "^4.12.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"scss": "^0.2.4",
"ts-jest": "^23.0.0",
"tslint": "^5.20.0",
"typescript": "~3.5.3",
"vue-template-compiler": "^2.6.10"
}
}
這里需要注意的幾點是：
1、private要改為false
2、增加一項打包命令："build-bundle": "vue-cli-service build --target lib --name VuePhonePreview ./src/index.ts",
3、增加一項main，并且指向打包后的文件，例如："dist/VuePhonePreview.common.js"
3: vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
module.exports = {
pages: {
index: {
entry: 'examples/main.ts',
template: 'public/index.html',
filename: 'index.html'
}
},
// vue 通過 file-loader 用版本哈希值和正確的公共基礎路徑來決定最終的圖片路徑，再用 url-loader 將小于 4kb 的
// 圖片內聯，以減少 HTTP 請求的數量。所以我們可以通過 chainWebpack 調整圖片的大小限制。例如，我們將
// 圖片大小限制設置為 13kb，低于13kb的圖片全部被內聯，高于13kb的圖片會放在單獨的img文件夾中。
chainWebpack: config => {
const imagesRule = config.module.rule('images')
imagesRule
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: 13312 }))
},
// 設置css: { extract: false },可以強制內聯，就不會將css單獨打包成一個文件，導致頁面沒有style
css: { extract: false },
productionSourceMap: false
}
四：最后就是npm注冊，發布自己的組件
1、執行package.json里剛剛寫好的build-bundle命令
打包后的文件目錄
這里打包后的文件與package.json文件內的main字段相對應
"main": "dist/VuePhonePreview.common.js",
3、創建 npm 賬號以及發布流程
- 首先需要在 npm 創建一個賬號
- 在終端執行 npm login 輸入你注冊的 npm 的賬號和密碼
- 發布你的包（每次修改發布前記得修改版本好然后執行npm run build-bundle）
這里需要注意:一定要確保本地鏡像為 npm,不然無法提交成功
// 1.查詢當前配置的鏡像
npm get registry
//https://registry.npmjs.org/
// 設置成淘寶鏡像
npm config set registry http://registry.npm.taobao.org/
// 換成原來的
npm config set registry https://registry.npmjs.org/
npm 發布包的一些相關命令
npm login //登錄npm
npm publish //發布包
npm unpublish //刪除包
再發布前需要配置.npmignore 文件,忽略一些無用的文件
.*
/node_modules
/src
package-lock.json
webpack.config.js
