vue3搭建项目-typescript

版本说明：

D:\workspace\vue3-vite-project>tsc -v

Version 6.0.3

D:\workspace\vue3-vite-project>node -v

v22.23.1

NPM 安装 TypeScript

#使用国内镜像：
npm config set registry https://registry.npmmirror.com

#安装 typescript：
npm install -g typescript

#安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：
 tsc -v
 Version 3.2.2

然后我们新建一个 app.ts 的文件，代码如下：

var message:string = "Hello World" 
console.log(message)

然后执行以下命令将 TypeScript 转换为 JavaScript 代码：

tsc app.ts

构建项目

# 使用 Vite 创建 Vue 3 + TypeScript 项目（推荐）
npm create vite@latest
 

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install

#启动项目
npm run dev

配置依赖

安装路由router

在项目根目录下，使用包管理器安装 vue-router。Vue 3 必须使用 Vue Router 4.x 版本

# npm
npm install vue-router@4

# yarn
yarn add vue-router@4

路由配置

在 src 目录下新建 router 文件夹，并在其中创建 index.ts 文件; src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// 如果使用了路径别名 @，请确保 tsconfig.json 和 vite.config.ts 中已配置
import Home from '@/views/Home.vue' 
// 也可以使用懒加载方式导入组件
const About = () => import('@/views/About.vue')

//定义路由数组，使用 RouteRecordRaw类型以获得更好的TS提示
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

// 创建路由实例
const router = createRouter({
  // 使用 HTML5 History 模式
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

如果

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

报错，用以下格式替代它

import { createRouter, createWebHistory } from 'vue-router'

import type { RouteRecordRaw } from 'vue-router'

配置路径别名（可选但推荐）

为了方便引入文件（使用 @/ 代表 src/ 目录），需要配置 Vite 和 TypeScript。

‌修改 vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 可能需要安装 @types/node: npm i -D @types/node

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),           // 最常用：@ 指向 src
      '@components': path.resolve(__dirname, './src/components'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@utils': path.resolve(__dirname, './src/utils')
    }
  }
})

‌**修改 tsconfig.json (或 tsconfig.app.json)：**‌

