vite + vue3.0 + pinia + ts创建项目

1.通过vite创建vue3.0 + ts项目

yarn create vite 
// 输出项目名称
Project name: › vite-project
// 选择使用技术栈
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Others
    
// 选择使用js或ts或nuxt
? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
❯   TypeScript
    Customize with create-vue ↗
    Nuxt ↗
    
//项目创建成功
Scaffolding project in /Users/zhengjunjun/Desktop/vue学习/Calendar-Vue3.0...
Done. Now run:
  cd Calendar-Vue3.0 // 进入项目目录
  yarn  // 下载依赖项
  yarn dev  // 启动项目
✨  Done in 288.94s.

注意：yarn create vite时可能会报错There appears to be trouble with your network connection. Retrying...，如果出现此错误时当前使用的镜像是npm镜像可以切换到淘宝镜像重新执行该命令

2.配置项目

• 项目启动端口及自动打开浏览器

​ 项目默认启动端口是http://localhost:5173/，修改为http://localhost:3000/

​ 找到项目中的vite配置文件vite.config.ts 进行配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()], // 默认配置
  
  server: {
    host: '0.0.0.0', // 解决vite use--host to expose
    port: 3000, // 设置端口号
    open: true // 服务启动后自动打开浏览器
  }
})

• 配置别名：找到项目中的vite配置文件vite.config.ts 进行配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 编辑器提示path模块找不到。下载 yarn add @types/node --dev 就可

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 配置别名：将 @ 指向'src'目录
    }
  },
  server: {
    host: '0.0.0.0', // 解决vite use--host to expose
    port: 3000, // 设置端口号
    open: true // 服务启动后自动打开浏览器
  }
})

• 配置CSS预编译器Sass，直接下载loader即可

// 下载sass和sass-loader
yarn add sass sass-loader --save-dev

• 配置vue-router

  安装 yarn add vue-router@4 --save

  创建src/router/index.ts 文件，配置路由

// 配置router
import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'day',
    component: () => import('@/views/Day/index.vue') // 使用路由懒加载优化访问性能
  },
  {
    path: '/year',
    name: 'year',
    component: () => import('@/views/Year/index.vue')
  }
]
const router = createRouter({
  // history: createWebHistory(), // 使用history模式
  history: createWebHashHistory(), // 使用hash模式
  routes
})
export default router

​ 在src/main.ts中引入router

// 使用router，在main.ts中引入使用
import { createApp } from 'vue'
import '@/styles/index.scss'
import App from './App.vue'
import router from '@/router/index'
createApp(App).use(router).mount('#app')

​

• 配置pinia

  安装 yarn add pinia --save

  创建src/stores/index.ts 文件，配置pinia

import { defineStore } from 'pinia' 

export const useMainStore = defineStore({
  id: 'main',
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  },
  persist: {
    enabled: true // 这个配置代表存储生效，而且是整个store都存储
  }
})

​ 在src/main.ts中引入router

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist' // pinia数据持久化
import App from './App.vue'
import router from '@/router/index'

const app = createApp(App)
const pinia = createPinia()
// pinia防止页面刷新数据丢失
pinia.use(piniaPluginPersist)

app.use(router)
app.use(pinia)
app.mount('#app')

​ 在组件中使用store数据

• 配置axios

  安装 yarn add axios --save

  创建src/request/request.ts 文件封装axios

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

enum RequestEnums {
  TIMEOUT = 20000,
  SUCCESS = 200
}

const Axios: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: RequestEnums.TIMEOUT
})

Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

Axios.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

Axios.interceptors.response.use(
  function (response: AxiosResponse) {
    const data = response.data
    if (data) {
      return data || {}
    } else {
      return response
    }
  },
  function (error) {
    return Promise.reject(error)
  }
)
export default Axios

​ 创建src/request/index.ts 文件封装get、post请求

import { AxiosRequestConfig } from 'axios'
import service from './request'
// 数据返回的接口
interface Result {
  message?: string
  resultCode?: number | string
}
// 请求响应参数，包含data
interface ResultData<T> extends Result {
  data: T
}
// get请求
const get = <T>(url: string, params: object = {}, config?: AxiosRequestConfig): Promise<ResultData<T>> => {
  return new Promise((resolve, reject) => {
    service
      .get(url, { params: params, ...config })
      .then((response) => {
        resolve(response)
      })
      .catch((err) => {
        reject(err)
      })
  })
}
// post请求
const post = <T>(url: string, data: object = {}, config?: AxiosRequestConfig): Promise<ResultData<T>> => {
  return new Promise((resolve, reject) => {
    service.post(url, data, config).then(
      (response) => {
        resolve(response)
      },
      (err) => {
        reject(err)
      }
    )
  })
}

export { get, post, formData }

3.解决配置项目是遇到的问题

【ts】警告：引入文件时报错 找不到模块“xxx”或其相应的类型声明 ,配置如下，配置完成后需要重启vscode编辑器才可生效

// 在tsconfig.json中的compilerOptions增加如下配置
"compilerOptions" :{
  ...,
 	"baseUrl": "./",
  "paths": {
  	"@/*": ["src/*"] // 相对位置需要配置baseUrl才能识别，否则会报错
  }
}

// 在tsconfig.json中的include增加如下配置
 "include": [...,"**/*.ts","**/*.tsx"],