構建一個 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有詳細的使用說明