Vue3组件封装（TypeScript + Tsx ）—— 打地基

前言

基于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

结尾

传送门

• jsx部分语法
• vue3中文官网
• TypeScript教程
• vue-cli中文官网