Element와 유사한 Vue UI 구성 요소 라이브러리를 만드는 방법을 가르칩니다.

不言
풀어 주다: 2018-09-01 17:17:19
원래의
6169명이 탐색했습니다.

이 문서의 내용은 Element와 유사한 Vue UI 구성 요소 라이브러리를 만드는 방법을 가르치는 것입니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

머리말

세 가지 주요 프런트엔드 프레임워크가 등장하면서 구성 요소화에 대한 아이디어가 점점 더 대중화되었고, 개발자가 시간을 절약하고 효율성을 향상시키는 데 도움이 될 수 있는
구성 요소 라이브러리가 많이 등장했습니다. React의 Ant-design, Vue의 iView, Element 등의 기능은 이미 매우 완벽합니다.
이 글을 쓰는 목적: UI 라이브러리를 구축하는 과정을 기록하는 것입니다. (Vue에 대한 이해가 많이 깊어졌습니다.)Demo 주소
먼저 아이디어에 대해 이야기하겠습니다.
보통 컴포넌트를 작성할 때 컴포넌트를 작성할 때 직접 가져오면 됩니다. 예를 들어 time.vue를 작성하면 사용할 때

import time from '路径'
로그인 후 복사

이제 컴포넌트 라이브러리를 작성해야 합니다. 모든 컴포넌트를 폴더에 넣어야 합니다(예:button.vue,icon.vue,input.vue...),通过Vue.components注册所有组件,再通过Vue.use()安装一下就实现了,这就是所以的vue플러그인 아이디어, 그다지 신비롭지 않음

1. 환경 준비

앞서 언급한 것처럼 모든 컴포넌트를 배치해야 함) 가장 쉬운 방법은 스캐폴딩을 사용하여 프로젝트 디렉토리 구조를 구축하는 것입니다.
동시에 디버깅에 편리한 샘플 문서도 추가해야 합니다.
버튼의 샘플 효과

Element와 유사한 Vue UI 구성 요소 라이브러리를 만드는 방법을 가르칩니다.

이제 고려해야 할 두 가지 중요한 사항이 있습니다: 디렉토리 구조예제 문서
1 디렉토리 구조
vue-cli 프로젝트 구조로 직접 생성하고 이를 기반으로 수정하기만 하면 됩니다. 우리 예제의 화면을 만나보세요)
디렉터리 구조

.
├── build  -------------------------webpack相关配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── strip-tags.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js -------配置markdown设置时会用到它
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config  ------------------------vue的基本配置
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── examples -----------------------放置例子
│   ├── App.vue --------------------根文件
│   ├── assets ---------------------静态资源
│   │   ├── css --------------------css
│   │   ├── img --------------------图片
│   │   └── logo.png ---------------vue的logo
│   ├── components -----------------公共组件
│   │   ├── demo-block.vue ---------盒子组件
│   │   ├── footer.vue -------------footer组件
│   │   ├── header.vue -------------header组件
│   │   └── side-nav.vue -----------侧边栏组件
│   ├── docs -----------------------例子模块的文档
│   │   ├── breadcrumb.md ----------面包屑组件文档
│   │   ├── button.md --------------按钮组件文档
│   │   ├── card.md ----------------卡片组件文档
│   │   ├── guide.md ---------------简介文档
│   │   ├── icon.md ----------------图标文档
│   │   ├── install.md -------------安装文档
│   │   ├── layout.md --------------布局文档
│   │   ├── logs.md ----------------更新日志文档
│   │   ├── message.md -------------消息文档
│   │   ├── start.md ---------------快速开始1文档
│   │   ├── tag.md -----------------标签文档
│   │   └── twotable.md ------------二维表格文档
│   ├── icon.json ------------------图标数据
│   ├── main.js --------------------入口文件
│   ├── nav.config.json ------------侧边栏数据
│   └── router ---------------------路由
│       └── index.js ---------------路由配置
├── packages -----------------------组件库源代码
│   ├── README.md ------------------README
│   ├── breadcrumb -----------------面包屑源码
│   │   ├── index.js
│   │   └── src
│   ├── breadcrumb-item ------------面包屑源码
│   │   └── index.js
│   ├── button ---------------------按钮源码
│   │   ├── index.js
│   │   └── src
│   ├── card -----------------------卡片源码
│   │   ├── index.js
│   │   └── src
│   ├── col ------------------------列布局源码
│   │   ├── index.js
│   │   └── src
│   ├── message --------------------消息源码
│   │   ├── index.js
│   │   └── src
│   ├── two-dimensional-table -----二维表格源码
│   │    ├── index.js
│   │    └── src
│   ├── row -----------------------行源码
│   │   ├── index.js
│   │   └── src
│   ├── tag -----------------------标签源码
│   │   ├── index.js
│   │   └── src
│   ├── theme-default --------------样式表
│   │   └── lib
│   ├── package.json
│   └── index.js -------------------组件库入口
├── index.html ---------------------主页
├── package.json
├── static
└── README.md
로그인 후 복사

