基于Vite创建一个Vue2项目

发布于:2023-01-20 ⋅ 阅读:(5) ⋅ 点赞:(0) ⋅ 评论:(0)

alt vitejs
没有导语没有前言,直接上正文
vitejs 官网:https://cn.vitejs.dev/

创建项目

npm create vite@latest

注意了,这里不要使用后面的附加命令创建一个 Vue 模板,因为 Vite 创建的默认版本是 Vue3

alt vanilla
关于更多的create-vite模板细节,点击这里

下载之后的目录长这样子
alt 目录

这个时候就可以手动整理一下,不必要的都删除掉,然后新建src目录,再拖动文件位置
alt 修改后
然后我们再添加Vue2相关的插件

下载 Vue2 的指定版本

我们直接npm install vue的话会直接下载 Vue 的最新版,所以我们需要指定版本

npm install vue@2.6.14 -S

Vue2 现在已经更新到 2.7 了( 😐 )

寡下一个 Vue 是显然不行的,我们还需要下载相对应的依赖插件

npm install vue-template-compiler@2.6.14 -D

npm install vite-plugin-vue2 -D
  • vue-template-compiler@2.6.14 需要和 Vue2 的版本保持一致

    用于解析 Vue 模板

  • vite-plugin-vue2

    用于 vite 支持 vue2

新建vite.config.js

import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [createVuePlugin()]
}

详细文档:https://github.com/underfin/vite-plugin-vue2

创建vite.config.js之后基本就已经搭建好了,其它部分就和vue-cli创建时一样

main.js

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

Vue.config.productionTip = false

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

App.vue

<template>
  <div>你好,Vite + Vue2</div>
</template>

<script>
  export default {}
</script>

<style lang="scss" scoped></style>

运行

npm run dev

运行结果

alt 运行结果


网站公告

欢迎关注微信公众号

今日签到

点亮在社区的每一天
签到