передовой
В настоящее время у нас есть доступ к библиотеке модульной компонентной компоненты оказывается многочисленной, особенно в том, что родственница является множеством, такой как элемент, IVIEW и так далее, хотя есть много, но колеса многочисленны, они подходят, не говорят, Как покупать одежду, хотя есть одежда хороша, но, казалось бы, нельзя держать жирное жир, которое часто недоступно. Конечно, на этот раз он адаптирован так важен! Сегодня мы начинаем с нуля с пользовательской Vue в соответствии со своими собственными библиотеками компонентов.
Начало
Во-первых уже знакомый мне способ написания библиотеки компонентов это одно и то же, но также очень важно для коллег, которые пишут библиотеку компонентов написать полный набор документов.После различных методов я знаю три типа:
- Storybook считает, что он хорошо знаком разработчикам React, но начиная с версии v3.2 он поддерживает vue.
- vue-mark-down Используйте это для демонстрации примеров кода и отображения кода в уценке.
- docsify Это библиотека для быстрого создания документации, и я только недавно узнал о ней.
Инициализация проекта
Для начала нам нужно создать пустой проект vue, и на его основе мы можем приступить к написанию следующей библиотеки компонентов!
npm i -g vue-cli // yarn add global vue-cli
vue init webpack lyui //(lyui)可以随意更换成你的名称
cd lyui
npm run dev
Не удивительно, открываем браузер:http://localhost:8080, вы можете увидеть следующее:
Структура библиотеки компонентов
Следующая структура будет описана с простейшим компонентом кнопки! Все компоненты помещаются в src>components, каждый компонент создает новый каталог, например компонент кнопки, структура каталогов выглядит следующим образом:
src/components/index.js
import Button from './button'
const components = {
Button
}
const install = function (Vue) {
if (install.installed) return
// components.map(component => Vue.component(component.name, component))
Object.keys(components).forEach(key => {
Vue.component(components[key].name, components[key])
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
const API = {
install,
...components
}
export default API
src/components/button/index.js
import Button from './src/button.vue'
Button.install = function (Vue) {
Vue.component(Button.name, Button)
}
export default Button
src/components/button/src/button.vue
<template>
<button>
<slot></slot>
</button>
</template>
<script>
export default {
name: 'ly-button'
}
</script>
Конечно, компонент кнопки, который у меня здесь, — это просто базовая архитектура.
Справочник по библиотеке компонентов
Компонент кнопки написан выше, конечно, мы хотим использовать его в нашем проекте, я не знаю, помните ли вы еще использование элемента, на самом деле наше использование здесь похоже.
src/app.js
Добавьте следующий код:
import lyui from './components/index'
Vue.use(lyui)
Теперь, когда наш проект не был опубликован в npm, он просто упоминается в проекте.После того, как мы опубликуем его в npm, мы сможем использовать его так же, как элемент. В проекте есть ссылка на библиотеку пользовательского интерфейса, и мне не терпится проверить эффект.src/docs/test.md
возрождается
Дом уже куплен, но в черновом жить не можем.Далее будем его просто отделывать вместе.Материалы есть разные,в т.ч.ссс,ссс,посткс.Зависит от личных предпочтений.Для удобства , я буду использовать scss напрямую. , на самом деле проще написать прямо в стиле, но это не рекомендуется ибо кастомизация не сильная.src/components/button/button.scss
.ly-button{
border:none;
padding:5px 15px;
background:#41B883;
color:#fff;
}
src/components/index.scss
@import './button/src/button.scss'
src/main.js
import './components/index.scss'
Выше мы просто написали стиль кнопки и сослались на него в main.js. Достаточно ли этого? Ответ — нет, потому что наш стиль выше использует sass, но в нашем проекте нет загрузчика sass, это просто, мы просто добавляем загрузчик sass
cnpm install --save-dev sass-loader node-sass
- Поскольку sass-loader устойчив к node-sass, вот дружеское напоминание: в обычных условиях мы не можем без проблем установить node-sass с помощью npm или yarn.Единственный одношаговый способ — использовать Taobao.cnpm.
npm install -g cnpm --registry=https://registry.npm.taobao.org
После установки sass-loader и node-sass перезапустите службу напрямую, чтобы убедиться, что добавленный нами стиль вступил в силу!
Релиз пакета
После того, как библиотека компонентов написана, она должна быть упакована и выпущена в конце концов, иначе она будет бессмысленной, если мы ее напишем. Создайте три новых файла конфигурации:config/package.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
'lyui': './src/components/index.js'
},
output: {
path: path.resolve(__dirname, '../package'),
publicPath: '/package/',
library: 'lyui',
libraryTarget: 'umd',
umdNamedDefine: true
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
resolve: {
extensions: ['.js', '.vue']
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: 'vue-style-loader!css-loader',
sass: 'vue-style-loader!css-loader!sass-loader'
},
postLoaders: {
html: 'babel-loader'
}
}
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'autoprefixer-loader'
]
}, {
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=8192'
}]
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
}
config/package.div.config.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./package.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractScss = new ExtractTextPlugin('/lyui.min.css')
module.exports = merge(baseWebpackConfig, {
output: {
filename: '[name].js'
},
module: {
loaders: [{
test: /\.scss$/i,
loader: extractScss.extract(['css-loader', 'sass-loader'])
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
extractScss
]
})
config/package.prod.config.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const config = require('../config')
const baseWebpackConfig = require('./package.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractScss = new ExtractTextPlugin('/lyui.min.css')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = merge(baseWebpackConfig, {
output: {
filename: '[name].min.js'
},
module: {
loaders: [{
test: /\.scss$/i,
loader: extractScss.extract(['css-loader', 'sass-loader'])
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
//new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
}
}
}),
extractScss,
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap ?
{
safe: true,
map: {
inline: false
}
} :
{
safe: true
}
}),
new CopyWebpackPlugin([
// {output}/file.txt
{
from: `./src/components`,
to: `./components`
}
]),
]
})
Далее нужно добавить три скрипта в package.json
"package:dev": "webpack --config build/package.dev.config.js",
"package:prod": "webpack --config build/package.prod.config.js",
"package": "npm run package:prod && npm publish && npm run build"
и добавить МИАН
"main": "package/lyui.min.js",
Наконец нужноsrc/components/index.js
цитируется вindex.scss
import './index.scss'
npm run package \ npm run package:prod
После выполнения вышеуказанной команды будет сгенерирован каталог пакета, в котором находятся все файлы после упаковки.
Документация
Так много было введено выше, но вы можете понять, что вы пишете только в конце, но пользователи в замешательстве.В это время особенно важен хороший документ.Далее, давайте представим сегодняшнего главного героя:docsify
Установить dosify глобально
npm i docsify-cli -g
инициализировать
docsify init ./docs
Запустите сервер документов
docsify serve ./docs
После успешного запуска вы можете открыть его напрямую:http://localhost:3000Многие из описанных ниже элементов конфигурации здесь не исчерпываются.docsify.js.org/, вы можете проверить документацию самостоятельно, и настройка также очень проста!
конец
Хоть я и написал много таких технических статей, но до сих пор я так и не написал собственную библиотеку компонентов.Мне очень стыдно.Надеюсь каждый сможет применить эту статью на практике и изучить ее в реальном смысле!