公司网站百度排名没有了,提供网站建设方案ppt,响应式网站模板html,西安做网站seo开发步骤#xff1a;1.创建一个vue项目#xff0c;2.开发一个组件。 3.注册成插件。 4.vite和package.json配置。5.发布到npm #xff11;.创建一个vue项目
npm create vuelatest 生成了vue项目之后#xff0c;得到了以下结构。 在src下创建个plugins目录。用于存放开发的…开发步骤1.创建一个vue项目2.开发一个组件。 3.注册成插件。 4.vite和package.json配置。5.发布到npm .创建一个vue项目
npm create vuelatest 生成了vue项目之后得到了以下结构。 在src下创建个plugins目录。用于存放开发的插件。 2.开发一个组件
1现在可以开发插件了。在plugins目录下创建一个vue组件。TestButton.vue如下
templatedivbutton插件中的按钮/button/div
/templatescript langts setup script
3.注册成插件
在plugins目录下创建一个install.ts。用于注册组件。注册组件需要导出个install方法。将组件注册到app中。具体可以参照vuejs官网。
import TestButton from ./TestButton.vueexport default {install: (app:any){app.compontent(TestButton.name,TestButton)}
}
4.vite和package.json配置
1配置vite。指定打包的入口文件以及输出。 import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
import vueDevTools from vite-plugin-vue-devtools// https://vite.dev/config/
export default defineConfig({// 用于构建 build:{lib:{// 构建的入口。这里需要设置为刚才创建的plugins下的install.tsentry:./src/plugins/install.ts,name:TestUI,fileName: (format) TestUI.${format}.js, // 输出文件名// 使用的打包模式formats:[umd],},rollupOptions:{// 将 Vue 标记为外部依赖external:[vue], output:{globals:{vue:Vue // 在 UMD 构建中Vue 被认为是全局变量}}}},plugins: [vue(),vueDevTools(),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))},},
})
2进行打包
npm run build
3配置package.json。
{name: TestUI,version: 1.0.25,private: false,type: module,// 入口文件设置为上一步打包完成后生成的js文件main: ./dist/ysjui.umd.cjs, module: ./dist/ysjui.umd.cjs,// 指定dist和lib发布到npm包中files: [dist,lib],author: {name: xxx},// 其他的配置项...
} 5.发布至npm
npm publish
