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': {}
  }
})

陸續更新