此案例容易上手,如果你按照步骤做,包学包会!
- 最终展示效果:
- 操作步骤
1、webpack init-simple 文件名,新建一个 vue 实例
创建vue 项目的配置选项
新建好的目录结构:
在src同级目录创建一个packages目录,再在packages目录下创建switch目录,我们的组件代码就放到switch目录下面
在switch目录创建custom-switch.vue,index.js 两个文件
以下是 custom-switch.vue 中的内容:
<template>
<div>
<span class="weui-switch" :class="{'weui-switch-on' : me_checked}" :value="value" @click="toggle"></span>
</div>
</template>
<script>
export default {
name: "CustomSwitch",
props: {
value: {
type: Boolean,
default: true
}
},
data() {
return {
me_checked: this.value
}
},
watch: {
me_checked(val) {
this.$emit('input', val);
}
},
methods: {
toggle() {
this.me_checked = !this.me_checked;
}
}
}
</script>
<style>
.weui-switch {
display: block;
position: relative;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: 0;
border-radius: 16px;
box-sizing: border-box;
background-color: #DFDFDF;
transition: background-color 0.1s, border 0.1s;
cursor: pointer;
}
.weui-switch:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 30px;
border-radius: 15px;
background-color: #FDFDFD;
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.weui-switch:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.weui-switch-on {
border-color: #1AAD19;
background-color: #1AAD19;
}
.weui-switch-on:before {
border-color: #1AAD19;
background-color: #1AAD19;
}
.weui-switch-on:after {
transform: translateX(20px);
}
</style>
以下是index.js 中的内容:
import CustomSwitch from './custom-switch'
/* istanbul ignore next */
CustomSwitch.install = function(Vue) {
Vue.component(CustomSwitch.name, CustomSwitch);
};
export default CustomSwitch;
再改下 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' : './packages/switch/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'custom-switch.js',
library: 'custom-switch', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
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
})
])
}
主要是要修改常量 NODE_ENV 的值,修改 module.exports 中 entry 和 output 中的设置项。
现在可以执行npm run build 测试一下custom-switch.js 和 custom-switch.js.map 这两个文件的生成情况。
如果要查看编译出来的效果,需要修改main.js、index.html、以及app.vue 三个文件。
可参考 这个代码
- 接下来就是把代码发布到npm 包管理器上的方法。
1、在npm 网站上注册用户。
2、在包内存放package.json 的地方输入: npm init (初始化npm包上传环境)
3、添加上传账户:npm adduser
输入这个命令会有提示输入用户名,密码,邮箱等资料。不能随意填写,第一次使用的时候不知道,随便写了用户名密码邮箱等,会报错。
应该去https://www.npmjs.com/注册一个账号,然后就填写注册账号时填写的用户名、密码和邮箱即可
这和去官方源仓库https://www.npmjs.com/注册是一样的
4、上传包:npm publish
需要注意的是,上传的包名不能和npm网站中已有的包名称重复,否则会提示:
npm ERR publish 403
You do not have permission to publish 'somepackage'.Are you logged in as
the corrent user?:somepackage
5、安装包
npm install 包名 即可
- 使用方法
1、npm install '包名' --save
2、在main.js中,import 大驼峰 from '包名'
const Components = {
大驼峰
}
Object.keys(Components).forEach(name=>{
Vue.component(name,Components[name]);
});
3、组建中使用
<横线连起来的格式>开关:</横线连起来的格式>
如有不清楚的地方,请 点击链接
希望大家使用愉快!