用vite搭建vue3+ts项目
一、环境搭建
1：首先vite环境安装
npm init vite或者
yarn init vite2：输入项目的名字,在这里用vue3_test
? Project name: › vite-project3：选择项目类型，这里选择Vue+ts
4：出现下图，初始化基本创建完成
项目文件目录如下
我们可以发现文件有标红提示，找不到依赖文件，这时候我们到项目目录下，执行一下npm install安装一下相关依赖即可，此时可以看到已经不报错了
现在我们npm run dev启动看看
此时，项目初始化完成
二、配置安装
1、less、scss/sass配置
less安装
npm install -D lessscss/sass安装
npm install -D sass2、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/*"]}, },
}