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
