溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在開發組件時，我們可能會期望一類組件放在同一個代碼倉庫下，就像element那樣，我們可以使用element提供的腳手架，也可以使用vue cli 3創建一個更‘新'的項目。
項目創建
通過vue cli 3創建項目，創建文件夾packages用于存放組件。
單個組件目錄
在packages下就是每一個組件，每個組件和單獨項目一樣，會有package.json、README.md、src、dist等文件及目錄。
如何演示/調試組件
在組件開發過稱中，我們需要對組件進行展示，所以創建了examples文件夾，用于存放每個組件示例。
通過一個列表展示出所有的組件，點擊選擇當前開發的組件，進入對應的example。
路由的根就是一個導航列表，然后每個組件對應一個路由，通過一個配置文件的components.js來生成這個路由。
// 路由
import Navigation from "./Navigation";
import components from "./components";
let routes = components.map(component => ({
path: `/${component.name}`,
component: () => import(`../examples/${component.name}`)
}));
routes.unshift({
path: "",
component: Navigation
});
export default routes;
自動化腳本
創建/編譯/發布
創建新的組件，需要修改components.js配置文件，在examples和packages下創建對應目錄。
編譯/發布組件，因為倉庫下會有多個組件，如果一次發布多個，就需要進入每個文件夾下執行命令。
上面過程實現自動化，有很多種方式，比如可以通過npm run <script>，可以直接通過node命令等。這里我參考element，采用了Makefile。
創建script文件夾，其中包括創建腳本new.js和構建腳本build.js。
創建腳本
創建腳本主要就是目錄的創建與文件的寫入，其中可能需要注意的可能就是格式問題。
一種方式是在``之間，按照規范格式去完成寫入內容，這樣做比較麻煩，而且可能面臨格式化要求修改問題。
另一種方式是在腳本中引入eslint，腳本中的eslint.CLIEngine可以根據配置文件(比如.eslintrc.js)格式化文件。需要注意的是需要比命令行中配置需要多添加fix: true配置, 如下
const CLIEngine = eslint.CLIEngine;
const cli = new CLIEngine({ ...require("../.eslintrc.js"), fix: true });
eslint在腳本中的使用方法，更具體的可以參考eslint文檔中Node.js API部分。
// scripts/new.js部分
...
components.push({
label: newName,
name: newName
})
const updateConfig = function(path, components) {
writeFile(path, `module.exports = ${JSON.stringify(components)}`).then(() => {
console.log("完成components.js")
// 格式化
CLIEngine.outputFixes(cli.executeOnFiles([configPath]))
})
}
const createPackages = function(componentName) {
try {
const dir = path.resolve(__dirname, `../packages/${componentName}/`)
// 創建文件夾
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir)
console.log(`完成創建packages/${componentName}文件夾`)
}
// 寫入README
if (!fs.existsSync(`${dir}/README.md`)) {
writeFile(
`${dir}/README.md`,
`## ${componentName}
### 使用說明
`
).then(() => {
console.log("完成創建README")
})
}
// 寫入package.json
if (!fs.existsSync(`${dir}/package.json`)) {
writeFile(
`${dir}/package.json`,
`{
"name": "@hy/${componentName}",
"version": "1.0.0",
"description": "${componentName}",
"main": "./dist/hy-${componentName}.umd.min.js",
"keywords": [
"${componentName}",
"vue"
],
"author": "",
"license": "ISC"
}
`
).then(() => {
console.log("完成創建package.json")
})
}
// 創建index.js
if (!fs.existsSync(`${dir}/index.js`)) {
writeFile(`${dir}/index.js`, `export {}`).then(() => {
console.log("完成創建index.js")
CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.js`]))
})
}
} catch (err) {
console.error(err)
}
}
const createExample = function(componentName) {
try {
const dir = path.resolve(__dirname, `../examples/${componentName}/`)
// 創建文件夾
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir)
console.log(`完成創建examples/${componentName}文件夾`)
}
// 寫入index.vue
if (!fs.existsSync(`${dir}/index.vue`)) {
writeFile(
`${dir}/index.vue`,
`<template>
</template>
<script>
import { } from '../../packages/${componentName}/index'
export default {
components: {}
}
</script>
`
).then(() => {
console.log(`完成創建examples/${componentName}/index.vue文件`)
// 格式化index.vue
CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.vue`]))
})
}
} catch (err) {
console.error(err)
}
}
...
構建腳本
// build.js
...
async function build() {
for (let i = 0, len = components.length; i < len; i++) {
const name = components[i].name
await buildService.run(
"build",
{
_: ["build", `${root}/packages/${name}/src/index.js`],
target: "lib",
name: `hy-${name}`,
dest: `${root}/packages/${name}/dist`,
// 生成格式: umd格式會同時成功demo.html commonjs,umd,umd-min
formats: "commonjs,umd-min"
// clean: false
},
["--target=all", `./packages/${name}/src/index.js`]
)
}
}
...
Lerna
lerna是一個多包倉庫管理的工具，可以幫助創建、管理、發布多包倉庫中的包。
關于lerna我也沒有太深入得使用，只是用到了發布。首先在項目下執行init初始化了項目，在每次commit之后，可以執行publish。lerna會對應代碼庫打tag，并發布到npm倉庫。
項目版本問題
0.0.1為不規范版本號，最小應該從1.0.0開始。npm publish無法發布，但是lerna publish可以發布。
導致結果安裝為固定版本號，而不是以^開頭的版本號范圍。outdate可以檢測到有更新，無法通過update升級。
組件開發
組件開發主要是在packages/<component name>/src目錄下進行，在example/<component name>/目錄下可以引入該組件src下的源文件，用一些數據來進行開發測試。組件開發和項目中的組件開發基本相同。
作為組件庫中的組件，需要更多的考慮其通用性和易用性。不能為了通用而加入很多的屬性，而使其失去易用性；同樣也不能為了易用，而使其過于簡單，使用范圍過于局限。
對于每一個屬性、每個拋出去的方法，都需要認真考慮其必要性。
唯一不同的地方可能需要注意的是導出的方式。
一種是直接導出組件，這種形式在使用時需要引入，并且在components中聲明，也就是局部注冊。
另一種是添加install方法后導出。這種形式需要調用vue.use方法，相當于全局注冊。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
