vite 创建vue2项目

  1. npm create vite
  2. 不要选择vue 默认是3 选vanilla
  3. 进入目录 安装官方推荐的插件 underfin/vite-plugin-vue2
    1. yarn add underfin/vite-plugin-vue2 -D
    2. npm i underfin/vite-plugin-vue2 -D
  4. 添加配置文件 , github上步骤
        // vite.config.js 
    import { createVuePlugin } from 'vite-plugin-vue2'
    
    export default {
      plugins: [
        createVuePlugin(/* options */)
      ],
    }
    
  5. 安装vue 这里选2.x版本
    1. yarn add vue@2
    2. npm i vue@2
  6. 新建一个src文件夹 , 把之前main.js中的代码都删掉
//main.js
    import Vue from 'vue'
    import App from './App.vue'
    
    new Vue({
      el: '#app',
      render: (h) => h(App),
    }).$mount()

  1. 在src中创建一个App.vue组件
  2. 修改index.html里main.js文件的路径 <script type="module" src="./src/main.js"></script>
  3. yarn vite 启动 ~~报错了
    提示没有vue-template-compiler这个包
    那就 yarn add vue-template-compiler -D
  4. 再一次yarn vite 或者npm run dev成功了
    最后贴一下完整的文件目录,回到了vue2的样子, vite真是快啊 相比vue-cli少了很多的等待时间
posted @ 2023-03-17 01:10  callAjax  阅读(183)  评论(0编辑  收藏  举报