vu3+vite+ts的项目构建

vue3+typescript项目建成

新建一个文件夹放项目地址
按shift键+鼠标左键 打开powershell窗口（win10支持）其他的系统就cmd吧

第一步 敲命令
新建项目 npm init @vitejs/app

剩下的选择项目类型还有语言，项目建设成功

第二步，安装插件

根据自己项目的需要
进入项目记得先 npm install 安装依赖
其次安装插件，
axios 的安装 cnpm或者npm 都可以 我用的npm
cnpm i axios -S //安装网络依赖
cnpm i vue-router@next -S //安装路由
cnpm i vuex@next -S //安装版本控制 （next的意思是安装最新的版本）
cnpm i element-plus -S //安装组件 安装的是element组件，适合vue3的项目
cnpm i @types/node -S -D //引入地址配置
在package.json中可以看出来你的依赖包有没有安装完成。

第三步，引入项目
可以在项目vite.config.ts中配置一下路径，引入一下，可以用’@‘代替’./’,记得安装一下path
npm install path --save

import { defineConfig } from 'vite'
import path from 'path'  //用@代替./路径
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: './', // 默认 '/' 配置成 './' 使得
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  plugins: [vue()]
})

引入在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/lib/theme-chalk/index.css'
import ElementPlus from 'element-plus';
import router from './router/index'
const app =createApp(App);
app.use(ElementPlus)
app.use(router)
createApp(App).mount('#app')

在项目中引入router,还有element组件。
在引入router中，需要先在src文件夹下面建一个router文件夹，router文件夹下面放一个index.ts.

index.ts中代码如下：

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"

// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import countIndex from "../pages/count/countIndex.vue";
import langshanIndex from "../pages/langshan/langshanIndex.vue";
// 2. 定义路由配置
const routes = [
  { 
    path: "/",
    redirect: '/countIndex'
  },
  { path: "/countIndex", component: countIndex },
  { path: "/langshanIndex", component: langshanIndex },
 
];

// 3. 创建路由实例
const router = createRouter({
  // 4. 采用hash 模式
  history: createWebHashHistory(),
  // 采用 history 模式
  // history: createWebHistory(),
  routes, //使用上方定义的路由配置
});

export default router 
//导出router

路由这块记得把代码配置成符合自己项目

网络配置axios,在src目录下新建一个文件夹，utils文件夹，下面配置一个http.ts的ts代码，

/*
 * @Description: 请求配置
 */
import axios from 'axios';

let url: any = import.meta.env // 配置不同环境的域名信息等
const service = axios.create({
  baseURL: url.VITE_APP_BASE_API, // url = base url + request url
  timeout: 40 * 1000, // 默认用40s超时时间
  headers: { // 配置OAuth 2.0的认证头
    'Content-Type': 'application/json;charset=utf-8'
  },
  withCredentials: true // send cookies when cross-domain requests
})

// 请求前置拦截器
service.interceptors.request.use((config) => {
  config.headers['Authorization'] = localStorage.getItem('token')
  if (config.method === 'post' && !config.data) {
    config.data = config.params
    config.params = null
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

// 响应前置拦截器
service.interceptors.response.use((res) => {
  return Promise.resolve(res)
}, (error) => {
  let errMsg = ''
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        errMsg = '错误的请求'
        break
      case 500:
        errMsg = '服务器端出错'
        break
      case 401:
        errMsg = '权限校验错误'
        break
      default:
        errMsg = '网络错误'
    }
  }
  return Promise.reject(errMsg)
})

// 发起请求
export function request(config: any) {
  return new Promise(async (resolve, reject) => {
    try {
      const result = await axios({
        ...config
      })
      resolve(result)
    } catch (err) {
      reject(err)
    }
  })
}

export default service

等等。后面的就根据自己的需要安装其他插件或者配置吧！