用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/*"]}, },
}