Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Vite from entry to master | create Vue program

Vite is a Web development build tool that enables lightning cold server startup thanks to its native ES module import approach. You can use Vite to quickly build a Vue project by running the following command from your terminal.

Create a Vue3 project using Vite

NPM way

$NPM init @vitejs/app ➤ Project Name:... vite-vue3 ? Use arrow-keys. Return to submit. Vanilla# Do not integrate any frameworks
❯  vue      # vue frameworkreact preact lit svelte ? Select a variant: › -use arrow-keys. Return to submit. ❯ vue vue-ts done. Now run:cd vite-vue3
npm install
npm run dev

Copy the code

or

$ npm init vite <project-name> -- --template vue
$ cd <project-name>
$ npm install
$ npm run dev
Copy the code

Yarn mode is recommended

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev
Copy the code

Install VUE-JSX support

yarn add @vitejs/plugin-vue-jsx -D
Copy the code

1. Configure vuE-jsx plug-in

vim vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// Introduce JSX dependencies
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),/ / to use vue - JSX]})Copy the code

2. The test

– Create app.jsx in SRC directory
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    setup() {
        return () = > <div>Hello Vue3 Jsx</div>}})Copy the code
To modify the main js
-- import App from './App.vue'
++ import App from './App'
Copy the code
– Start the project
yarn dev
Copy the code

Vue3 JSX dependency configuration succeeded

Create a Vue2 project using Vite

There is no vue2 option for NPM init. vitejs/app

How do I create a VUE2 project using Vite?

Use the third-party plugin underfin/ Viet-plugin-vue2

1. Create projects

NPM init@vitejs /app ➤ Project Name:... Vuite-vue2 ➤ ➤ Select a framework › vanilla ➤ ➤ Select a variantcd vite-vue2
touch vite.config.js
Copy the code

2.Usage

yarn add vite-plugin-vue2 -D
Copy the code
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
    plugins: [createVuePlugin(/*options*/)]},Copy the code

3. Install the vue

yarn add vue -S
yarn add vue-template-compiler -D
Copy the code
// package.json
"dependencies": {
    "vue": "^ 2.6.14"
 }
Copy the code
mkdir src
mv main.js ./src/main.js
cd src
vim App.vue
vim main.js
vim index.html
Copy the code
<! --App.vue--> <template> <div> Hello Vite Vue2 </div> </template>Copy the code
// main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: "#app".render: (h) = > h(App),
}).$mount()
Copy the code
<! --index.hmtl-->
-- <script type="module" src="/main.js"></script>
++ -- <script type="module" src="/src/main.js"></script>
Copy the code

4. Project start

yarn dev
Copy the code

Creating a successful

Create the viet-vue2 project in Git mode

# https://github.com/matt-auckland/vite-vue2-starter
git clone https://github.com/matt-auckland/vite-vue2-starter.git
Copy the code