yuanjili

An ui project base on Vue.js go yuanjili

vue UI 插件

<template>
  <div id="app">
    <div class="moor-item">
      <label>Title:</label> 
      <moor-hello-world :color="color" :msg="msg"></moor-hello-world>
    </div>

    <div class="moor-item">
      <label>Button:</label> 
      <moor-button class="moor-btn" @click="onClick">确定</moor-button>
      <moor-button class="moor-btn" @click="onClick" bgcolor="#409eff" color="#fff">确定</moor-button>
      <moor-button class="moor-btn" @click="onClick" bgcolor="#67c23a" color="#fff">成功</moor-button>
      <moor-button class="moor-btn" @click="onClick" bgcolor="#e6a23c" color="#fff">警告</moor-button>
      <moor-button class="moor-btn" @click="onClick" bgcolor="#f56c6c" color="#fff">危险</moor-button>
    </div>
    
    <div class="moor-item">
      <label>Select: </label>
      <moor-select 
        class="moor-select" 
        label="label" 
        value="value" 
        v-model="selectValue" 
        :options="options">
      </moor-select>
    </div>

    <div class="moor-item">
      <label>Input: </label>
      <moor-input v-model="input1" placeholder="请输入信息"></moor-input>
      <moor-input v-model="input2" placeholder="请输入信息"></moor-input>
      <moor-input placeholder="输入框禁用" :disabled="inputDisabled"></moor-input>
    </div>

    <div class="moor-item">
      <label>Switch: </label>
      <moor-switch v-model="lightSwitch">开关(开):</moor-switch>
      <moor-switch v-model="switchLight">开关(关):</moor-switch>
    </div>
    
    <moor-button class="moor-btn" @click="handlePrint">打印选项值</moor-button>
  </div>  
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      // HelloWorld
      msg: 'Welcome to Yuanjili UI!',
      color: 'red',
      // Select
      selectValue: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }
      ],
      // input
      input1: '',
      input2: '这是默认值',
      inputDisabled: true,
      // switch
      lightSwitch: false,
      switchLight: true
    }
  },
  methods: {
    onClick: function (e) {
      console.log('click', e);
    },
    handlePrint() {
      console.log('selectValue', this.selectValue);
      console.log('input1:', this.input1);
      console.log('input2:', this.input2);
      console.log(this.switchLight,'switchLight')
    }
  },
  watch: {
    lightSwitch: newValue => console.log('开关：', newValue),
  }
}
</script>

<style lang="scss">
.moor-select, .moor-btn, .moor-switch, .moor-input {
  margin: 10px 6px;
}
.moor-item {
  display: flex;
  align-items: center;

  label {
    width: 100px;
    display: inline-block;
  }
}
</style>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

测试使用

For detailed explanation on how things work, consult the docs for vue-loader.

构建一个Vue 项目

vue init webpack-simple <project-name>

. ├── src/ // 源码目录 │ ├── packages/ // 组件目录 │ │ ├── switch/ // 组件（以switch为例） │ │ ├── moor-switch.vue // 组件代码 │ │ ├── index.js // 挂载插件 │ ├── App.vue // 页面入口 │ ├── main.js // 程序入口 │ ├── index.js // （所有）插件入口 ├── index.html // 入口html文件 .

发布到 npm

修改 webpack.config.js 文件

// ... 此处省略代码 
// 执行环境
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
  output: {
    // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'custom-ui.js',
    library: 'custom-ui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  // ... 此处省略代码 
}

修改 package.json 文件

发布命令

// 这里需要你有一个 npm 的账号，文章开头有官网链接
npm login   // 登陆 
npm publish // 发布