1.整体

Vue3 + ts + vite + tsx
Vant 组件库

2. 命名规则与代码统一风格

参考vue3 -风格指南

3. 调试命令

开发： npm run dev
打包： npm run build
远程： npx vite –host

4. 文件名都要具名

反例：
 components/
      |- TodoList.vue
      |- TodoItem.vue
      |- TodoButton.vue
正例：
 components/
      |- TodoList.vue
      |- TodoListItem.vue
      |- TodoListItemButton.vue

5. 页面使用三段式script-setup + template, 组件使用tsx

页面：

  <template>
    <div>
      <Button type="button" @click="goTest()">测试</Button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from "vue";
  import { useRouter } from "vue-router";
  const router = useRouter();
  const  goTest = (...active: unknown[]) => {
    router.push('/TestWidgets')
  }
  const state = reactive({
    children: "children",
    label: "label",
  });
  </script>
  
  <style lang="scss" scoped>
  </style>

组件：

<script lang="tsx">
import { ref, reactive } from 'vue';
import { Button } from 'vant'
export default {
  setup() {
    const num = ref(0);
    const element = <div>hello test</div>
    const content = ref('test')
    const urlbaidu = ref('https://www.baidu.com')
    const testList = reactive([1,2,3])
    const showTest = ref(false)
    const testclick = () => {
      console.log('click')
      num.value++
    }
    return ()=>(
      <>
      <div>{num.value}</div>
      <Button type="primary"  onClick={testclick} >plus</Button>
      <a href={urlbaidu.value}>diandiandian</a>
      <input v-show={showTest.value}  v-model={content.value} />
      <div>{content.value}</div>
      {testList.map(item => <div>item</div>)}
      {element}
      {(()=>{
                switch (num.value) {
                    case 0:
                      return <div style = {{
                        border:'1px solid red'
                      }}>1</div>
                    case 1:
                      return <div>2</div>
                    default:
                      return null
                  }
              })()}
      </>
    )
  },
}
</script >

<style lang="scss">
</style>

6. 项目结构

── README.md
├── dist                                            /// 打包生成位置
├── public                                          /// public
│   └── favicon.ico
├── src                                             /// 项目目录
│   ├── assets                                      /// 资源文件
│   ├── components                                  /// 公共组件
│   ├── plugin                                      /// 插件、三方等封装
│   ├── routes                                      /// 路由
│   │   └── index.ts
│   ├── store                                       /// 全局存储store
│   │   └── index.ts
│   ├── styles                                      /// 公共scss(混入、变量、整体样式等)
│   │   ├── global.scss
│   │   ├── index.scss
│   │   ├── mixin.scss
│   │   └── variables.scss
│   ├── types                                       /// 类似bean，模型
│   │   └── router
│   │       └── index.ts
│   ├── utils                                       /// utils
│   │   ├── animate.ts                              /// 动画封装
│   │   ├── formExtend.ts                           /// 表单
│   │   ├── request.ts                              /// 网络请求
│   │   └── tools.ts                                /// tools
│   ├── views                                       /// 页面、模块
│   │   ├── Login
│   │   └── WorkPlatform
│   │       ├── compoents                           /// 页面业务组件                      
│   │       │   └── TestBinds.vue
│   │       └── views                               /// 页面子页
│   │           ├── Mine
│   │           ├── Notification
│   │           ├── Platform
│   │           └── Statistics
│   ├── main.ts                                     /// 入口
│   ├── App.vue                                     /// app 
│   ├── shims-vue.d.ts
│   ├── premission.ts                               
│   └── vite-env.d.ts
├── index.html
├── package-lock.json
├── package.json                                    /// 依赖
├── tsconfig.json                                   /// ts配置
└── vite.config.ts                                  /// vite配置

7. Vite.config.ts

image.png