阅读 2793

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

结尾

传送门

文章分类
前端
文章标签