Vite加Vue3加Ts創建項目一些問題匯總

版權聲明：本文為CSDN博主「一尾流鶯_」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_48721669/article/details/115732258

 

在 vite.config.ts 中添加導入路徑設置別名，顯示沒有導入包 

import path from 'path'

 

需要先安裝一下 typescript的類型聲明文件

npm add @types /node -D

然后就沒有錯誤提示了，你可以快樂的設置別名了

// https://vitejs.dev/config/

export default defineConfig({

   //定義別名

   alias: {

    "@": path.resolve(__dirname, "src"),

    coms: path.resolve(__dirname, "src/components"),

  },

  //通過插件形式掛載vue

  plugins: [vue()]

})

 

但是我們在vscode中敲代碼的時候並沒有路徑提示,這個時候我們再來修改一下tsconfig.json文件,在compilerOptions這個配置項下添加如下代碼

"compilerOptions": {
"baseUrl":".",
"paths": {
"@/*":["src/*"],
"coms/*":["src/components/*"]
}
},

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl":".",
    "paths": {
        "@/*":["src/*"],
        "coms/*":["src/components/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

　　再去App.vue 中修改

import HelloWorld from './components/HelloWorld.vue'

為

import HelloWorld from 'coms/HelloWorld.vue'

 

我們通過配置alias來定義路徑的別名,配置完以后我們打開App.vue
把HelloWorld組件的引用由./components/HelloWorld.vue改為coms/HelloWorld.vue

頁面正常顯示,我們的 路徑別名 就配置成功了

————————————————————————————————————————————————————————————————
https://www.cnblogs.com/ainyi/p/13927377.html

在 src 下新建 router 文件夾，並在文件夾內創建 index.ts

 

import { createRouter, createWebHistory } from 'vue-router'  

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('/@/views/Home.vue')
  },
  {
    path: '/lifeCycle',
    name: 'lifeCycle',
    component: () => import('/@/views/LifeCycle.vue')
  }
]

export default createRouter({
  history: createWebHistory('/krry/'),
  routes
})

import { createRouter, createWebHistory } from 'vue-router'   顯示沒有導入這個包，或找不到 vue-router 模塊

 運行：npm add vue-router@next -D

 

 

一般項目結構

├── publish/
└── src/
    ├── assets/                    // 靜態資源目錄
    ├── components/                // 公共組件目錄
    ├── layout/                    // 項目布局目錄
    ├── router/                    // 路由配置目錄
    ├── store/                     // 狀態管理目錄
    ├── styles/                    // 通用樣式目錄
    ├── utils/                     // 工具函數目錄
    ├── views/                     // 頁面組件目錄
    ├── App.vue
    ├── main.js
├── index.html
├── vite.config.js                 // Vite 配置文件
└── package.json