Vite 快速搭建Vue3 Ts项目

傷城~ 2022-10-05 05:58 181阅读 0赞

###### Vite快速搭建 Vue3 Ts 项目 [详情请查阅vite官方文档][vite] ######

# 直接创建项目 选择 vue-ts 模板
    yarn create @vitejs/app vue-ts-vite --template vue-ts
    
    # 进入项目目录
    cd vue-ts-vite
    
    # 安装依赖
    yarn
    
    # 运行
    yarn dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

###### 配置 tsconfig.json ######

{ 
      "compilerOptions": { 
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "noImplicitAny": true, // 不允许使用 any
        "noImplicitThis": true, // 不允许使用 this
        "strictNullChecks": true, // 不允许使用 null
        "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受baseUrl的影响
        "paths": {  // 用于设置模块名称到基于baseUrl的路径映射
          "@/*": ["src/*"]
        },
        "lib": ["esnext", "dom"]
      },
      "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
    }

##### 配置 vite.config.js #####

import {  defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    // 如 import { resolve } from 'path' 报错，可执行 yarn add @types/node -D 解决找不到依赖的问题
    import {  resolve } from 'path';
    
    // https://vitejs.dev/config/
    export default defineConfig({ 
      plugins: [vue()],
      server: { 
        host: '0.0.0.0', // IP地址
        open: true // 是否自动在浏览器打开
      },
      resolve: { 
        alias: {  // 配置别名
          '@': resolve(__dirname, './src')
        }
      }
    });

> 其他详情请查阅[vite官方文档][vite]

[vite]: https://cn.vitejs.dev/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20221005/b64bf295290444028bc8e47a738ca3a9.png