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