vue3 组件库的开发

1、vue3.0

Typescript

Vue Router

Vite

 

项目搭建：

全局安装： yarn global add create-vite-app@1.18.0  或者  npm i -g create-vite-app@1.18.0

创建一个项目：

vite 文档给出的命令是 

1. npm init vite-app <project-name>
2. yarn create vite-app <project-name>

等价于  全局安装 create-vite-app 然后 cva <project-name>

等价于  npx createa-vite-app <project-name>  即 npx 会帮你全局安装用到的包

创建完成后项目的目录：

 

 

注意可能遇到的一些错误提示：

1、报 vue/valid-template-root 错误

 这个问题是因为：vscode 的 Vetur 插件还没支持 Vue 3，解决办法是在 VSCode 配置里添加一行 "vetur.validation.template": false, 来关闭检查。【目前好像没有问题】

 

vue-router 使用的版本     

先可以查看vue-router 所有的版本号：  npm info vue-router versions

yarn add vue-router@4.0.0-beta.3

 

安装完成路由后，我们使用vue-router

把默认的main.js 文件修改为main.ts 

代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import HelloWorld from './components/HelloWorld.vue'

// !--- 关键代码开始
import { createWebHashHistory, createRouter } from 'vue-router'

const history = createWebHashHistory()
const router = createRouter({
    history,
    routes: [
        { path: '/', component: HelloWorld }
    ]
})
// !--- 关键代码结束

createApp(App).mount('#app')

写到这里的时候会遇到一个问题：

找不到模块 xxxx.vue 

 出现这样的原因：

Typescript 只能理解 .ts 文件，无法理解 .vue 文件

解决方案：

https://github.com/vuejs/vue-next-webpack-preview/issues/5

在根目录  创建 xxxx.d.ts 文件：【然后提示就消失了】

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}

这样 完成了前期的 准备。

然后再整理下代码：

在根目录下面 创建 router.ts 文件 专门用于管理路由，在main.js 中引入 router

main.ts 

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import { router } from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

router.ts

import { createWebHashHistory, createRouter } from 'vue-router'

import Home from "./views/Home.vue";

const history = createWebHashHistory()
export const router = createRouter({
    history,
    routes: [
        { path: "/", component: Home },

    ],
})

 

安装sass 的时候需要安装在 devDependencies

 

然后就是 官网的装修 ，以及组件的编写。

 

markdow 文本解析

文本优化 方案  使用github 的样式  1： npm install  github-markdown-css

方案2 ：引入markdown 文件

新建plugins 文件 创建md.ts

// @ts-nocheck
import path from 'path'
import fs from 'fs'
import marked from 'marked'

const mdToJs = str => {
    const content = JSON.stringify(marked(str))
    return `export default ${content}`
}

export function md() {
    return {
        configureServer: [ // 用于开发
            async ({ app }) => {
                app.use(async (ctx, next) => { // koa
                    if (ctx.path.endsWith('.md')) {
                        ctx.type = 'js'
                        const filePath = path.join(process.cwd(), ctx.path)
                        ctx.body = mdToJs(fs.readFileSync(filePath).toString())
                    } else {
                        await next()
                    }
                })
            },
        ],
        transforms: [{  // 用于 rollup // 插件
            test: context => context.path.endsWith('.md'),
            transform: ({ code }) => mdToJs(code)
        }]
    }
}

然后新建 vite.config.ts

// @ts-nocheck

import { md } from "./plugins/md";
import fs from 'fs'
import { baseParse } from '@vue/compiler-core'

export default {
    plugins: [md()],
    vueCustomBlockTransforms: {
        demo: (options) => {
            const { code, path } = options
            const file = fs.readFileSync(path).toString()
            const parsed = baseParse(file).children.find(n => n.tag === 'demo')
            const title = parsed.children[0].content
            const main = file.split(parsed.loc.source).join('').trim()
            return `export default function (Component) {
        Component.__sourceCode = ${JSON.stringify(main)
                }
        Component.__sourceCodeTitle = ${JSON.stringify(title)}
      }`.trim()
        }
    }
};

小技巧：如果想要看我们的预览页面，直接打开是看不到的

在这里可以安装 yarn global add http-server

success Installed "http-server@0.12.3" with binaries:
      - http-server
      - hs

 这时候运行命令： hs dist/ -c-1   可以直接打开页面。可以看到还是可以访问我们刚才的，页面。

因为我们有多个markdown 页面。【一般当页面上面重复的东西出现了3次的时候，就应该需要考虑把重复的东西进行抽离】 这时候需要 进行 组件封装 渲染markdown 文件 ：

在components目录下面 新建markdown.vue 文件

<template>
<article class="markdown-body" v-html="content">
</article>
</template>

<script lang="ts">
import {
  ref
} from 'vue'
export default {
  props: {
    path: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const content = ref < string > (null)
    import(props.path).then(result => {
      content.value = result.default
    })
    return {
      content
    }
  }
}
</script>

在router.js 中 引入

import { h } from 'vue';
// ! markdown 组件
import Markdown from './components/Markdown.vue';
const md = filename => h(Markdown, { path: `../markdown/${filename}.md`, key: filename })

// 使用方法： { path: "get-started", component: md('get-started') },

这样就完成了 markdown 文件的展示。

 

下面需要 展示源代码方便用户查看阅读文档

需要使用 vue-loader 的custom Blocks 功能

网页代码高亮插件 ：prismjs

 

把打包后 的代码上传到 码云的时候  会出现404，访问不到css 文件解决方式：

修改 vite.config.ts文件中 增加

 base: './',
 assetsDir: 'assets',

然后还会发现，按照原来的方式我们 异步加载 markdown 文件，打包的时候不能访问了，build 之后不加载 md 文件

原因：这是因为 rollup 不支持 import() 时拼字符串 要么让它支持（不靠谱） 要么不要拼字符串

解决方案：

import intro from './markdown/intro.md'
import getStarted from './markdown/get-started.md'
import install from './markdown/install.md'

const md = string => h(Markdown, { content: string, key: string })

同时引入 XXXX.md文件的时候，会出现提示信息

 

在这里可以参考 解决引入 vue 文件时的方法操作：

在xxx.d.ts 文件中添加：

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}

declare module '*.md' {
    const str: string
    export default str
}

官网完成后：

就是打包库文件，这里使用的是rollup 配置

安装依赖

rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss   rollup-plugin-terser

请先全局安装 rollup（或者局部安装） yarn global add rollup npm i -g rollup

 执行打包命令： rollup -c

发布npm

打包完成后，发布npm

首先查看自己的 npm 使用的是否是官方源：

请确保你没有在使用淘宝源，请使用官方源 npm config get registry npm config set registry https://registry.npmjs.org/

 

上传成功后的图片。。。。

最后就是测试自己的ui 库。。。