🗒️Vue3 和 Vite

• npm run dev 入口和流程

1. 最简模式

推荐 IDE：VSCode + Volar (和 disable Vetur) + TypeScript Vue Plugin (Volar)。

1.1 package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
    "vue": "^3.2.38"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.3",
    "vite": "^3.0.9"
  }
}

• npm install 项目 setup

• npm run dev 开发的 compile 和 hot-reload

• npm run build 发布的 compile 和 minify

1.2 vite.config.js

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

详见 Vite Configuration Reference。

1.x 截图

94KB

files.png

image

• App.vue

  • components/HelloWorld.vue

  • components/TheWelcome.vue

    • components/WelcomeItem.vue

2. 仅增加 TS

2.1 package.json

{
  "scripts": {
    "dev": "vite",
    "build-only": "vite build",
    "preview": "vite preview --port 4173",
    "build": "run-p type-check build-only",  /* new（组合）*/
    "type-check": "vue-tsc --noEmit"         /* new */
  },
  "dependencies": {
    "vue": "^3.2.38"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.3",
    "vite": "^3.0.9",
    "@types/node": "^16.11.56", /* new */
    "@vue/tsconfig": "^0.1.3",  /* new */
    "npm-run-all": "^4.1.5",    /* new */
    "typescript": "~4.7.4",     /* new */
    "vue-tsc": "^0.40.7"        /* new */
  }
}

2.2 vite.config.js（未变）

2.3 tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

同类文件 jsconfig.json

2.4 tsconfig.config.json

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
  "compilerOptions": {
    "composite": true,
    "types": ["node"]
  }
}

2.5 env.d.ts

/// <reference types="vite/client" />

2.x 截图

• build 的线上资源，结构未变

• 源码组件树，未变

• 文件结构，新增了配置项、.js 变 .ts，如下

111KB

files-ts.png

image

3. 仅增加 Vue Router

Add Vue Router for Single Page Application development.

3.1 package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
    "vue": "^3.2.38",
    "vue-router": "^4.1.5"  /* new */
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.3",
    "vite": "^3.0.9"
  }
}

3.2 vite.config.js（未变）

3.x 截图

1. 源码的改动

   1. 新增了 router 文件夹和 views 文件夹

   2. 更新了 main.js（应用入口）和 App.vue（组件）文件

2. 源码组件树

   • App.vue

     • components/HelloWorld.vue

     • router

       • views/HomeView.vue

         • components/TheWelcome.vue

         • components/WelcomeItem.vue

       • views/AboutView.vue

3. build 的线上资源，新增了路由组件的 js 和 css 文件

75KB

files-vue-router.png

image

// 1. src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

// main.js 里引入了 router.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // new1. 引入router文件

import './assets/main.css'

const app = createApp(App)

app.use(router)  // new2. 给应用实例添加路由

app.mount('#app')

<!-- App.vue 使用 router -->
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>

  <RouterView />
</template>