위는 수정된 디렉터리 구조입니다. 스캐폴딩에 의해 생성된 src 디렉터리를 예제 문서를 넣기 위해 예제로 변경하므로 이에 맞게 webpack.base를 수정해야 합니다. conf.js가 예제를 가리키도록 하여 webpack이 올바르게 패키징할 수 있도록
Element와 유사한 Vue UI 구성 요소 라이브러리를 만드는 방법을 가르칩니다.
예제 문서, vue에서 마크다운을 구현할 수 있도록 문서 작성 시 markdown을 사용하는 것이 가장 적합합니다. vue를 사용할 수 있습니다. -markdown-loader 관련 파일을 구성합니다. webpack.base.conf.js 규칙에
Element와 유사한 Vue UI 구성 요소 라이브러리를 만드는 방법을 가르칩니다.
를 추가하여 문서 작성을 시작하고 테스트합니다.

{
  path: '/hello',
  name: 'hello',
  component: r => require.ensure([], () => r(require('../docs/hello.md')))          
}
로그인 후 복사

npm dev를 실행하고 http:/를 엽니다. / localhost:8080/#/hello, 표시 가능, 초기 성공(기본 구현)
다음 단계는 샘플 문서의 효과를 얻는 것입니다. 시연 및 코드 표시가 모두 가능합니다(아래 참조)

Element와 유사한 Vue UI 구성 요소 라이브러리를 만드는 방법을 가르칩니다.

위와 같이 예제 문서는 버튼.md 파일에서 코드를 표시하고 싶은 곳에 코드를 표시하고, 버튼을 표시하려는 위치에 버튼을 표시하려면

Let 컴파일 과정에서 식별할 수 있습니다. .vue를 설치하여 컴파일하고 표시하려면 실제로 markdown-it을 캡슐화하고 옵션을 지원해야 합니다. . 정의된 식별자를 추가하기만 하면 됩니다(저는 'demo'를 사용합니다). 옵션 옵션 구성(webpack.base.conf.js에도 있음)

const vueMarkdown = {
  preprocess: (MarkdownIt, source) => {
    MarkdownIt.renderer.rules.table_open = function () {
      return '
로그인 후 복사
'     }     MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence)     const code_inline = MarkdownIt.renderer.rules.code_inline     MarkdownIt.renderer.rules.code_inline = function (...args) {       args[0][args[1]].attrJoin('class', 'code_inline')       return code_inline(...args)     }     return source   },   use: [     [MarkdownItContainer, 'demo', {       // 用于校验包含demo的代码块       validate: params => params.trim().match(/^demo\s*(.*)$/),       render: function (tokens, idx) {         var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);         if (tokens[idx].nesting === 1) {           var desc = tokens[idx + 2].content;           // 编译成html           const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script'))           // 移除描述,防止被添加到代码块           tokens[idx + 2].children = [];           return `                         

${html}

                        

`;         }         return '

\n';       }     }]   ] }

사실 이는 파서가 데모로 식별자를 위의 규칙에 따라 AST(Abstract Syntax Tree)로 파싱한 후 HTML로 컴파일
그래서 샘플 문서 작성 시 이렇게 작성하시면 됩니다

Element와 유사한 Vue UI 구성 요소 라이브러리를 만드는 방법을 가르칩니다.

2. 컴포넌트 소스 코드

실제로 생각보다 어렵지는 않습니다. 컴포넌트를 작성하는 것과 비슷하지만 특정 구조에 따라 작성해야 합니다. (자세한 내용은 내 github에서 글로벌 지원을 확인하세요.) 가져오기 및 단일 구성 요소 가져오기
글로벌 가져오기:

const install = function(Vue) {
  if(install.installed) return
  components.map(component => Vue.component(component.name, component))
}
로그인 후 복사

작성한 구성 요소를 트래버스하고 Vue.comComponent가 Vue에 등록되어 설치 기능을 형성하고 설치를 노출하려면 설치하면 됩니다. Vue.use() 패키지 및 사용(다른 플러그인과 마찬가지로)
단일 파일 소개:

export default {
  install,
  JButton,
  JCol,
  JRow,
  JTag,
  JBreadcrumb,
  JBreadcrumbItem,
  JCard,
  towTable
}
로그인 후 복사

마찬가지로 구성 요소가 노출되는 한 괜찮습니다

다른 사람들은 다음을 통해 우리 패키지를 사용할 수 있어야 합니다. npm 설치 패키지. 패키지에 모든 구성 요소와 스타일을 작성해야 하나요? 다른 사람들은 패키지를 설치하고 모든 구성 요소에 대한 스타일을 도입하기만 하면 됩니다.

3. with npm

  1. npm 계정이 있어야 합니다(없으면 공식 홈페이지에 가서 등록하세요)

  2. 터미널을 열고 npm에 로그인하세요

npm login
로그인 후 복사

3 .패키지 게시
패키지 폴더만 게시하고 패키지 폴더 아래에 package.json을 작성하면 됩니다

{
  "name": "jk-ui",
  "version": "1.0.9",
  "description": "UI base on Vue",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/liuyangjike/JKUI.git"
  },
  "keywords": [
    "UI"
  ],
  "author": "Jike",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/liuyangjike/JKUI/issues"
  },
  "homepage": "https://github.com/liuyangjike/JKUI#readme"
}
로그인 후 복사

使用npm publish发布就OK了,别人就可以用npm install jk-ui --save愉快的玩耍了

相关推荐:

Vue.js状态管理模式Vuex的安装与使用(代码示例)

Vue如何添加element UI的组件

위 내용은 Element와 유사한 Vue UI 구성 요소 라이브러리를 만드는 방법을 가르칩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