1. 创建vite工程，需要nodejs >= 12.0

npm init @vitejs/app

  1. 查看package.json

    1. ...
    2. "scripts": {
    3.  "dev": "vite --port 8080", // 还可以加上 --https
    4.  "build": "vue-tsc --noEmit && vite build",
    5.  "serve": "vite preview",
    6.  "preview": "vite preview"
    7. },
    8. ...

    https://vitejs.cn/guide/features.html

  2. 加入scss或less… ```json

    .scss and .sass

    npm install -D sass

.less

npm install -D less

.styl and .stylus

npm install -D stylus

  2. 4. npm run build 丝滑体验 
  3. ```json
  4. npm run build // 会生成dist文件夹
  5. npm run preview // 启动本地应用测试，访问dist里面的文件
  1. 多页面配置 rollup配置 ```json import { defineConfig } from ‘vite’ import vue from ‘@vitejs/plugin-vue’ const path = require(‘path’); const { resolve } = path; console.log(dirname) // https://vitejs.dev/config/ export default defineConfig({ resolve: { extensions: [‘.vue’, ‘.js’, ‘.ts’, ‘.tsx’], alias: [ { find: ‘@’, replacement: dirname }, ], }, // build: { // // build rollup的配置 // rollupOptions: { // // https://rollupjs.org/guide/en/#big-list-of-options // // 多页面的配置 // input: { // main: resolve(dirname, ‘index.html’), // // nested: resolve(dirname, ‘nested/index.html’) // } // } // }, plugins: [vue()] })
  1. ```
  2. {
  3.   "compilerOptions": {
  4.     "target": "esnext",
  5.     "module": "esnext",
  6.     "moduleResolution": "node",
  7.     "strict": true,
  8.     "jsx": "preserve",
  9.     "sourceMap": true,
  10.     "noImplicitAny": false,
  11.     "resolveJsonModule": true,
  12.     "esModuleInterop": true,
  13.     "lib": ["esnext", "dom"],
  14.     "typeRoots": ["./types"],
  15.     "baseUrl": ".",
  16.     "paths": { 
  17.       "@/*": [ "./*" ] 
  18.     },
  19.   },
  20.   "include": [
  21.     "src/**/*.ts", 
  22.     "src/**/*.d.ts", 
  23.     "src/**/*.tsx", 
  24.     "src/**/*.vue", 
  25.     "utils/**/*.ts",
  26.     "node_modules/element-ui/packages/**/*.js"
  27.   ]
  28. }