vue 3.0 +Ts+Vite 项目组件命令

无聊中学习vite随笔记录,希望对以后的我和新手有帮助
由于vue 3.0采用组件化开发,我是按照后端的开发模式理解的,不知道对不对,如若不对,望各位前辈在评论区指正
所以有些组件你得自己安装
1.npm install @types/node --save-dev
作用:找不到模块“path”或其相应的类型声明 或者 找不到名称“__dirname”等
用不了@,在tsconfig.json中的compilerOptions对象里加

tsconfig.json

在compilerOptions节点下加如下代码
"baseUrl": ".",//启用底部url路径为.
    "paths": {
      "@/*": [
        "src/*"
      ]
    },

vite.config.ts

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
        "@": resolve(__dirname, 'src'), // 路径别名
    },
    extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名，可以自己 增减
}
})

以上都要加,不然不能用(被我之前写的错误的博客误导的小伙伴，说声抱歉，现在的可以用了)
(vite.config+tsconfig)切记
tsconfig.json是配置ts文件中的路径别名，如果你的项目没有ts文件，则无需配置
2.npm install vue-router@4 --save
作用:安装vue-router4,有可能存在router版本与vue项目版本不匹配的情况,自行bing
3.npm i axios -s
作用:安装axios
4.切记js与ts相互引用，导入的时候是不可以这么操作的，这两个文件不兼容，ts中导入vue文件是可以的
---------------2022/03/13----------------
5.报错信息为：process is not defined
解决办法是在 vite.config.ts 中增加 define：

点击查看代码

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})

陆续更新