vue2 项目

使用 vanilla 创建项目

image.png

安装对应依赖

  1. $ yarn add vue -S
  3. $ yarn add vite-plugin-vue2 vue-template-compiler -D

创建 vite.config.js 文件

  1. // vite.config.js
  2. const { createVuePlugin } = require('vite-plugin-vue2')
  4. module.exports = {
  5.   plugins: [createVuePlugin()],
  6. }

项目改造

新建 src 目录，移动 main.js 到src目录下，在 src 目录下新建 App.vue，具体如下： GitHub：https://github.com/WuChenDi/vite-vue2-template

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Vite App</title>
  8.   </head>
  9.   <body>
  10.     <div id="app"></div>
  11.     <script type="module" src="/src/main.js"></script>
  12.   </body>
  13. </html>

main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. new Vue({
  5.     render: (h) => h(App),
  6. }).$mount('#app')

App.vue

  1. <template>
  2.     <div>Hello vite vue2</div>
  3. </template>