一 · 从零开始搭建一个项目（初始化项目）

1.创建vite + vue-ts项目

 yarn create vite app-web --template vue-ts

2.安装依赖

yarn install

3.初始化项目,设置css默认的样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* IE 和 Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#app {
    font-family: 'Microsoft YaHei', Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.app-container {
    width: 100%;
    height: 100%;
}

如图

4.删除默认的App.vue里面的代码以及删除HelloWorld.vue

如图 5.运行项目 如图