vite+vue3创建项目

• node版本>=12.0.0 

zhaoman@gytlvdeMacBook-Pro vscode % node -v
v16.2.0

• 使用vite创建项目

zhaoman@gytlvdeMacBook-Pro vscode % npm init vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
✔ Project name: … cloud-admin
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
Scaffolding project in /Users/zhaoman/apps/vscode/cloud-admin...

Done. Now run:

  cd cloud-admin
  npm install
  npm run dev

运行项目

  cd cloud-admin
  npm install
  npm run dev

• vite.config.ts-配置服务

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',
    port:8080,
    open:true
  }
})

•  vite.config.ts-配置别名

zhaoman@gytlvdeMacBook-Pro cloud-admin % npm install @types/node --save-dev

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',
    port:8080,
    open:true
  },
  resolve:{
    alias:[
      {
        find:'@',
        replacement:resolve(__dirname,'src')
      }
    ]
  }
})

• tsconfig.json-配置别名路径 

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]     //格式一定要写对符号*不能少不然找不到@或者没有代码提示
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

• 使用别名

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