vue3+vite+ts+pinia 初体验

近期项目不是很紧张，抽空学习了下ts，把文档整体过了一遍，然而也没记住多少东西╮(╯▽╰)╭，但是基础的语法都有所了解了，于是决定上手试一下vue3，虽然咱们不卷，但是躺平也并不那么美好。

说明一下，本文不会介绍项目搭建的具体过程，只会简单说下重点流程和自己遇到的一些问题，最后会给出git地址，欢迎大家拍砖~

一、基础步骤

我的npm是6.10.3版本，因此采用下面命令

npm init @vitejs/app vue_ts --template

然后回车，选择vue-ts，完成后install、dev启动项目。

后边步骤就是添加了基础的eslint、prettier、lint-staged等校验、格式化内容，具体步骤略，可以直接去看项目里的配置信息。

二、问题及处理

接下来重点说下遇到的一些问题及解决方案。

1、路径别名设置

在平常使用中，我们通常会设置一个别名用来作为路径引入方式，在配置里添加alias，但是在3里，这样还是不够的，还需要在tsconfig里添加paths命令。

// vite.config.js
resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
}

// tsconfig.json
"paths": {
    "@/*": [
        "src/*"
    ]
}

2、路由相关问题

在2的语法里，我们通过vue.use(router)方式绑定后，在组件里可以通过this的方式获取路由相关方法，但是在3里我们没法通过this去调用，究其根本原因是3的 setup周期是在beforeCreate之前执行的，也就是此时没有this相关内容。因此组件里要使用路由相关方法需要单独引入 useRouter, useRoute 方法。

useRouter方法主要用来提供添加路由、路由跳转相关方法。

useRoute方法主要用来获取路由中相关参数。

import { useRouter, useRoute } from 'vue-router'
onst router = useRouter();
const route = useRoute();

let froms = ref(route.params.from);

const goHome = () => {
  router.push({
      name: 'Index',
      params: {
          val: 1
      }
  })
}

3、全局变量/方法的绑定和获取

对于网络请求方法、操作cookie等方法，我们通常会封装方法后将其挂载到全局 Vue.prototype.xxx = xxx，然后通过this.xxx方法去调用，但是正如上文说的，3里无法使用this去调用相关方法，显然这种方法也行不通了。

在 3 中有一个 globalProperties属性，用来挂在全局的属性或者方法，在使用的时候通过 getCurrentInstance方法获取对应组件的实例，然后调用全局方法。

// main.ts

import http from '@/server/http'
import { createApp } from 'vue'
import App from './App.vue'

const app = createapp(App)
app.config.globalProperties.$http = http

// 组件内部
<script lang='ts' setup>
import { getCurrentInstance } from 'vue'
const context = getCurrentInstance()
// 全局请求方法调用：context.appConfig.globalProperties.$http
</script>

4、环境变量的定义和获取

日常开发中，我们基本都会通过定义三个文件.env.development/.env.preproduction/.env.production，并在文件里定义变量去区分环境。对于 3 我们依然可以通过配置 NODE_ENV去区分不同的环境，然后通过 process.env.NODE_ENV获取。

// .env.development
NODE_ENV = development

// .env.preproduction
NODE_ENV = preproduction

// .env.production
NODE_ENV = production

如果我们需要区分不同的环境下不同的接口路径，就需要单独定义变量。在vite里边，需要注意的是环境配置文件里定义的变量只有通过VITE_开头才能被捕获到，详见文档环境变量与模式

这里以baseUrl为例,环境配置文件里配置信息如下

// .env.development
NODE_ENV = development
VITE_WEB_HTTP_URL = 'https://development.com'

// .env.preproduction
NODE_ENV = preproduction
VITE_WEB_HTTP_URL = 'https://preproduction.com'

// .env.production
NODE_ENV = production
VITE_WEB_HTTP_URL = 'https://production.com'

这样我们在其他ts文件里就可以直接通过 import.meta.env.VITE_WEB_HTTP_URL 获取到对应的内容，这里还要注意一点，这么写能成功获取，但是ts会报一个错误，需要添加配置

// tsconfig.json
"types": [
  "vite/client",
]

// env.d.ts
interface ImportMetaEnv {
  VITE_WEB_HTTP_URL: string
}

看上去很完美了，但是当我们现在 vite.config.js 里使用这个变量的时候，发现并不能用上面的方法获取到，但是我们可以采用vite的另一个方法拿到对应的变量

import { loadEnv } from 'vite

// loadEnv 第一个参数可以获取命令行里 mode 的类型，如果只是获取某一个环境下变量，这里可以直接写死变量
const devBaseUrl = loadEnv('development', process.cwd()).VITE_WEB_HTTP_URL

综上所述，一个vue3的基础框架就完成了😏😏😏......

当然这只是搭建基础框架遇到的一些问题，如果真正运用到项目里，应该还会有很多其他莫名其妙的问题出现，那就只能遇到问题处理问题了，并及时做总结.

最后的最后，附上git地址，欢迎大家拍砖~~ vue3—template