Vite+Vue+ts 新建项目及简单示例

创建

pnpm create vite project-name --template vue-ts
project-name为新建项目的名称

配置

一、配置开发环境

1、创建新文件 .env.pro 与.env.dev
.env.pro（正式环境）文件中配置

VITE_BASE_API='http://url:9002/demo/'

.env.dev（开发环境）文件中配置

VITE_BASE_API='http://localhost:9002/demo/'

2、在pakage.json文件中补全script属性如下所示（可直接覆盖原有script属性）

"scripts": {
    "serve": "vite",
    "dev": "vite --mode dev",
    "pro": "vite --mode pro",
    "build": "vue-tsc && vite build",
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:pro": "vue-tsc --noEmit && vite build --mode pro",
    "preview": "vite preview"
  },

二、修改运行地址为localhost

将vite.config.ts文件中defineConfig修改成如下所示

export default defineConfig({
  base:'./',  //设置打包的文件路径为相对路径
  plugins: [vue()],
  server: {
    host: '0.0.0.0', //ip地址
    port: 8080, //端口号
    open: true //启动后是否自动打开浏览器
  }
})

三、配置后端接口

在/src下创建/api/index.ts,存放后端接口
控制台pnpm install axios

import axios from "axios"

const baseUrl=import.meta.env.VITE_BASE_API 

export async function queryList(factory:string):Promise<any[]> {
    try {
        const res = await axios.get(baseUrl+ 'queryList?factory='+factory);
        return res.data.data;
    } catch (error) {
        // 处理错误
        console.error("Error fetching factory list:", error);
        throw error;
    }
}

四、管理前端通用接口

在/src下创建/utils/index.ts,存放前端接口
一些通用前端代码

const util = {
    //获取time的年月日并以yyyy-MM-dd的日期格式输出
    // getDate: (time: Date): string => {
    //     return time.toLocaleDateString().replace(/\//g, '-');
    // },

    //获取time的年月日并以yyyy年MM月dd日的日期格式输出
    getDate: (time: Date): string => {
        const year = util.getYear(time);
        const month = util.getMonth(time);
        const day = util.getDay(time);
        return `${year}年${month}月${day}日`
    },

    //获取time的时分秒并以HH:mm:ss的时间格式输出
    getTime: (time: Date): string => {
        const h = util.getHours(time);
        const m = util.getMinutes(time);
        const s = util.getSeconds(time);
        return `${h}:${m}:${s}`;
    },

    //根据日期获取对应的week
    getWeek: (time: Date): string => {
        const week = time.getDay();
        const weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        return weeks[week];
    },

    getYear: (time: Date): number => {
        const year = time.getFullYear();
        return year;
    },

    getMonth: (time: Date): string => {
        let month = time.getMonth() + 1;
        return (month < 10 ? "0" : "") + month;
    },

    getDay: (time: Date): string => {
        let day = time.getDate();
        return (day < 10 ? "0" : "") + day;
    },

    getHours: (time: Date): string => {
        let h = time.getHours();
        return (h < 10 ? "0" : "") + h;
    },

    getMinutes: (time: Date): string => {
        let m = time.getMinutes();
        return (m < 10 ? "0" : "") + m;
    },

    getSeconds: (time: Date): string => {
        let s = time.getSeconds();
        return (s < 10 ? "0" : "") + s;
    },
    
    //输入百分比得到其对应宽度
    setPercentWidth :(percent:number):number => {
        let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return 0;
        const decimalPercentage = percent / 100;
        const width = clientWidth * decimalPercentage;
        return width;
    },
};

export default util;

五、静态资源引入

将图片直接放在pulic中打包时会一起打包。
引入 public 中的资源永远应该使用根绝对路径- 举个例子， public/icon.png 应该在源码中被引用为 /icon.png。
public 中的资源不应该被 JavaScript 文件引用

六、组件引入

创建组件TestComponent.vue并将其引入组件App.vue中

<script setup lang="ts">
import TestComponentfrom './components/TestComponent.vue'
</script>

<template>
  <TestComponentfrom />
</template>

<style scoped>
</style>

七、编写组件（实现一个表格轮播图并且实时更新页面时间值）

轮播图使用DataV组件dv-scroll-board，参考文章https://datav-vue3.netlify.app/Guide/Guide.html
控制台安装：pnpm install @kjgl77/datav-vue3

<script setup lang="ts">
  import {ScrollBoard} from '@kjgl77/datav-vue3'  //引入data-v中轮播表组件
  import util from '../utils';  //引入前端通用接口
  import { onMounted,ref,onUnmounted,reactive } from 'vue';
  import { queryList} from '../api';  //引入后端接口
  
  const time=ref('');
  const date=ref('');
  const timer=ref<number | null>(null);;

  const setDate=()=>{
    time.value=util.getTime(new Date);
    date.value=util.getDate(new Date);
  }
  //const data=ref([]);	//用于接收后端接口返回的数据
  const data=[
  ["test1","1","1","1","11","1","1"],
  ["test2","1","1","1","11","1","1"],
  ["test3","1","1","1","11","1","1"],
  ["test4","1","1","1","11","1","1"],
  ["test5","1","1","1","11","1","1"],
  ["test6","1","1","1","11","1","1"],
  ["test7","1","1","1","11","1","1"],
  ["test8","1","1","1","11","1","1"],
  ["test9","1","1","1","11","1","1"],
]
//用于给scroll-board提供配置数据
  const config = reactive({
  	  //定义表头
      header: ['column1', 'column2', 'column3', 'column4', 'column5', 'column6', 'column7'],
      //定义每一列的宽度
      columnWidth: [util.setPercentWidth(6), util.setPercentWidth(13), util.setPercentWidth(13), util.setPercentWidth(13), util.setPercentWidth(13), util.setPercentWidth(13), util.setPercentWidth(13), util.setPercentWidth(13)],
      data: data,
      //表头颜色
      headerBGC: 'rgba(255,255,255,0.2)',
      //基数行颜色
      oddRowBGC: 'rgba(9,37,50,0.4)',
      //偶数行颜色
      evenRowBGC: 'rgba(10,32,50,0.3)',
      //是否添加序号
      index: true,
      //一个可见轮播表展示多少条数据
      rowNum: 6,
      //设置每一列文本放置位置
      align:['center','center','center','center','center','center','center','center'],
      //设置表头高度
      headerHeight: 40
  })

	//通过后端接口返回数据并用data接收
    // const queryList= async (factory:string) => {
    //     try {
    //         let res: any = await queryList(factory);
    //         data.value = res;
    //     } catch (error) {
    //         console.error(error);
    //     }
    // }
    

    onMounted(()=>{
      setDate();
      timer.value=setInterval(()=>{
        setDate()
      },1000);
     	//调用接口
      // queryList('1230')
  })

  onUnmounted(() => {
  	  //关闭定时任务
      if(null!=timer.value){
        clearInterval(timer.value);
      }
    });
</script>

<template>
   <div class="timeDate">
     <span>{{ date }}</span>
     <span>{{ time }}</span>
   </div>
   <div class="main-content">
    <scroll-board class="scroll-board" :config="config"/>
   </div>
</template>

<style scoped>
.main-content{
  position: relative;
  width:50%;
  height: 80vh;
}
:deep(.scroll-board  .rows .row-item){
  font-size: 40px;
}
:deep(.scroll-board .header .header-item){
  font-size: 40px;
}
</style>