# KKDAXUE

**Repository Path**: totodo/KKDAXUE

## Basic Information

- **Project Name**: KKDAXUE
- **Description**: KKDAXUE class1 
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-23
- **Last Updated**: 2024-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# kankandx

#### 介绍
侃侃大学里的那些专业 APP

#### 软件架构

1. VUE3 vue-router https://vuejs.org
2. Vite 5.0 https://cn.vuejs.org/guide/scaling-up/tooling.html#vite
3. DesignSystem  tdesign-vue-next https://tdesign.tencent.com/
4. Css tailwindcsss https://tailwindcss.com/

#### 安装教程
全局安装
```
npm i 
```

TDesigner 安装
```
npm i tdesign-vue-next tdesign-mobile-vue
```

tailwindcss 安装
```
npm i tailwindcss postcss autoprefixer
```

#### 使用说明
```
npm run dev
```


#### 开发教程
##### 1开发配置
###### 1.1. 配置t-designe

```javascript 
//main.js
import TDesign from 'tdesign-vue-next';
import 'tdesign-vue-next/es/style/index.css';

const app = createApp(App)
app.use(TDesign)
```


###### 1.2. 配制tailwindcss
配置文件 tailwind.config.js
```javascript
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{vue,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

配置文件 postcss.config.js
```javascript
//postcss.config.js
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
```
配置css文件 src/assets/index.csss

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

引入tailwindcsss mian.js中
```javascript
import './assets/index.css'
```


###### 1.3. 配置Vite
```javascript
//vite.config.JS
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


import tailwindcss from 'tailwindcss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
```


##### 2. Vue开发使用指南

###### 2.1 使用Vue-rotuer
```javascript
//main.js 

//引入组件
import Home from './components/Home.vue'
import AddAdvice from './components/AddAdvice.vue'

// 引入路由
import { createRouter, createWebHashHistory } from 'vue-router'

// 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
    { path: '/', component: Home },
    { path: '/addadvice', component: AddAdvice },
    { path: '/feedback', component: FeedBack },

]
// 创建路由实例
const router = createRouter({
    routes,
    history: createWebHashHistory()
})

// 使用路由
const app = createApp(App)
app.use(router)
```

VUE 模板中跳转
```html
 <router-link to="/addadvice">Add</router-link>
 <router-link to="/">Home</router-link>
```

VUE script 方法中调用
```javascript
this.$router.push('/')              //跳转到 Home.vue
this.$router.push('/addadvice')     //跳转到AddAdvice.vue

```

VUE模板中使用展示
```html        
<router-view></router-view>
```

###### 2.2 使用TDesigner下拉选择组件
选用t-input-selector 组件
* 参考文档
https://tdesign.tencent.com/vue-next/components/select?tab=demo


定义formdata，selectInput，以及下拉中的事件

```javascript
data(){
    selectSchool: '',           //学校下拉选择输入内容，可根据这个值进行后台过滤
    popupVisibleSchool: false,  //弹出下拉选择列表的展示控制

    formdata:{
        school:'',              //v-model 绑定formdata.school 传递给后台
    },
    schools:[]                  //学校选择器的数组
}
```

定义t-input-select 中绑定的事件

```javascript
    methods:{
            //学校下拉 输入下来
            onInputChangeSchool(val, content) {
            //console.log(val, content)
            this.getCategroySelect(val,'学校')
            },
            onOptionClickSchool(o) {
            //console.log(school)
            this.selectSchool = o.tagname;
            // 选中后立即关闭浮层
            this.popupVisibleSchool = false;

            //选中后赋予值
            this.formData.school = o.tagname;

            },
            onPopupVisibleChangeSchool(val,content){
            this.popupVisibleSchool = val;
            }
    }

```

使用t-input-select组件

``` html

        <t-form-item label="学校名称(*)" name="school">
          <!-- <t-input v-model="formData.school"></t-input> -->
          <t-select-input :value="selectSchool" :popup-visible="popupVisibleSchool" v-model="formData.school"
            panel="暂无数据" placeholder="请输入学校名称" allowInput @input-change="onInputChangeSchool" @popup-visible-change="onPopupVisibleChangeSchool">
            <template #panel>
              <ul class="tdesign-demo__select-input-ul-single">
                <li v-for="(school, index) in schools" :key="index" @click=" () => onOptionClickSchool(school)">
                  {{ school.tagname }}
                </li>
              </ul>
            </template>
          </t-select-input>
        </t-form-item>
```