☉本文由小何整理首发，

版权归本公众号所有，

如有侵犯，请自行删除！

一、创建vite项目

1、环境准备

• node v16.14.2

• pnpm 8.15.4

  2、初始化项目

  pnpm安装指令

  # npm i -g pnpm

  项目初始化命令:

  # pnpm create vite

  D:\project\RuoYi-Vue\note\ui\00code>pnpm create vite
  .../../../.pnpm-store/v3/tmp/dlx-14068   |   +1 +
  .../../../.pnpm-store/v3/tmp/dlx-14068   | Progress: resolved 1, reused 0, downloaded 1, added 1, done
  √ Project name: ... ruoyi-ui
  √ Select a framework: » Vue
  √ Select a variant: » JavaScript

  • Project name 项目名称【ruoyi-ui】

  • Select a framework 选择一种框架【Vue】

  • Select a variant 选择一种语言【JavaScript】

    3、运行项目

    进入到项目根目录pnpm install安装全部依赖.

    安装完依赖运行程序:pnpm run dev

    运行完毕项目跑在http://127.0.0.1:5173/,可以访问你得项目啦

    二、整理vite项目

    • 删除HelloWorld.vue

      src\components\HelloWorld.vue

    • 删除vue.svg

      src\assets\vue.svg

    • 删除style.css

      src\style.css

    • 修改App.vue

      src\App.vue

    • 修改main.js

      src\main.js

      import { createApp } from 'vue'
      import App from './App.vue'
      createApp(App).mount('#app')

      三、加载页面

      1、css

      2、html

      
        
          
            
            
            
            正在加载系统资源，请耐心等待
          
        
        
      

      3、效果

      如果你觉得阅读本文对您有帮助，请点右下角的“点赞”按钮，你的点赞将是我最大的写作动力！

                                                                                                        ——小何 《跟着小何学编程》