在 compilerOptions 中添加 baseUrl 和 `paths以支持类型识别：

{
"compilerOptions": {
    "moduleResolution": "bundler",
    // 不再配置 baseUrl 和 paths，完全信任 Vite 的 alias
  }
}

挂载路由到 Vue 应用

修改入口文件 src/main.ts，引入路由实例并通过 .use() 方法注册。

‌**src/main.ts 内容示例：**

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由

const app = createApp(App)

app.use(router) // 注册路由

app.mount('#app')

在组件中使用路由

‌**在模板中导航 (App.vue 或其他组件)：**‌

使用 <router-link> 进行声明式导航，使用 <router-view> 渲染匹配到的组件。

<template>
  <nav>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>
  </nav>
  <!-- 路由出口，匹配到的组件将渲染在这里 -->
  <router-view />
</template>

在脚本中编程式导航：‌

在 <script setup lang="ts"> 中使用 useRouter。

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goToAbout = () => {
  router.push('/about')
}
</script>

<template>
  <button @click="goToAbout">跳转到关于页面</button>
</template>

配置axios

#安装

npm install axios -s

#或

yarn add axios -S

配置代理

在文件vite.config.ts里配置代理

  server: {
    proxy: {
      // 将以 /api 开头的请求代理到 http://localhost:3000
      '/api': {
        target: 'http://192.168.1.41:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

测试

新建文件 \src\views\Axios.vue

<script setup lang="ts">
import axios from 'axios'
let arraylength :number =0


const getData = ()=>{
    axios.get('api/echarts/score')
    .then(v=>{
        console.log('v: ', v); 
        arraylength = v.data.length
        console.log('arraylength: ', arraylength);
    })
    .catch(error=>{
        console.log('error: ', error);
    })
}
 

getData()

</script>

<template>
{{ arraylength }}
<h1> axios  </h1> 
</template>

拦截器

• 新建一个utils/request.ts文件

  import axios from 'axios'

  // 创建axios实例
  const http = axios.create({
  baseURL: import.meta.env.VITE_BASE_SERVER_URL,
  timeout: 5000,
  })

  // axios请求拦截器
  http.interceptors.request.use(
  config => {
  console.log('request: ', config);
  //从pinia获取token
  // const token = null
  // if (token) {
  // config.headers.Authorization = token
  // }
  return config
  },
  e => Promise.reject(e),
  )

  // axios响应拦截器
  http.interceptors.response.use(
  response => {
  console.log('response: ', response);
  // const res: CommonResult = response.data
  // if (res.code !== 200) {

    //   return Promise.reject('error')
    // } else {
      // 返回响应JSON中的data属性，不包括message和code
      return response.data
    // }
  },
  error => {
    // 全局处理异常请求
    console.log('error' + error)
  
    return Promise.reject(error)
  },

  )

  export default http

拦截器测试

• 在src目录下创建文件夹utils

• 创建某个API文件

• 使用

const user = await Users.fetchById('123');

echarts全局引入配置

Apache ECharts官网

html配置示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>第一个 ECharts 实例</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
  <!-- <script src="./myecahrts.js">  </script> -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <style>
    .echart {
      /* border: solid 1px red; */
      float: left;
      width: 48%;
      height: 300px;
      margin: 10px;
      box-shadow: 5px 5px 10px rgba(54, 47, 47, 0.1); 
    }
  </style>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div class="echart" id="main1"></div>
  <div  class="echart" id="main2"></div>
  <div class="echart" id="main3"></div>
  <div class="echart" id="main4"></div>

  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));

    // 指定图表的配置项和数据
    option1 = {
      title: {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['蒸发量']
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '蒸发量',
          type: 'bar',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }
      ]
    };
  
    axios({
      method: 'get',
      url: 'http://localhost:8080/echarts/score', 
      // url: 'http://192.168.1.41:8080/echarts/score', 
      Proxy: {
        host: "http://localhost",
        port: 8080
      }
    })
      .then(function (response) { 
        let arr = response.data
        let arrName = []
        let arrScore = []
        arr.forEach(obj => {
          console.log(obj);
          arrScore.push(obj.score)
          arrName.push(obj.sname)
        });

        option1.title.text = "成绩统计"
        option1.title.subtext = "数据来源于mysql"
        option1.series[0].data = arrScore
        option1.xAxis[0].data = arrName

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
      });
      // myChart1.setOption(option1);
 


    // **************************************************************************

    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    option2 = {
      ......
    };
 
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
  </script>
</body>

</html>

项目配置

#安装

npm install echarts --save

#本文使用的组件版本如下：

"echarts": "^6.1.0",

"vue": "^3.5.38",

main.ts 中删除引入的样式 style.css

import { createApp } from 'vue'
// import './style.css'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

设置主页 html和 body 标签的 内外边距为 0

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3-vite-project</title>
    <style>
        html, body {
            margin: 0;
            padding: 20px;
        }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

vue3项目配置-javascript

新建src/views/Echarts.vue,自行配置路由

<script setup lang="js">
import axios from 'axios'
import * as echarts  from 'echarts'
import {onMounted} from "vue";
 
function charBarMain1() {
  // 基于准备好的dom，初始化echarts实例
  let barChart = echarts.init(document.getElementById('main1'),'slight');

// 指定图表的配置项和数据
  let option1 = {
    // 标题
    title: {
      // 标题内容
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    // 图例
    legend: {
      // 图例名称
      data: ['销量','销售额']
    },
    xAxis: {
      // 坐标轴类型 category 为维度轴
      type: 'category',
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {
      // value 值轴
      type: 'value',
    },
    // 值轴数据
    series: [
      {
        // 图例名称
        name: '销量',
        // 图表样式 bar柱状图 line折线图
        type: 'bar',
        // 数值
        data: [5, 20, 36, 10, 10, 20]
      },
      {
        name: '销售额',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
// 使用刚指定的配置项和数据显示图表。

 axios({
      method: 'get',
      url: 'http://localhost:8080/echarts/score', 
      // url: 'http://192.168.1.41:8080/echarts/score', 
      Proxy: {
        host: "http://localhost",
        port: 8080
      }
    }).then(response=>{
      let arr = response.data
        let arrName = []
        let arrScore = []
        arr.forEach(obj => {
          console.log(obj);
          arrScore.push(obj.score)
          arrName.push(obj.sname)
        });

        option1.title.text = "成绩统计"
        option1.title.subtext = "数据来源于mysql"
        option1.series[0].data = arrScore
        option1.xAxis.data = arrName  
        barChart.setOption(option1)
         barChart.on('click',(v)=>{
          console.log('v: ', v);
        });  
    })

 
}

onMounted(()=>{
  charBarMain1();
});
</script>

<template>
  
  <div class="echart" id="main1"></div>
  <!-- <div  class="echart" id="main2"></div>
  <div class="echart" id="main3"></div>
  <div class="echart" id="main4"></div> -->

</template>

<style scoped lang="scss">
    .echart {
      /* border: solid 1px red; */
      float: left;
      width: 48%;
      height: 300px;
      margin: 10px;
      box-shadow: 5px 5px 10px rgba(54, 47, 47, 0.1); 
    }

#chartBar{
  width: 80%;
  height: 80%;
}

</style> 

vue3项目配置-typescript

#开发中

echarts按需引入(搁置)

在 Vue 3 + TypeScript 项目中集成 ECharts，推荐采用‌按需引入‌以优化打包体积，并结合 ‌Composition API‌ 进行组件封装或 Hook 提取

安装核心库

安装 ECharts 核心库及其 TypeScript 类型定义

npm install echarts --save
npm install @types/echarts --save-dev
# 如果需要使用 ResizeObserver 等工具，建议安装 vueuse
npm install @vueuse/core --save

按需引入配置（推荐）

全量引入会导致打包体积过大（约 1MB+）。建议在单独的文件中配置按需引入

创建 src/utils/echarts.ts

import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart,
  PieChart,
  RadarChart, // 按需添加其他图表类型
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  CanvasRenderer,
]);

export default echarts;

echarts的Vue插件

安装vue-echarts和echarts

npm install vue-echarts echarts --save
# 或者
yarn add vue-echarts echarts

在Vue组件中使用v-chart组件

<template>
  <div style="width: 400px;height: 400px;">
  <v-chart v-if="chartOptions" :option="chartOptions" autoresize />

  </div>
</template>

<script setup lang="js">
import { ref } from 'vue';
import VChart from 'vue-echarts';
import * as echarts from 'echarts';

// 使用 ECharts 的主题，例如 'macarons'，你也可以自定义主题
import 'echarts/theme/macarons'; // 引入主题文件

const chartOptions = ref({
  title: {
    text: 'ECharts 示例'
  },
  tooltip: {},
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
});
</script>

ElementPlus

详情参考官网

快速开始 | Element Plus

配置vue-i18n

• 在src下创建locales文件夹和下面的index.js、zh-CN.js、en-US.js
  index.js

  import { createI18n } from 'vue-i18n';
  import zh from './zh-CN';
  import en from './en-US';

  const defaultLanguage = 'zh-CN';

  const i18n = createI18n({
  locale: defaultLanguage,
  messages: { zh, en },
  });

  export { i18n };

zh-CN.js

export default {
  common: {
    ok: '确认',
    save: '保存',
    return: '返回',
    cancel: '取消',
    submit: '提交',
    query: '查询',
    reset: '重置',
  }
}; 

-修改main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import { i18n } from './locales';

const app = createApp(App);
app.use(router);
app.use(store);
app.use(i18n);
app.mount('#app'); 

使用

<template>
  <div>{{ $t('common.ok') }}</div>
</template>

启动运行，如果报错

报错信息

​

解决方法：

找到vue.config.js文件

​

（2）在vue.config.js文件后面加上一句:

lintOnSave:false

yarn add vue-i18n -S

pinia