构建简单的包
- npm init 初始化项目
- 创建src/index.ts， 在里面编写对应的功能，并将其导出
- 创建npm账号，地址www.npmjs.com/signup
- 发布 在项目目录下，运行npm login，登录上自己的账号和密码
- 使用npm publish，即可将自己的npm包发布到npm官网上
构建vue组件的npm包
由于vue组件比较简单，不需要使用vue-cli脚手架进行项目的创建，可以直接使用npm init，初始化项目，在本地生成了package.json，由于需要使用webpack、vue以及一些编打包的依赖，需要对其进行一定的改进
完整的package.json如下，
{
"name": "vue-test-gfy", //npm包名
"version": "1.0.0", //版本
"description": "npm test", //描述
"main": "dist/index.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" //webpack打包脚本
},
"keywords": [ // 关键词
"vue",
"npm",
"test"
],
"author": "guofeiyu", //作者
"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",
"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-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.9",
"webpack": "^3.9.1",
"webpack-dev-server": "^2.9.5"
}
}
配置完成后，使用npm install安装依赖包
接着创建src和dist目录。在src下创建demo.vue和index.js文件，在demo.vue里编写对应的vue插件，index.js将对应的vue组件导出去
demo.vue文件如下
<template>
<div class="demo-container">
<input placeholder="请输入你的名字" type="text" v-model="name"/><br/>
<span v-if="name" class="account">hello {{name}}</span>
</div>
</template>
<script>
export default {
data () {
return {
name: ''
}
},
methods: {
}
}
</script>
<style>
</style>
index.js如下
import Hello from './demo.vue'
export default Hello
创建webpack配置，创建webpack.config.js
const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
module.exports = {
devtool: 'source-map',
entry: "./src/index.js",//入口文件，就是上步骤的src目录下的index.js文件，
output: {
path: path.resolve(__dirname, './dist'),//输出路径，就是上步骤中新建的dist目录，
publicPath: '/dist/',
filename: 'index.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")
}
})
]
};
编写好webpack的配置文件后，使用npm run build指令进行打包，在dist目录下生成index.js，该文件就是我们所要的npm包
接着编写.npmignore，去除不必要的文件，只将dist目录进行上传
.*
build/
node_modules/
src/
到这里，vue组件的编写及构建就完成了 ，接下来就是将其上传到npm官网，和构建简单的包发布一样，只需npm login登录后，执行npm publish，即可将包上传到npm官网，点击自己的头像，在packages下就可以看到自己发布的包
使用： 执行npm install 包名，就可以下载自己上传到的包并进行使用，使用实例如下
<template>
<div class="index">
<div class="demo">
<hello></hello>
</div>
</div>
</template>
<script>
import Hello from 'vue-test-gfy';
export default {
components: {
Hello
},
data(){
return {
}
}
}
</script>
假如对包进行了更改，只需要在package.json里面对其version（版本号）进行更改即可。
借鉴了该文，地址为 blog.csdn.net/hamupp/arti…
