搭建开发环境
Vite初始化
新建一个空的文件夹,比如叫 Vue3UI ,然后使用命令行在此文件夹下使用npm初始化:
npm init
回车后,我们再安装vite(我们这里选择使用Vite进行打包,使用别的也类似):
npm install --save-dev vite
根目录创建 index.html 文件,里面内容如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Vue3 UI</title>
</head>
<body>
Hello Vue3 UI!
</body>
</html>
现在,在之前生成的 package.json 中添加vite启动命令:
{
"script": {
"dev": "vite"
}
}
现在,试着运行Vite吧:
npm run dev
看见类似下面的语句,就说明运行成功了:
VITE v5.3.4 ready in 841 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
然后浏览器访问即可:
至此,Vite就准备好了。
小结:Vite其实简单的理解就是一个HTTP服务器,只不过,可以通过安装插件等方式,对一些文件等进行"调整"。
测试TS代码
在正式开发Vue组件前,我们先来试试普通的TS代码是否可以正常运行。
创建文件 index.ts:
const str: String = 'Hello Vue3 UI';
console.log(str);
在 index.html 的body标签中引入:
<script src="./index.ts"></script>
保存后刷新浏览器,可以在控制台中看到如图显示,说明 TS 可以正常使用:
添加对Vue的支持
首先,我们需要安装Vue(这里安装的是vue3版本,因为vue发布后由用户安装,因此这里安装到dev下,下同):
npm install --save-dev vue
下面,我们来具体说明,以一个Button为例。
Render函数
创建 src/Button/index.ts 文件:
import { defineComponent, h } from 'vue';
export default defineComponent({
name: 'Button',
render() {
return h("button", null, "一个按钮(点击我)");
}
});
在 index.html 中增加根容器,展示组件:
<div id="app"></div>
在 index.ts 中创建 Vue 实例并使用组件:
import { createApp } from 'vue';
import Button from './button';
createApp(Button).mount('#app');
启动项目后,浏览器没有显示按钮,而且控制台报错:
Uncaught SyntaxError: Cannot use import statement outside a module (at index.ts:1:1)
因为 index.ts 中使用了 es6 的语法,所以在 index.html 中引入时需要指定为模块导入:
<script src="./index.ts" type="module"></script>
修改后按钮显示了,但是在浏览器控制台会有以下告警:
怎么办?安装下面插件:
npm install --save-dev @vitejs/plugin-vue
新建vite.config.ts文件并写入如下内容:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue() // VUE插件
]
});
再次启动时,命令行会如下警告:
在 package.json 中增加配置:
{
"type": "module"
}
运行项目,可以看到按钮,启动时和浏览器控制台就都没有警告了:
单文件组件
也就是使用 Button.vue 文件来编写组件。
上一步我们已经添加了 @vitejs/plugin-vue 插件,所以这里其实已经支持了。
JSX 组件
首先需要安装支持jsx的插件:
npm install --save-dev @vitejs/plugin-vue-jsx
然后修改 vite.config.ts 配置:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [
vue(), // VUE 插件
vueJsx() // JSX 插件
],
});
刚刚的按钮,就可以改成 src/Button/index.tsx :
import { defineComponent, h } from 'vue';
export default defineComponent({
name: 'Button',
render() {
return <button>一个按钮(点击我)</button>;
}
});
封装库文件
组件库需要支持两种导入方式:
- 完整引入 :一次性引入全部组件,通过 Vue.use 以 Vue 插件的方式引入;
- 按需引入 :导入单个组件,使用Vue.component 注册。
创建入口文件 src/index.ts,内容如下:
import { App } from "vue";
import UiButton from "./Button";
export { UiButton }; // 导出单独组件
export default { // 实现 install 方法
install(app: App) {
app.component(UiButton.name as string, UiButton);
}
}
现在,需要在 vite.config.ts 文件中配置build:
{
build: {
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue"
}
}
},
minify: false, // 可以指定压缩工具terser
sourcemap: true, // 是否生成 sourcemap 文件
cssCodeSplit: true, // css 代码分割
lib: {
entry: "./src/index.ts",
name: "Vue3UI",
fileName: "vue3ui",
formats: ["es", "umd", "iife"] // 输出常用的三种模块类型
}
}
}
在 package.json 增加 build 命令打包:
{
"script": {
"build": "vite build"
}
}
运行 npm run build 即可完成打包。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。