Vite到底是什么？

Vite is a Lightning fast cold server that offers instant hot modules replacement and True on-demand compilation. This tool was created by the Creator of Vuejs, but this doesn’t mean that it can only be used in Vuejs, it could be used by libraries like Reactjs.

Vite是一台Lightning快速冷服务器，可提供即时热模块更换和True按需编译功能。 这个工具是由Vuejs的创建者创建的，但这并不意味着它只能在Vuejs中使用，它可以被Reactjs之类的库使用。

Vite allows you to serve your code via native ES Module imports during development, allowing you to develop Vue single file components without a bundle step.

Vite允许您在开发期间通过本机ES模块导入来提供代码，从而无需绑定即可开发Vue单个文件组件。

Vite入门 (Getting Started with Vite)

Let’s take a look at how we can use Vite. Primarily Vite was built for Vue 3 but nevertheless we can still use it in our Vue 2 Application.

让我们看一下如何使用Vite。 Vite主要是为Vue 3构建的，但是我们仍然可以在Vue 2应用程序中使用它。

Head over to any directory of your choice and open up your terminal and type the following:

转到您选择的任何目录，然后打开终端并输入以下内容：

npx create-vite-app <name-of-project>

After running this command, you will have to move into your project directory by using the cd command and the install run npm install to install application dependency.

运行此命令后，您将必须使用cd命令和install run npm install进入项目目录以安装应用程序依赖项。

cd vite-test
npm install
code.

The code, the command will open up our application in Vs code.

代码后，该命令将以Vs代码打开我们的应用程序。

Next up we can run npm run dev to run our application.

接下来，我们可以运行npm run dev来运行我们的应用程序。

By default, Vite runs on port 3000, so we can access our application using localhost:3000

默认情况下，Vite运行在端口3000上，因此我们可以使用localhost：3000访问我们的应用程序

Now that our application is running, let’s see how Hot Module Replacement actually works.

现在我们的应用程序正在运行，让我们看看热模块更换的实际工作原理。

We will be using the HelloWorld.vue component inside the components folder to test how the Hot Module Replacement work. The codes there actually looks like this:

我们将使用components文件夹内的HelloWorld.vue组件来测试热模块更换的工作方式。 那里的代码实际上看起来像这样：

<template>
  <h5>{{ msg }}</h5>
  <button @click="count++">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      count: 0,
    };
  },
};
</script>

If you actually change anything in the markup, you will notice that’s the reload time is much faster than the normal Vuejs Application.

如果您实际上更改了标记中的任何内容，您会发现重装时间比普通的Vuejs应用程序快得多。

If you take a look at the main.js file you will see that it’s still running on Vuejs under the hood.

如果看一下main.js文件，您会发现它仍在Vuejs的后台运行。

If we inspect our code on the browser, we will see that it is calling the main.js file as a module

如果在浏览器上检查代码，我们将看到它正在将main.js文件作为模块调用

If you follow up on the main.js file you will see that Vite serves modules instead of a bundle which actually makes the application quite faster.

如果继续阅读main.js文件，您将看到Vite提供模块而不是捆绑包，这实际上使应用程序变得更快。

Note that all your Vuejs codes will still run effectively.

请注意，您所有的Vuejs代码仍将有效运行。

在Vite中安装Vue路由器 (Installing Vue Router in Vite)

You could still install your normal vuejs packages into your vite application like the Vue router by running:

您仍然可以通过运行以下命令将普通的vuejs软件包安装到vite应用程序(如Vue路由器)中：

npm i --save vue-router@v4.0.0-alpha.11

This will install the latest version of the Vue Router into your application. Next up create a router.js file and define some routes:

这会将最新版本的Vue路由器安装到您的应用程序中。 接下来创建一个router.js文件并定义一些路由：

import {
    createWebHistory,
    createRouter
} from "vue-router";
import Home from "./components/HelloWorld.vue";
const history = createWebHistory();
const routes = [{
        path: "/",
        component: Home
    },
];
const router = createRouter({
    history,
    routes
});
export default router;

After doing this we can now register our router.js file in our main.js file like this:

完成此操作后，我们现在可以像这样在我们的main.js文件中注册router.js文件：

import {
    createApp
} from 'vue'
import App from './App.vue'
import './index.css'
import router from "./router";
createApp(App).use(router).mount('#app')

With this done, we have to change our App.vue root component to this so that it will render all our components:

完成此操作后，我们必须将App.vue根组件更改为此，以便呈现所有组件：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <router-view />
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

And there you go you can register any other custom route of your choice.

然后您就可以注册您选择的任何其他自定义路线。

寻找Vue模板？ (Looking for Vue Templates?)

• Try our Vuejs Templates and create stunning web applications for unlimited client projects and personal projects.

  试试我们的Vuejs模板 ，为无限的客户项目和个人项目创建出色的Web应用程序。

• Start building web applications and products using our Free Vuejs Templates without any investment.

  无需任何投入，即可使用我们的免费Vuejs模板开始构建Web应用程序和产品。

结论 (Conclusion)

The Vuejs Vite is still Experimental and will be fully functional in Vue 3. You could still integrate it into your Vue 2 applications just to get more familiarity on how it works.

Vuejs Vite仍处于试验阶段，将在Vue 3中完全发挥作用。您仍可以将其集成到Vue 2应用程序中，只是为了更加熟悉它的工作方式。

翻译自: https://medium.com/wrappixel/what-the-heck-is-vite-474305b6e2f6