搭建vue3+axios+Element Plus+typescript框架

步骤

1.首先需要安装node，并确保 node 版本是 10.13 或以上。 2.推荐使用yarn来管理npm依赖

一、搭建Vite + Vue3 + TypeScript

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
命令行输入： yarn create @vitejs/app

输入文件名 包名。选择vue然后再选择vue-ts

cd到之前的文件名内，yarn 再 yarn dev。

打开浏览器

如上图，表示 Vite + Vue3 + TypeScript 简单的项目骨架搭建完毕。

二、修改 Vite 配置文件

Vite 配置文件 vite.config.ts 位于根目录下，项目启动时会自动读取。

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 3000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true // 允许跨域

/*    设置代理
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx:8000',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace('/api/', '/')
      }
    }*/
  }
})

如果编辑器提示 path 模块找不到，则可以安装一下 yarn add @types/node

三、vue.js官方路由Vue Router

1.安装支持 Vue3 的路由工具
yarn add vue-router@4

2.创建 src/router/index.ts 文件
在index.ts文件中写入

import {
    createRouter,
    createWebHashHistory,
    RouteRecordRaw
} from 'vue-router'
import Home from '@/views/home.vue'
import Vuex from '@/views/vuex.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/vuex',
        name: 'Vuex',
        component: Vuex
    },
    {
        path: '/axios',
        name: 'Axios',
        component: () => import('@/views/axios.vue') // 懒加载组件
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

并在src下新建一个views文件夹
在views 目录下创建 home.vue 、vuex.vue 、axios.vue。

3.在main.ts里面挂载路由配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

四、vue.js官方路由Vue Router

---

总结

还没写完就这样吧！