vite搭建一个vue2的框架

01-创建一个基础的模板框架

npm init vite@latest

　　

 02-安装依赖

npm install

　　

npm install vue@2.x vue-template-compiler@2.x -S

用于对vue2的支持

npm install vite-plugin-vue2 -D

　　

package.json

{
  "name": "vite-item",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.8.0",
    "vite-plugin-vue2": "^1.9.3"
  },
  "dependencies": {
    "vue": "^2.6.14",
    "vue-template-compiler": "^2.6.14"
  }
}

　　

03-main.js文件放入src 并修改html的引入路径

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
    render:h=>h(App)
}).$mount('#app')

index.html

04-vite.config.js 配置

import { defineConfig } from 'vite' //// 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import { createVuePlugin } from 'vite-plugin-vue2'

export default () =>
  defineConfig({
    plugins: [createVuePlugin()],
    server: {
      open: true,//自动打开浏览器
      port: 1567,//端口号
    },
  })

05-运行

npm run dev

　

相关配置:

https://juejin.cn/post/7039879176534360077

https://juejin.cn/post/6941641892840865805