Vue+typescript+vite简单项目

已于 2024-02-01 16:18:30 修改
阅读量533 收藏 8
点赞数 8
文章标签： vue.js typescript javascript
于 2024-01-29 10:39:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44359081/article/details/135885463
版权
本文详细介绍了使用Vite和Vue.js创建一个基于TypeScript的项目，包括设置基础结构、安装依赖、配置路由、ESLint和Prettier插件，以及实现登录验证和API调用。还展示了如何在VSCode中管理和配置项目相关设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 1.直接创建 hello-world为项目名称

npm create vite@latest hello-world -- --template vue-ts

2. 执行连贯操作命令如下

cd hello-world && npm install && npm run dev 

3. 见运行效果, 如下: 

 4.在VScode安装ESLint和Prettier - Code formatter，更全的插件可搜索史上最全vscode配置使用教程 - 知乎

基本插件

npm install vue-router

 npm install element-plus

 npm i --save-dev @types/node

npm install axios 

npm install qs

 5.内容填充

 App.vue

router页面

import { createRouter, createWebHashHistory } from 'vue-router'
const router =createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/',
            redirect:'/login'
        },
        {
            path:'/login',
            name:'Login',
            component:() => import('../views/login/login.vue')
        },
        {
            path:'/main',
            name:'Main',
            component:() => import('../views/main/main.vue')
        }
    ]
})
export default router

main.ts文件

vite.config.ts文件。proxy代理路径可配置成测试环境或者正式环境的，如果本地服务没启的话

