Vite学习

本篇主要是讲解记录一下自己对Vite的学习

带入几个问题：

• 什么是Vite
• 怎么使用
• 对比其他构建工具

一、什么是Vite

官网首页介绍：

是一种新型前端构建工具，能够显著提升前端开发体验。

一个开发服务器，拥有速度快到惊人的 模块热更新

提供开箱即用的配置。

加速服务器的启动、热更新

二、怎么使用

安装

使用之前学习的npm进行安装

npm init vite@latest
# 或
yarn create vite

使用

直接创建一个Vite+Vue的项目

yarn create vite

1. 使用编辑器打开。

   

2. 再导入一遍依赖。

   直接在项目目录下 yarn

   安装需要的依赖包

   npm install -D sass
   

3. 运行项目

   使用编辑器运行项目，再编辑器中选择当前项目的package.json文件，选择命令输入脚本，即可。

   

4. 进入浏览器http://localhost:3000/查看项目

   

   5. 开始愉快的编码吧

      1. 创建一个组件

   

   2. 在APP.vue中引入组件

      <script setup>
          import DemoOne from "./components/DemoOne.vue";
      </script>
      
      <template>
        <DemoOne></DemoOne>
      </template>
      
      <style>
      </style>
      

   3. 开始编码

      1. 使用SCSS 模拟编写一个 https://vitejs.cn/首页部分内容

      

      2. 编写的代码

         <template>
            <article>
              <header>
                <figure>
                  <img src="https://vitejs.cn/logo.svg" alt="Vite">
                </figure>
                <div class="top-content">
                  <div class="title">
                    <p>Vite中文网</p>
                    <span>v2.7.0</span>
                  </div>
                  <div class="tips">下一代前端开发与构建工具</div>
                  <div class="btn">
                    <button>开始</button>
                    <button>了解更多</button>
                  </div>
                </div>
              </header>
            </article>
          </template>
      
          <script setup>
          </script>
      
          <style scoped lang="scss">
          $mainColor: #5468ff;
          img {
            width: 100%;
          }
      
          article {
            display: flex;
            position: relative;
            justify-content: center;
            top: 50px;
      
            header {
              position: relative;
              display: flex;
              flex-flow: column;
      
              figure {
                display: block;
                margin: 0 auto;
                width: auto;
                max-width: 50%;
                max-height: 280px;
              }
      
              .top-content {
                flex-flow: column;
                display: flex;
                justify-content: center;
                align-items: center;
      
                .title {
                  display: flex;
                  align-items: center;
                  width: 70%;
                  justify-content: space-around;
                  color: #444950;
      
                  p {
                    font-size: 40px;
                    margin: 0;
                  }
      
                  span {
                    background-color: #5468ff;
                    color: #fff;
                    border-radius: 15px;
                    padding: 10px;
                    font-size: 16px;
                    font-weight: bold;
                  }
                }
      
                .tips {
                  color: #54616c;
                  font-weight: 500;
                  padding: 10px;
                  font-size: 26px;
                }
              }
            }
      
            .btn {
              button {
                height: 56px;
                padding: 0 30px;
                font-size: 18px;
                border-radius: 5px;
                background-color: #fff;
      
                &:first-child {
                  margin-right: 20px;
                  background-color: $mainColor;
                  color: #ffffff;
                  border: 0;
                }
                &:last-child{
                  border: 1px solid $mainColor;
                  color: $mainColor;
                }
              }
            }
          }
          </style>
      

      3. 在编写过程中 就可以看到他的热部署非常快，快改快更新，几乎是是实时的。

      4. 尝试打包命令

         打包之后会有一个dist文件

         yarn build
         

      5. 运行看看打包之后的文件

         查看本地5000端口即可查看

         yarn preview
         

      6. 尝试使用第三方UI框架

         npm i element-plus
         

      7. 引入相关文件

         main.js 文件中 直接替换

         import { createApp } from 'vue'
         import App from './App.vue'
         import ElementPlus from 'element-plus'
         import 'element-plus/dist/index.css'
         createApp(App).use(ElementPlus).mount('#app')
         

      8. 使用

         <el-button type="primary"> Element UI </el-button>
         

         

      9. 完毕

三、对比其他构建工具

VIte

1. 快速冷启动
2. 即使更新
3. 生态没有webpack成熟，插件较少

WebPack

1. 服务器启动缓慢
2. 生态丰富、版本稳定、项目风险较低

结语

我是幸福部长，我在学Vite了，总结不是很到位，也很基础，之后将继续深入，每天学习一点新东西，再回顾一下旧的知识，距离变强又更近一步了。