vue3+vite 项目创建

1.安装nvm

下载：

Releases · coreybutler/nvm-windows · GitHub

安装完成后，可以打开cmd命令行窗口，执行

//查看版本：
    nvm -v
//看安装的所有node.js的版本 ：
    nvm ls 
//查显示可以安装的所有node.js的版本：
    nvm list available    
//安装node.js： 
    nvm install 16.15.0
//使用对于的node.js版本：
    nvm use 16.15.0

2.创建项目

        1.方式一

1.输入命令
  npm create vite@latest
2.给项目起名

3.选择 Vue 

4.选择Typecript/Javascript

    2.方式二

1.安装 vite 构建工具：
    npm install -g create-vite-app
2.创建 vue3 项目
    create-vite-app vue3-demo

    3.配置根路径

            1.配置：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'),
      '*': resolve('')
    },
  }
})

        2. 配置：tsconfig.json

{
  "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/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}