使用 Vite 处理 .vue 文件

  1. 安装插件：
yarn add -D @vitejs/plugin-vue
  1. 对 Vite 进行配置，在工程目录下建立 vite.config.js 文件，内容如下：
import vue from '@vitejs/plugin-vue';

export default {
    plugins: [ vue() ]
}
  1. index.html 内容如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <script type="module" src="./src/index"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
  1. index.mjs 内容如下：
// 引入 vue
import { createApp } from 'vue'

// 引入根组件
import App from './App.vue'

createApp(App).mount('#app');
  1. App.vue 内容如下：
<script>
    export default {
        data() {
            return {
                message: '使用 App.vue 文件'
            }
        }
    }
</script>

<template>
    <h1>{{ message }}</h1>
</template>
posted @ 2023-03-16 20:29  HopeLive  阅读(230)  评论(0)    收藏  举报