Vite+Vue 3+TS环境搭建

 

一、初始化项目

使用命令npm init vite创建项目，输入项目名称后语言选择Vue，然后选择TypeScript。然后进入项目使用命令npm install安装依赖，然后使用npm run dev启动。

 

二、安装状态管理工具pinia

使用命令npm i pinia -S安装状态管理工具pinia。

 

创建src/store/index.ts文件

 

import { createPinia } from "pinia"

const store = createPinia()

export default store

封装一个用户store，创建src/store/user.ts

 

// pinia 用户使用方法

import { defineStore } from "pinia"

export const userStore = defineStore({

    id: 'user',

    // 数据

    state: () => {

        return {

            token: localStorage.getItem('token') || '',

            userInfo: localStorage.getItem('userInfo') || {}

        }

    },

    // 方法

    actions: {

        setUserInfo(data: any) {

            this.token = data.token

            this.userInfo = data.user_info

            localStorage.setItem('token', this.token)

            localStorage.setItem('userInfo', JSON.stringify(this.userInfo))

        }

    }

})

main.ts中导入store

 

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

import store from './store'

const app = createApp(App)

app.use(store)

app.mount('#app')

三、安装路由vue-router

使用命令npm i vue-router -S安装路由。

 

创建src/router/index.ts文件

 

// createRouter用于创建vue-router实例对象

// RouteRecordRaw用于规范路由规则，增加路由对象类型限制

// createWebHashHistory用于指定路由的工作模式(Hash)

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

// 引入store的userStore

import { userStore } from "../store/user"

// 创建路由规则

const routes: Array<RouteRecordRaw> = [

    {

        path: '/',

        component: () => import('../components/HelloWorld.vue')

    }

]

 

// 创建路由实例对象

const router = createRouter({

    history: createWebHashHistory(),

    routes

})

 

// 路由导航守卫

router.beforeEach((to, from, next) => {

    const store = userStore();

    if (store.token) {

        next()

    } else {

        // ...

    }

})

 

export default router

main.ts中导入router

 

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

import store from './store'

import router from './router'

const app = createApp(App)

app.use(store)

app.use(router)

app.mount('#app')

四、封装请求、响应拦截器、api

使用命令npm i @vueuse/core -S安装api插件。使用命令npm i axios -S安装网络请求库。

 

创建src/utils/require.ts文件，封装请求接口文件。

 

import axios from "axios"

 

let baseURL = '/api'

 

const service = axios.create({

    baseURL,

    timeout: 10000

})

 

// 请求拦截器

service.interceptors.request.use(

    config => {

        const token = localStorage.getItem('token')

        if (token) {

            config.headers['x-acess-token'] = token

        }

        return config

    },

    error => {

        return Promise.reject(error)

    }

)

 

// 响应拦截器

service.interceptors.response.use(

    response => {

        const res = response.data;

        if (response.status !== 200) {

            return Promise.reject(new Error(res.success || 'error'))

        } else {

            if (res.code === 200) {

                return res.result

            } else {

                alert(res.success)

            }

        }

    },

    error => {

        return Promise.reject(error)

    }

)

 

export default service

创建api/user.ts用户api接口文件

 

import require from '../utils/require'

 

// get

export const getUser = (data: any) => {

    return require({

        url: 'user/list',

        method: 'get',

        params: data

    })

}

 

// post

export const editUser = (data: any) => {

    return require({

        url: 'user/edit',

        method: 'post',

        data

    })

}

五、跨域代理

本地请求服务器接口是存在跨域的，需要做跨域代理进行接口访问。在vite.config.ts文件中修改配置

 

export default defineConfig({

  plugins: [vue()],

  // 跨域代理

  // 线上接口

  server: {

    // 端口号

    port: 8002,

    // 允许自动打开浏览器

    open: true,

    // 跨域代理

    proxy: {

      '/api': 'http://abc.com'

    },

    // 允许跨域

    cors: true

  }

  // 本地接口

  // server: {

  // // 跨域代理

  // proxy: {

  // '/api': 'http://localhost:5080'

  // },

  // }

})

六、rem移动端适配

创建src/utils/rem.ts文件

 

// 移动端rem适配

// 基准大小

const baseSize = 37.5

// 适配方案

const setRem = () => {

    const scale = document.documentElement.clientWidth / 750;

    document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px'

}

// 初始化

setRem()

// 改变窗口大小的时候重新设置一下rem

window.onresize = () => {

    setRem()

}

 

export default baseSize

在main.ts中导入

 

import './utils/rem'

七、配置vant库

使用命令npm i vant -S安装vant库。

 

在main.ts中引入，以Button按钮为例按需引入

 

// 导入vant样式

import './assets/css/style.css'

// 导入vant的Button按钮

import { Button } from 'vant'

const app = createApp(App)

app.use(Button)