วิธีติดตั้ง ViteJS บน Windows อย่างง่าย | Vite + Vue.js

ViteJS is a powerful tool that allows you to build web applications quickly and efficiently. It is built on top of Vue.js, a popular JavaScript framework that is easy to learn and use. In this tutorial, I will guide you through the steps to install ViteJS on Windows in an easy and straightforward manner.

Step 1: Install Node.js

Before you can install ViteJS, you need to have Node.js installed on your system. Node.js is a JavaScript runtime that allows you to run JavaScript code outside of a web browser. You can download the latest version of Node.js from the official website (https://nodejs.org/) and follow the installation instructions provided.

Step 2: Create a new Vue.js project

Once you have Node.js installed, you can create a new Vue.js project using the Vue CLI. Open a terminal window and run the following command to install the Vue CLI globally on your system:

npm install -g @vue/cli

After the Vue CLI is installed, you can create a new Vue.js project by running the following command:

vue create my-vite-project

Replace my-vite-project with the name of your project. The Vue CLI will guide you through the process of setting up your project and installing the necessary dependencies.

Step 3: Remove the default Vue configuration

By default, the Vue CLI will set up a project using the Vue 2.x configuration. Since we want to use ViteJS with Vue 3.x, we need to remove the default Vue configuration. Open the package.json file in your project folder and remove the following lines:

"dependencies": {
  "vue": "^2.6.11"
}

You should also remove any references to Vue 2.x in your project files, such as importing the vue package in your JavaScript files.

Step 4: Install ViteJS

Now that you have set up a new Vue.js project and removed the default Vue configuration, you can install ViteJS by running the following command in your project folder:

npm install -D vite

This will install ViteJS as a development dependency in your project.

Step 5: Update your project configuration

Next, you need to update your project configuration to use ViteJS instead of the default Vue CLI build system. Create a new file named vite.config.js in your project root directory and add the following configuration:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

This configuration tells ViteJS to use the @vitejs/plugin-vue plugin for Vue.js support.

Step 6: Run your ViteJS project

To start your ViteJS project, run the following command in your project folder:

npx vite

This will start a development server and open your project in a web browser. You can now start developing your web application using ViteJS and Vue.js.

In conclusion, installing ViteJS on Windows is a simple and straightforward process that involves installing Node.js, creating a new Vue.js project, removing the default Vue configuration, installing ViteJS, updating your project configuration, and running your ViteJS project. By following these steps, you can quickly get started with ViteJS and build powerful web applications with ease.