用vite搭建vue3+ts项目

一、环境搭建

1：首先vite环境安装

npm init vite

或者

yarn init vite

2：输入项目的名字,在这里用vue3_test

? Project name: › vite-project

3：选择项目类型，这里选择Vue+ts

4：出现下图，初始化基本创建完成

项目文件目录如下

我们可以发现文件有标红提示，找不到依赖文件，这时候我们到项目目录下，执行一下npm install安装一下相关依赖即可，此时可以看到已经不报错了

现在我们npm run dev启动看看

此时，项目初始化完成

二、配置安装

1、less、scss/sass配置

  less安装

npm install -D less

  scss/sass安装

npm install -D sass

2、router配置

  ①vue-router安装

 npm install vue-router@4 

或

 yarn install vue-router@4 

②在src下创建一个 routers 文件夹，再创建一个 index.ts 文件

import { createRouter, createWebHistory } from "vue-router";
 
let routes= [
    {
        path: '/',
        name: 'home',
        component: () => import('../components/home/index.vue')
    }
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})
// 导出
export default router

这时候可能会出现文件路径标红提示

这是因为未定义 .vue文件的类型，导致 ts 无法解析其类型，在vite-env.d.ts中定义后即可解决

③在main.ts中引入vue-router

import { createApp } from 'vue'
import App from './App.vue'
 
import router from "./routers/index"; 
 
const app = createApp(App)
 
app.use(router)  
app.mount('#app')

④在components文件夹下新建home文件夹并新建index.vue，编辑文件如下：

<script setup lang="ts">
import { ref } from 'vue'
 
const msg = ref('Hello World')
const count = ref(10)
</script>
 
<template>
    <div>
        <h2>{{ msg }}</h2>
        <h2>{{ count }}</h2>
    </div>
</template>
 
<style scoped>
</style>

⑤在App.vue中使用vue-router

<script setup lang="ts">
</script>
 
<template>
  <router-view />
</template>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

配置完成，当前启动页面如下

3、vuex 配置

    ①安装vuex

npm install vuex -S

或

yarn install vuex -S

②在 src目录下创建一个store文件夹，在里面新建 index.ts、state.ts、mutations.ts、actions.ts

③index.ts内容如下：

import { createStore } from "vuex";
import state from './state'
import mutations from './mutations'
import actions from './actions'
const store = createStore({
      state,
      mutations,
      actions,
      modules: {
 
      }
})
export default store

④在main.ts中引入store

import { createApp } from 'vue'
import App from './App.vue'
 
import router from "./routers/index"; 
import store from './store';
 
const app = createApp(App)
 
app.use(router).use(store).mount('#app')

4、axios配置

     ①安装axios

npm install axios

     ②封装拦截器intercept，统一拦截请求request

        先在 src 下创建一个 api 文件夹，并添加一个  request.ts  文件

import axios from 'axios';
import Utils from '../util/utils';
import QS from 'qs';
const urlParams = Utils.getUrlParams();
// request拦截器
axios.interceptors.request.use(
    config => {
        // 如果你要去localStor获取token,(如果你有)
        // let token = localStorage.getItem("x-auth-token");
        // if (token) {
                //添加请求头
                //config.headers["Authorization"]="Bearer "+ token
        // }
        return config
    },
    error => {
        // 对请求错误做些什么
        Promise.reject(error)
    }
)
 
// response 拦截器
axios.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response.data
    },
    error => {  
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
/**
 * get方法 对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} headersParams [请求头]
 * */ 

export function get(url:string, params = {}, headersParams={}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: params, headers: headersParams})
            .then(response => {
                resolve(response.data)
            })
            .catch(err => {
                reject(err)
            })
    })
}
/**
 * post方法 对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} urlPrams [请求的url地址校验参数]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} headersParams [请求头]
 * */ 

export function post(url:string, urlPrams = {}, params = {}, headersParams = {}) {
    return new Promise((resolve, reject) => {
        axios.post(QS.stringify({...urlParams}) ? `${url}?${QS.stringify({...urlPrams})}`: '', 
            params,
            {
                headers: {
                    ...headersParams
                }
            } 
            )
            .then(response => {
                resolve(response.data)
            })
            .catch(err => {
                reject(err)
            })
    })
}

 ③请求数据

   在 api 文件夹，再添加一个  home.ts  文件，

定义接口格式：

export  const  自定义接口名  =  (形参:请求类型)  =>  {
    return get.方法(路径，{
        ...后端要的参数
    });
}

export  const  自定义接口名  =  (形参:请求类型)  =>  {
    return instance({
        url:路径,
        method: 'get',
        params: {
            ...后端要的参数
        }
    })
}

export  const  自定义接口名  =  (形参:请求类型)  =>  {
    return post.方法(路径，后端要的参数);
}

export  const  自定义接口名  =  (形参:请求类型)  =>  {
    return instance({
        url:路径,
        method: 'post',
        后端要的参数,
        params: {
            ...后端要的参数
        },
        headers: {请求头}
    })
}

5、vite.config.ts 配置

       ①在vite中配置别名,在开发时对路径看些来直观点

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],  // 注册插件
  server: {
    open: true
  },
  resolve: {
    alias: {
      // 如果报错__dirname找不到，需要安装node,执行npm install @types/node
      "@": path.resolve(__dirname, "src"),
      "comps": path.resolve(__dirname, "src/components"),
    }
  }
})

这时提示找不到path，可以执行以下命令来安装对应模块

npm install @types/node

在tsconfig.json中配置

{
  "compilerOptions": {
    "target": "ESNext",
    ...
 
    // 配置@别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }, 
  },
}