前言
基于vue-cli 4.5以上的版本
vue-cli 安装我就不写了,网上一大把。官方安装教程
新建项目时要选择vue3的模板哦!!!
安装其他依赖
安装TypeScript
vue add typescript
安装less预处理器
npm install less npm install less-loader
修改目录结构
初始目录
|-- node_modules |-- public | |-- favicon.ico | |-- index.html |-- src | |-- assets | |-- components | | |-- HelloWorld.vue | |-- App.vue | |-- main.js | |-- shims-vue.d.ts |-- .gitignore |-- babel.config.js |-- package-lock.json |-- package.json |-- README.md |-- tsconfig.json
改造目录
|-- node_modules //依赖包 |-- components //组件目录 | |-- package //组件包 | | |-- HelloWorld //HelloWorld组件目录 | | | |-- hellow-world | | | | |--hellow-world.less | | | | |--hellow-world.tsx | | | | |--index.ts | |-- index.ts //组件入口 |-- examples //例子 | |-- assets //资源目录 | |-- components //例子的组件目录 | |-- App.tsx //根组件 |-- node_modules //依赖包 |-- public //静态文件 | |-- favicon.ico //浏览器地址前面的图标 | |-- index.html //模板 |-- .gitignore //git上传时忽略文件的配置 |-- babel.config.js //插件和设置的集合 |-- package-lock.json //锁定安装时的包的版本号 |-- package.json //包的依赖管理文件 |-- README.md //项目介绍 |-- tsconfig.json //typescript的配置 |-- vue.config.js //全局的 CLI 配置
-
删掉根目录src下的shims-vue.d.ts
-
把根目录的src下的App.vue改为App.tsx
-
把根目录的src重命名为examples
-
在根目录手动新建components以及里面目录和文件
-
在根目录手动新建vue.config.js
修改:/tsconfig.json
//tsconfig.json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "moduleResolution": "node" } }
修改:/vue.config.js
//vue.config.js module.exports = { publicPath: './', lintOnSave: 'warning', pages: { index: { entry: 'examples/main.ts', template: 'public/index.html', filename: 'index.html', title: 'water-ui-next-test', } } }
修改:/components/package/hello-world/hello-world.tsx
//HellowWorld.tsx import { defineComponent } from 'vue'; import './hellow-world.less';export default defineComponent({ name: 'hello-world', props: { msg: String}, setup(props) { return () => <h1 class="hello-world">{props.msg}</h1>; }, });
修改:/components/package/hello-world/hello-world.less
//HellowWorld.less .hello-world{ position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); }
修改:/components/package/hello-world/hello-world.ts
// index.ts import HelloWorld from './hello-world'; import {App} from 'vue' HelloWorld.install = (app: App) => { app.component(HelloWorld.name, HelloWorld); }; export default HelloWorld;
修改:/components/index.ts
//index.ts import HelloWorld from './package/hello-world/index'; import { App } from 'vue'; const components = [HelloWorld]; const install = (app: App) => { components.forEach(component => { app.use(component.install); }); }; export default {install,HelloWorld, };
修改:/examples/App.tsx
//App.tsx import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const msg = ref<string>('Vue3 + TypeScript + TSX') return () => <hello-world msg={msg.value}></hello-world>; }, });
修改:/examples/main.ts
//main.ts import { createApp } from 'vue' import App from './App' import WaterUi from '../components/index' const app = createApp(App) app.use(WaterUi) app.mount('#app')
最后跑起来
npm run serve
运行效果
源码下载
he-guang-wen.lanzous.com/iBchuiof3wh
结尾
传送门