npm init
命名、描述、版本、作者、儲存庫等等不想寫的可以直接 加上-y 一切默認
可以看看我的 package.json
因為是vue組件所以我們需要部分依賴，如less，es6 ......
{ "name": "vue-org-crazyyan", "version": "1.0.0", "description": "this is vue module", "main": "dist/vocbtn.min.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --hot --inline", "build": "webpack --display-error-details --config webpack.config.js" }, "author": "CrazyYan", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.7", "es6-promise": "^4.1.1", "less": "^3.11.3", "less-loader": "^5.0.0", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue": "^2.5.9", "vue-hot-reload-api": "^2.2.4", "vue-html-loader": "^1.2.4", "vue-loader": "^13.5.0", "vue-router": "^3.1.5", "vue-style-loader": "^3.0.3", "vue-template-compiler": "^2.6.11", "vuex": "^3.1.2", "webpack": "^3.9.1", "webpack-dev-server": "^2.9.5" } }
然后執行下載這些依賴 推薦cnpm
npm install
如果less報錯
npm install --save-dev less-loader less
2.目錄架構以及配置
這是所有的新建文件可以參考我的來
src是我們自己編寫的文件夾，dist是打包發布的文件夾
配置一下webpack
首先你需要在根目錄新建一個 webpack.config.js
將下面的代碼復制進去，當然也可以自行定義
const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
module.exports = {
devtool: 'source-map',
//入口文件，就是上步驟的src目錄下的index.js文件，
entry: "./src/index.js",
output: {
//輸出路徑，就是上步驟中新建的dist目錄，
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'vocbtn.min.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
]
},
{
test: /\.js$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel-loader'
},
{
test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
loader: 'url-loader',
query: {
limit: 30000,
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
]
};
index.js
// 引入
import VocBtn from './app.vue'
// 暴露
export default VocBtn;
3.開始搞組件
app.vue 就跟我們平常寫vue組件是一樣的,沒啥太大區別
<template> <div> <button class="voc-btn"> {{text}} </button> </div> </template> <script> export default { props:{ // 限制text的類型 text:{ type:String, } }, data () { return { }; }, } </script> <style lang='less' scoped> // 引入less @import 'styles/index.less'; </style>
style/index.less 樣式照常寫
.voc-btn{ border: unset; padding: 4px 6px; text-align: center; font-size: 14px; background-color: #409eff; color: #fff; border-radius: 3px; border: 1px solid #409eff; outline: none; box-sizing: border-box; cursor: pointer; } .voc-btn:hover{ border: 1px solid #fff; transition: border 0.2s; }
4.打包一下下
npm run build
將package.json中的入口修改成
"main": "dist/vocbtn.min.js",
5.創建.npmignore
在根目錄創建一個.npmignore 文件
配置如下
.* *.md *.yml build/ node_modules/ src/ test/ gulpfile.js
到了這一步基本上算是做了一個小組件包
6.發布包
發布包前確認你有npm 的賬號
沒有的可以去官網注冊 https://www.npmjs.com/
有賬號的童鞋看過來
npm login
輸入你的用戶名->密碼->郵箱
然后發布
npm publish
發布包時經常會出現一些奇奇怪怪的報錯
一般常見的報錯就是
① 你的npm包已經存在，需要修改name
在package.json中修改name值
② 使用的是淘寶源cnpm,登陸到的是cnpm
npm config set registry http://registry.npmjs.org/
npm包package.json中registory屬性一定要填寫，每次npm publish時package.json中version版本一定要大於上一次。
到這一步就已經發布成功了，那么你可以自己創建一個 vue-cli 來試試你的組件了
7.使用包
我們來下載一個vue-cli
vue create test-vue
cd test-vue
下載包
npm install vue-org-crazyyan
安裝-注冊
在app.vue中
// 引入 import VocBtn from 'vue-org-crazyyan' // 注冊 components:{VocBtn} // 使用 <VocBtn text="我是組件"></VocBtn>
啟動
npm run serve
大功告成
