vite+vue3+ts

1、通过vite 脚手架创建项目

  第一步：my-v3项目名称
    npm init vite my-v3 -- --template vue默认拉取vue的模板，
    npm init vite my-v3-- --template react默认拉取react的模板，选择模板后续不会再让你选择
    npm init vite my-v3 会让你一步步选择
    npm init vite my-v3

2、选择vue

3、选择vue-ts

4、 回车继续执行下面图示三行代码 cd 项目名 npm install npm run dev

5、vite.config.ts文件配置 vite+ts 配置别名：path模块是node.js内置的功能，但是node.js本身并不支持typescript，所以直接在typescript项目里使用是不行的

解决方法：安装@types/node

npm install @types/node -D

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

    // https://vitejs.dev/config/
    export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
        '@': resolve(__dirname, 'src'),
        }
    },
    base: './', // 打包路径
    server: {
        port: 3008, // 服务端口号
        open: true, // 服务启动时是否自动打开浏览器
        cors: true, // 允许跨域
        proxy: {
        '/api': {
            target: 'http://www.xxxx.com.cn',
            changeOrigin: true,
            rewrite: (path) => path.replace('/api', '')
        }
        }
    }
    })

//编辑tsconfig.json

// tsconfig.json

    {
    "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["ESNext", "DOM"],
        "skipLibCheck": true,
        "baseUrl": ".", 
        "paths":{
        "@":["./src"],
        "@/*":["./src/*"]
        }
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "references": [{ "path": "./tsconfig.node.json" }]
    }

6、添加路由

//npm install vue-router@4 //安装路由

//创建 src/router/index.ts 文件
   /** * createRouter 这个为创建路由的方法
 * * createWebHashHistory 这个就是vue2中路由的模式，
 * * 这里的是hash模式，这个还可以是createWebHistory等
 * * RouteRecordRaw 这个为要添加的路由记录，也可以说是routes的ts类型
 *  */

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "index",
    component: () => import("../view/index.vue"),
  },
  {
    path: "/home",
    name: "home",
    component: () => import("../view/home.vue"),
  },
];

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

export default router;

//main.ts 中挂载
    import { createApp } from "vue";
    import "./style.css";
    import App from "./App.vue";
    import router from "./router/index";

    const app = createApp(App);

    app.use(router);
    app.mount("#app");

7、继承vuex

1）npm i vuex@next
2）创建 src/store/index.ts 文件
    import { createStore } from "vuex";
    export default createStore<any>({
    state: {
        name: "index",
    }, // 数据源存放地
    getters: {}, // vuex 的计算属性
    mutations: {}, // 操作state数据的方法
    actions: {}, // 用来做异步操作发送请球
    modules: {}, // 模块化vuex
    plugins: [], // 使用插件的地方
    // 开启严格模式
    strict: true,
    });
3)main.ts 挂载
    import { createApp } from "vue";
    import "./style.css";
    import App from "./App.vue";
    import router from "./router/index";
    import store from './store/index'

    const app = createApp(App);

    app.use(router);
    app.use(store);
    app.mount("#app");

8、集成 Axios

1）npm i axios
2）配置 Axios
//创建 src/store/request.ts 文件
    //封装的axios
    import axios from "axios";
    // import { error } from "console";
    // import { config } from "process";

    // 创建axios实例
    const service = axios.create({
    /*  baseURL就是跨域地址的公共部分，
    设置代理后可用proxyTable中的'/地址'代替，
    也可用变量process.env.VUE_APP_BASE_API表示，
    或者就直接输入http地址
    */
    baseURL: import.meta.env.VITE_APP_BASE_API, // 服务接口请求
    timeout: 3000,  // 超时设置
    headers: { 'Content-Type': 'application/json;charset=utf-8' }
    });

    // 请求拦截器
    service.interceptors.request.use(config=>{
        return config
    },error=>{
        console.log(error);
        Promise.reject(error)
    })

    // 响应拦截器
    service.interceptors.response.use(response=>{
        return response
    },error=>{
    return Promise.reject(error)
    })

    export default service
    
    //在再api/index.ts 中引入 request.ts 文件

9、安装element-plus

1）npm install element-plus --save
2) main.ts引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//注意!!!这里由于我升级node的原因，原本可以正常运行的项目运行不起来，会出现一些报错信息。
//比如：
    1、import ElementPlus from 'element-plus'===>找不到模块“element-plus”或其相应的类型声明。ts(2307)
    终端显示的报错信息为：× Install fail! Error: Unsupported URL Type: npm:@sxzz/popperjs-es@^2.11.7
        Error: Unsupported URL Type: npm:@sxzz/popperjs-es@^2.11.7
    这里重新 npm install element-plus，就可以运行成功了