构建一个 Vue 组件项目
开发vue组件使用webpack-simple
vue init webpack-simple free-time-ui
项目目录结构:
.
├── src/ // 源码目录
│ ├── packages/ // 组件目录
│ │ ├──avatar.vue // 组件代码
│ │ ├── index.js // 挂载插件
│ ├── App.vue // 页面入口
│ ├── main.js // 程序入口
│ ├── index.js // (所有)插件入口
├── index.html // 入口html文件
.
组件封装
这一步就和我们平常在vue项目中封装组件几乎相同
.vue文件
<div class="pop-avatar" v-if="skyconList" @mouseover.stop="popoverShow()" @mouseleave.stop="popoverHidden()">
<div class="pop-avatar-info">
<div class="pop-avatar-now">
<div class="today-skycon">
<img v-if="weatherImg" :src="weatherImg" :alt="skyconList.wea"/>
</div>
<div class="now-temperature">{{skyconList.tem}}</div>
</div>
<div class="today-info">
<div class="today-temperature">{{skyconList.tem2}}~{{skyconList.tem1}}</div>
<div class="now-wind">
<span v-if="night">{{skyconList.win[1]}} </span><span v-else>{{skyconList.win[0]}} </span>
{{skyconList.win_speed}}
</div>
</div>
</div>
<div class="pop-avatar-tip" :alt="skyconList.air_tips">
<span class="animate">{{skyconList.air_tips}}</span>
</div>
</div>
<script>
……………………
</script>
组件中的index.js
import AvatarWeather from './avatar';
//AvatarWeather 对应组件的名字,要记得在 avatar.vue 文件中还是 name 属性要声明
AvatarWeather.install = function (Vue) {
Vue.component(AvatarWeather.name, AvatarWeather)
};
export default AvatarWeather;
main.js
import PopWeather from './index.js'
Vue.use(PopWeather)
src下的index.js
import AvatarWeather from './packages/weather/index.js';
const components = [
AvatarWeather
]
const install = function (Vue, opts = {}) {
components.map(component => {
Vue.component(component.name, component);
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
AvatarWeather
}
要注意在vue组件中一定!!!要声明name字段:
export default {
name: 'AvatarWeather',
}
本地运行通过script标签的方式使用,修改 index.html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>pop-weather</title>
</head>
<body>
<div id="app">
<pop-weather></pop-weather>
</div>
<script src="/dist/free-time-ui.js"></script>
</body>
</html>
然后运行 npm run dev
你就可以看到效果了
发布 npm包
配置package.json
{
"name": "free-time-ui",//包名
"description": "A Vue.js Component UI",
"keywords": [//npm关键词
"pop",
"vue",
"weather",
"Plugin"
],
"version": "1.0.5",//npm版本号
"author": "https://github.com/pangxiaolong/free-time-ui.git",
"repository": {
"type": "git",
"url": "https://github.com/pangxiaolong/free-time-ui.git"
},
"license": "MIT",
"main": "dist/free-time-ui.js",//npm加载路径
"private": false,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11",
"vue-jsonp": "^0.1.8"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
………………
}
}
webpack.config.js配置
var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV
module.exports = {
entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',//环境判断
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'free-time-ui.js',//编译之后的js名
library: 'free-time-ui', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
……………………
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
发布之前一定要先修改版本号和npm run build,一定!然后,
npm login // 登陆
npm publish // 发布
登录有问题的可以查看我另一篇文章
部分之后引用有问题的可以查看我的github有详细的使用说明