tsconfig.json 

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true, 
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"], 
      "@views/*": ["src/views/*"]
    },
    "types": ["element-plus/global", "node"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

login页面

<template>

<div>

    <h1>登录页面</h1>

    <el-form

    ref="formLogin"

    :model="loginData.loginForm"

    class="login-form"

    label-position="top"

    label-width="120px"

    size="large"

  >

    <el-row style="maring-left: -10px; maring-right: -10px">

      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">

        <el-form-item>

          <LoginFormTitle style="width: 100%; text-align: center" />

        </el-form-item>

      </el-col>

      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">

        <el-form-item prop="username">

          <el-input

            v-model="loginData.loginForm.username"

            placeholder="请输入用户名"

          />

        </el-form-item>

      </el-col>

      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">

        <el-form-item prop="password">

          <el-input

            v-model="loginData.loginForm.password"

            placeholder="请输入密码 "  

            type="password"

          />

        </el-form-item>

      </el-col>

      <el-col :span="24" style="padding-left: 10px; padding-right: 10px; height: 55px">

        <el-form-item>

          <img :src="loginData.yzm" style="width: 17%; " />

          <el-icon class="icon"

            ><component  @click="getYZM" style="cursor: pointer"

          /></el-icon>

          <el-input

            v-model="loginData.securityCode"

            placeholder="运算结果"

          />

        </el-form-item>

      </el-col>

      <el-col :span="24" style="padding-left: 10px; padding-right: 10px;    margin-top: 6%;">

        <el-form-item>

          <el-Button   class="full-width" type="primary" @click="handleLogin">

            登录

          </el-Button>

        </el-form-item>

      </el-col>

    </el-row>

  </el-form>

</div>

</template>

<script lang="ts" name="Login" setup>

import * as LoginApi from "@/api/login";

import router from '@/router';

import { onMounted, reactive, ref } from 'vue';

const formLogin = ref();

const loginData = reactive({

  isShowPassword: false,

  loginForm: {

    tenantName: "",

    username: "",

    password: "",

    captchaVerification: "",

    rememberMe: false

  },

  yzm: "",

  securityCode: "",

  yzmValue: ""

})

onMounted(() => {

  getYZM()

})

//获取验证码图片

const getYZM = async () => {

  const res = await LoginApi.getYZM({})

  if (!res) {

    return

  } else {

    loginData.yzm = window.URL.createObjectURL(res.data)

    loginData.yzmValue = res.headers.captcha

  }

}

// 登录

const handleLogin = async () => {

  try {

    if (loginData.securityCode !== loginData.yzmValue) {

      alert("验证码错误")

      return

    }

    const res = await LoginApi.RHLogin({

      loginName: 'admin',

      password: 'SuperETL_InAT2023'

    })

    if (!res) {

      return

    }

    router.push({ path:'/main' })

  } finally {

    

  }

}

</script>

js部分

main页面

<template>
  <h1>项目信息页面</h1>
    <el-button type="primary" class="user" plain @click="getMsg" style="margin-right:30px;"><i-ep-Brush />获取项目信息</el-button> 
    <el-button type="primary" plain @click="goTo"><i-ep-Brush />返回</el-button>   
  <div style="margin-top:30px;width:60%"> 
    <el-table
    :data="tableData"
     style="width: 100%"
    >
    <el-table-column
      prop="subsystemName"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="brand"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="person"
      label="地址">
    </el-table-column>
  </el-table> 
    
  </div>
</template>

<script lang="ts" setup name="Main">  
import router from "@/router";
import loadData from "./main.ts";
const {  tableData,   getList} = loadData()

function goTo(){
  router.push({
    name:'Login'
  })
}
function getMsg(){
  getList()
}
 
</script>
<style scoped lang="scss">
.search-box {
  display: flex;
  justify-content: space-between;
  border-bottom: var(--solid-border);
  margin-bottom: 15px;
  :deep(.el-input__inner) {
    width: 100px;
  }
}
.btn-container {
  margin-bottom: 15px;
  display: flex;
}
.area {
  width: 159px;
}
.lupload {
  margin-left: 12px;
}
</style>
./main.ts

main.ts文件，将main.vue页面中的js部分踢出，单独放在main.ts文件中

import { subSystemList } from "@/api/main"
import { subsystemQueryForm } from "@/types/subsystem"
import {ref} from 'vue'
//初始化数据
const getDefaultValue = (): subsystemQueryForm => {
  return {
    appId: "",
    subsystemName: "",
    brand: "",
    person: "",
    protocolTypeId: "",
    developName: "",
    createTime: "",
    page: 1,
    limit: 20
  }
} 
export default function loadData() {
  // 查询条件表单
  const queryParams = ref<subsystemQueryForm>(getDefaultValue())
  // 分页信息
  const total = ref<number>(6)
  // 表格数据
  const tableData = ref<[]>([])
  // 列表的loading
  const loading = ref<boolean>(false) 
  //获取列表数据
  const getList = async () => {
    loading.value = true
    try {
      queryParams.value.appId = "58";
      const res = await subSystemList(queryParams.value)
      if (res) {
        tableData.value = res.data.list
        total.value = res.data.totalCount
      }
    } catch (error) {
    } finally {
      loading.value = false
    }
  } 
  // 更改分页操作
  const handlePagination = () => getList() 
  return {
    queryParams,
    getList,
    tableData,
    total,
    loading,
    handlePagination
  }
}

main.ts中获取接口，在types中定义实体类，用来接受接口返回信息

// 项目基本参数
export interface subsystemQueryForm extends Page {
  appId: string
  subsystemName: string
  brand: string
  person: string
  protocolTypeId: string
  developName: string
  createTime: string
}

实体类中继承的page类，封装在global.d.ts文件中

export { }

declare global {

  interface Fn<T = any> {

    (...arg: T[]): T

  }

  type Nullable<T> = T | null

  type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>

  type Recordable<T = any, K = string> = Record<K extends null | undefined ? string : K, T>

  type ComponentRef<T> = InstanceType<T>

  type LocaleType = "zh-CN" | "en"

  type SexType = 1 | 2

  type AxiosHeaders =

    | "application/json"

    | "application/x-www-form-urlencoded"

    | "multipart/form-data"

  type AxiosMethod = "get" | "post" | "delete" | "put" | "GET" | "POST" | "DELETE" | "PUT"

  type AxiosResponseType = "arraybuffer" | "blob" | "document" | "json" | "text" | "stream"

  type Position = "left" | "right" | "top" | "middle" | "bottom"

  interface AxiosConfig {

    params?: any

    data?: any

    url?: string

    method?: AxiosMethod

    headersType?: string

    responseType?: AxiosResponseType

  }

  interface IResponse<T = any> {

    code: string

    data: T extends any ? T : T & any

  }

  interface PageParam {

    pageSize?: number

    pageNum?: number

  }

  interface Page {

    page: number

    limit: number

  }

  interface Tree {

    id: string | number

    name: string

    children?: Tree[]

  }

  type DataTreeResult = Tree & {

    parentId: string | number

  }

  interface DepartTreeResult {

    id: string | number

    departName: string

    departCode: string

    parentId: string | number

    children?: DepartTreeResult[]

  }

  interface TreeSelectOpts {

    value: string | number | boolean | object

    label: string

    children: TreeSelectOpts[]

  }

  interface DictOpts {

    value: string | number | boolean | object

    label: string

  }

  export interface InterfaceMenu extends Tree {

    path: string

    show: boolean

    icon: any

    children?: InterfaceMenu[]

  }

  interface Window {

    T: any // 天地图对象

  }

}

api接口路径配置页面

export enum URL_CONFIG { 
  api = "/api"  
}

//融合平台接口
//验证码
export const captcha = `${URL_CONFIG.api}/platform/sysUser/captcha`
// 登录
export const RH_LOGIN_URL = `${URL_CONFIG.api}/platform/sysUser/login`

//获取项目列表
export const appBrowse_url = `${URL_CONFIG.api}/platform/app/browse`

// 子系统管理
export const tagAccess_url = `${URL_CONFIG.api}/platform/sysReport/tagAccess`
export const subsystemAccess_url = `${URL_CONFIG.api}/platform/sysReport/subsystemAccess`
export const subSystemList_url = `${URL_CONFIG.api}/platform/subSystem/browse`
export const subSystemInfo_url = `${URL_CONFIG.api}/platform/subSystem/info`
export const subSystemDelete_url = `${URL_CONFIG.api}/platform/subSystem/delete`
export const subSystemModify_url = `${URL_CONFIG.api}/platform/subSystem/modify`
export const subSystemAdd_url = `${URL_CONFIG.api}/platform/subSystem/add`
export const subSystemExport_url = `${URL_CONFIG.api}/platform/subSystem/export`
export const subSystemImport_url = `${URL_CONFIG.api}/platform/subSystem/import`

按照login页面和main页面分别创建ts文件，实现接口的调用

import request from "@/api/axios"
import {
  RH_LOGIN_URL,
  captcha
} from "./api"

export interface SmsCodeVO {
  mobile: string
  scene: number
}

export interface SmsLoginVO {
  mobile: string
  code: string
} 
// 登录
export const RHLogin = (data: object) => {
  return request.post({ url: RH_LOGIN_URL, data })
}
// 验证码
export const getYZM = (data: object) => { 
  return request.download({ url: captcha, data })
}

import request from "@/api/axios"

import { subsystemQueryForm } from "@/types/subsystem"

import { subSystemList_url } from "./api"

export const subSystemList = (data: subsystemQueryForm) => {

  return request.post({ url: subSystemList_url, data })

}

axios请求封装一下

login或者main页面js封装

登录成功，跳转到/main页面，点击按钮，通过axios获取接口信息

it打工人_c
关注
vite-vue-ts-admin-template:vue3 +打字稿+ vite管理模板
04-10
vite-vue-ts-admin-template 总览 这是一个极简的 vue typescript vite admin 管理后台。它只包含了 element-plus & axios & svgicon & permission control & lint，这些搭建后台必要的东西。 相关项目 如何设置以及启动项目 安装依赖 npm install 启动本地开发环境 npm run dev 构建生产环境 npm run build 预览发布环境效果 npm run serve 代码格式检查以及自动修复 npm run lint License
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
Vue3.0+TypeScript+Vite
EvilChan的博客
08-12 6622
Vue3.0+TypeScript+Vite初体验
使用Vite创建一个Vue项目
最新发布
2302_80508763的博客
04-08 670
使用Vite模版创建一个Vue项目
Vue3+TypeScript+vite
Hello_world_XXL的博客
11-03 287
VScode插件：volar
Vue3+TypeScript + vite 创建项目步骤
田兴的博客
02-16 2388
项目搭建 vite npm init vite-app <projectName> //或者 yarn create vite-app <projectName> vue-cli 如果已经全局安装过旧版本的vue-cli，先卸载。 npm uninstall vue-cli -g //yarn global remove vue-cli 安装新版@vue/cli npm install -g @vue/cli //或者 yarn global add @vue/cli
Vue3.X新建一个基于vite+typescript的项目
IU
08-15 397
在项目中使用vue3+vite+ts技术栈，改如何快速安装呢，接下来我就来介绍一下在vue3快速使用vite+ts的方法。
最新完整Vite+Vue3+TypeScript项目实战.zip
05-10
最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新...
VUE3+ TypeScript + Vite思维导图，脑图
01-02
这个项目不仅展现了Vue 3、TypeScript和Vite的现代前端开发实践，还体现了开发团队对细节的关注和对项目可维护性的重视。通过采用这些技术，项目能够提供流畅的用户体验，并为开发者提供高效的开发流程。
基于vue3+vite+typescript+pinia后台管理系统模版源码+详细说明.zip
05-05
采用 Vite4.0 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理……） 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范 使用 husky、lint-staged、commitlint、commitizen、cz-git ...
vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本
04-02
综上所述，这个项目结合了 Vue3、Vite5、TypeScript 和 Element-Plus 的优点，提供了一个现代化的后台管理前端模板，适合开发高效、稳定、具有良好用户体验的管理系统。通过学习和使用这个模板，开发者可以深入理解 ...
一个Vite+Typescript+Vue3项目
huangzhixin1996的博客
04-24 1270
一、关于Vue3和Vite 近几年来vue2已经成功过渡升级为Vue3，它对vue的生态带来了一次重大的提升和改革，新增了composition Api这样一个强大的功能，为我们组件选项的开发提供了一个强而有力的手段，另外还有诸如：多根节点，语法更新，双向渲染等的一系列变更，vue生态的跃迁具体可以参考vue3的最新官方文档迁移策略中的信息。 随着Vue3的到来，在面临性能考验的同时，新一代构建工具Vite也随之出现。 当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长
Vite + Vue + TypeScript 项目搭建总结
凡的博客
09-18 1550
Vite + Vue + TypeScript 项目搭建总结
前端知识分享——Vue3 + Vite + TypeScript 搭建基础项目
sinat_43095140的博客
03-31 3264
Vue3 + Vite + TypeScript 搭建基础项目Vue3 + Vite + TypeScript 搭建基础项目Vue 3 + Vite + Typescript项目初始化代码规范和 ESlint基础配置编辑器集成配置 commit 钩子在开发和构建的时候进行验证GitCommit规范Vite 中的 TS 环境说明Vue3 中的 TS 支持Vite 中的 script-setup 语法script-setup 中的编译宏配置转换 JSX 和 TSX初始化 VueRouter初始化 Vuex配置模
vite+vue3+TypeScript 搭建项目基本框架
Mr_XiMu的博客
04-23 4535
vite+vue3+TypeScript 搭建项目基本框架
vite创建vue项目教程
very__good_的博客
12-08 1406
vite+vue+typescript
vite搭建vue3、typeScript项目
LuoYi_ly_的博客
07-15 6616
采用vite搭建vue3+ts+element-plus项目
Vue+TypeScript
Dacongs的博客
10-11 545
现在前端主流的三大框架全是用TypeScript开发的,包括自己使用Vs Code 也是用TS编写的,可见TypeScript强大之处. 最近在学习Ts,ts的官方定义是这样的:TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,能运行在任何浏览器,任何操作系统当中. 由于Javascript是一门脚本语言,虽说一直强调面向对象的编程思想,在es6引入了...
收集：vue+tyscript项目
沧笙踏歌的博客
07-19 319
Ant Design vue https://vue.ant.design/docs/vue/introduce-cn/ Ant Design Pro 的 Vue 实现 码云 预览 效果图 ant-design-pro-vue ***** gihtub 官网 预览 vue-alain （用的ts） github 预览 说明 vue-element-admin https://panji...
Vue3+TypeScript打造Vite项目下TodoList示例
资源摘要信息:"在本案例中，我们将详细介绍使用Vue 3、TypeScript以及Vite构建一个简单的待办事项列表（todoList）应用的过程。这个案例不仅会涵盖前端开发的基础技术栈，还会展示现代前端工程化工具的高效使用。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值