Научит вас упаковывать компоненты Vue и публиковать их с помощью npm.

внешний интерфейс JavaScript Vue.js NPM

Адрес источникаЕсли вам полезно, я надеюсь не быть скупой со своей звездой

В этой статье на основе записи о том, какVueкомпонентов развития, а вnpmОпубликован в. Без лишних слов, давайте к делу

Плагин разработки Vue

Посмотрите на официальный сайт перед разработкойспецификация разработки

Ожидаемый результат после нашей разработки — поддержка импорта, требования или импорта напрямую с использованием тегов скрипта, например:

// 这里注意一下包的名字前缀是 custom ，组件的名字前缀是 moor
// 这是因为那个名字发布包的时候被占用了（我做实验的时候叫 moor-ui）现在改成了custom-ui，但是组件的前缀懒得改
import CustomUI from 'custom-ui';

// 或者 const CustomUI = require('custom-ui');

// 或者 <script src="..."></script>

Vue.use(CustomUI);

Создайте проект Vue

Компоненты разработки, которые мы используемwebpack-simple:

vue init webpack-simple <project-name>

PS:Здесь я выбрал использование sass, потому что он будет использоваться позже при разработке компонентов.

Файловая структура компонента разработки выглядит следующим образом, см.elementНо у нас упрощенная версия, только для совместного использования и собственного использования.

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

Что ж, на этом подготовка завершена, мы можем приступить к разработке компонентов, а затем приведенный выше пример, давайте приступим к разработкеswitchкомпоненты.

разработать один компонент

Сначала посмотрите на целевой эффект:

switch.gif

Начните разработку: создайте новую папку переключателя в папке пакетов для хранения исходного кода компонента переключателя и продолжайте создавать файлы moor-switch.vue и index.js в папке переключателя.

moor-switch.vue

Этот файл является исходным кодом компонента. Я не буду приводить сюда исходный код. Здесь я расскажу о том, что я лично считаю самым важным моментом. Это также самый важный момент для инкапсуляции компонентов формы:

v-модель привязки пользовательского компонента,Адрес официального сайта

использовать:

<!-- 使用父组件的值绑定 -->
<!-- isSwitch = false -->
<moor-switch 
  v-model="isSwitch">开关:
</moor-switch>

<!-- 子组件必须要有 input 来处理对应的值 -->
<!-- 其中最重要的就是需要 :value="value" 用来绑定值 -->
<!-- @change="$emit('input', $event.target.value)" 事件触发改变值 -->
<input
    type="checkbox"
    @change="$emit('input', $event.target.value)"
    :true-value="activeValue"
    :false-value="inactiveValue"
    :disabled="disabled"
    :value="value">

<!-- 当然还需要使用 props 来接受这个 value -->
<script> 
// ... 此处省略代码    
props: {
  value: {
    type: [Boolean, String, Number],
    default: false
  }
}
// ... 此处省略代码    
</script>

index.js

Об этом файле нечего сказать, так как компонент используется как плагин Vue, а код здесь всего три строки:

// MoorSwitch 是对应组件的名字，要记得在 moor-switch.vue 文件中还是 name 属性哦
import MoorSwitch from './moor-switch';

MoorSwitch.install = Vue => Vue.component(MoorSwitch.name, MoorSwitch);

export default MoorSwitch;

Хорошо в принципе сделано, но для того, чтобы централизовать все компоненты, как у меняselect,input,buttonи другие компоненты, то я хочу поместить их в один файл для удобства управления

Итак, я создал новый файл index.js в той же директории, что и App.vue, и о содержимом тут говорить нечего, просто смотришь и понимаешь:

import HelloWorld from './packages/hello-world/index.js';
import MoorSwitch from './packages/switch/index.js';
// ...如果还有的话继续添加

const components = [
  HelloWorld,
  MoorSwitch
  // ...如果还有的话继续添加
]

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,
  HelloWorld,
  MoorSwitch
  // ...如果还有的话继续添加
}

запускать локально через<script/>Способ использования тегов, измененныйindex.htmlдокумент:

<!-- 省略部分代码 -->
<div id="app">
  <moor-hello-world :color="color" :msg="msg"></moor-hello-world>
  <moor-switch
  v-model="lightSwitch">开关:</moor-switch>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="/dist/custom-ui.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      color: 'red',
      msg: 'hello world!',
      lightSwitch: false
    }
  }
})
</script>

затем бегиnpm run devВы можете увидеть эффект:

preview.png

Ну вот и разрабатываются наши компоненты, начнем с того, как их упаковать и опубликовать в 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документ:

// 发布开源因此需要将这个字段改为 false
"private": false,

// 这个指 import custom-ui 的时候它会去检索的路径
"main": "dist/custom-ui.js",

Издание приказа на самом деле два предложения

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

После завершения можем установить и использовать в проекте

npm install custom-ui -S

существуетmain.jsВнедрить плагины в

import CustomUI from 'custom-ui'
Vue.use(CustomUI)

Использование в компоненте:

<!-- 直接使用脚手架的HelloWorld组件 -->
<!-- 此处有省略代码，看对地方加入代码哦 -->
<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>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // HelloWorld
      msg: 'Welcome to moor UI!',
      color: 'red',
      // input
      input1: '',
      input2: '这是默认值',
      inputDisabled: true,
      // switch
      lightSwitch: false,
      switchLight: true
    }
  },
  watch: {
    lightSwitch: newValue => console.log('开关：', newValue),
  }
}
</script>

<style scoped>
.moor-select, .moor-btn, .moor-switch, .moor-input {
  margin: 10px 6px;
}
.moor-item {
  display: flex;
  align-items: center;
}
.moor-item label {
  width: 100px;
  display: inline-block;
}
</style>

Эффект предварительного просмотра выглядит следующим образом:

test-preview.png

PS:Измените .gitignore, чтобы убрать ignore dist, потому что наши упакованные файлы тоже нужно отправлять, каждый раз при переходе в npm нужно менять номер версии, поле версии в package.json

Писать относительно просто, в основном для того, чтобы давать идеи. Если вы привыкли к компонентам с открытым исходным кодом, вы должны понимать это сами.Иногда нам необходимо разработать свои собственные компоненты с открытым исходным кодом, когда мы не можем найти подходящий компонент с открытым исходным кодом в процессе разработки....

Наконец, я надеюсь, что вы дадите звездуАдрес источника

О, кстати, README, больше не хочу писать... ха-ха

Категории