vue3+ts+vite——项目搭建

1、通过vite安装vue3+ts项目

npm create vite@latest

然后按步骤选择相应选项

2、安装依赖

npm install

然后启动

npm run dev

3、配置@作为src路径引入

(1).安装path模块，通过该模块配置路径。

npm i path

(2).在vite.config.ts中加入配置

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  }

全部代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  }
})

(3).以上代码会出现ts提示找不到__dirname，需要安装node的类型提示

npm install --save-dev @types/node

(4).将src目录配置为@，在tsconfig.json配置加入

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

全部代码

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4、配置路由

（1）安装路由

npm i vue-router

（2）在src下创建router文件夹，创建index.ts文件作为路由根文件

import { createRouter,createWebHashHistory } from 'vue-router'
const routes = [
    {
        path:'/',
        component: ()=> import('@/views/home/index.vue')
    },
]

// 创建路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router;
3.在main.ts中use路由app.use(router);
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'

const app = createApp(App);
app.use(router);
app.mount('#app');

5、sass使用

npm i sass --save

安装npm i sass --save，然后在页面使用即可