preface

This article will introduce you to how to quickly start creating your own projects;

Also, what does NPM init vite@latest do?

If you’re wondering what Vite is and why you should use it, check out this article: What is Vite and what are the advantages of Vite

Cut the gossip and get to work

What will you learn from this passage?

1. Vite quick start

Rely on the version

  • Vite: vite@latest Latest version v2.8.0

  • Node: v12.20.0

1.1 Initializing the Project

# npm 
npm init vite@latest 

# yarn 
yarn create vite 

# pnpm 
pnpm create vite

Copy the code

Then follow the prompts to operate!

You can also directly specify the project name and the template you want to use through additional command-line options. For example, to build a Vite + Vue project, run:

 # npm 6.x
 npm init vite@latest my-vue-app --template vue
 
 # NPM 7+ requires additional double lines:
 npm init vite@latest my-vue-app -- --template vue
 
 # yarn
 yarn create vite my-vue-app --template vue
 
 # pnpm
 pnpm create vite my-vue-app -- --template vue
Copy the code

Note: The vue template of the template selected in Vite defaults to the version of VUe3;

1.2 Creating a Vue3 Project

1.2.1 initialization

 # npm
 npm init vite@latest

 # yarn
 yarn create vite

 # pnpm
 pnpm create vite
Copy the code

1.2.2 Enter the project name

 ? Project name:  vite-vue3
Copy the code

1.2.3 Selecting a Framework (VUE)

? Select a framework: Use arrow-keys. Return to submit. Vanilla // native js > vue3 react // react preact // Lightweight react framework lit // Lightweight Web component Svelte // Svelte frameworkCopy the code

1.2.4 Whether to Use typescript

? Select a variant: › -use arrow-keys. Return to submit. Vue ❯ vue-tsCopy the code

1.2.5 Starting the project

 cd vite-vue3 && npm install && npm run dev
Copy the code

Can be developed in the SCR directory ~

1.3 Creating a Vue2 Project

1.3.1 Initialization (Same as Vue3)

 npm init vite@latest
Copy the code

1.3.2 Enter the project name: viet-vue2

1.3.3 Selecting a Framework: Vanilla

1.3.4 After selection is complete

 cd vite-vue2 && npm install && npm install vite-plugin-vue2 vue-template-compiler -D
Copy the code

1.3.5 Creating the viet.config. js file

// 1. Create: touch vite.config.js // 2. Js import {createVuePlugin} from 'viet-plugin-vue2' export default {plugins: [createVuePlugin()],}Copy the code

1.3.6 installation vue2

Since the main branch of the vue repository defaults to vue3.x, NPM install vue directly installs the latest vue3, so vue2.x must be installed using the version number

NPM install [email protected] - save - devCopy the code

1.3.7 Modifying the project structure

  1. Create SRC folder

  2. Move main.js into the SRC folder and modify:

    // main.js import Vue from "vue"; import App from "./.. /App.vue" new Vue({ el: "#app", render: (h) => h(App) }).$mount();Copy the code

  4. Create app.vue in the SRC file and modify:

     <template>
   <div>This is Vue2</div>
 </template>
Copy the code

1.3.8 Starting the project

 npm install && npm run dev
Copy the code

Create a VUE2 project or use the official versionawesome-vite, just find the plug-in you want to use (figure below)

1.4 Creating other framework projects (React, Preact, Lit, Svelte)

  • The creation process is essentially the same as creating a VUE3 project;
  • Just select the frame you want to create in the Select frame step

NPM init vite@latest is not the same as the command-line interface (CLI) command used to create Vue projects.

To understand this question, let’s take a look at it

2. npm init vite@latestWhat did he do?

2.1 npm init

NPM init can also accept a

;

2.2 NPM init <, initializer >

NPM init < Initializer > can be used to create a new or existing NPM package.

Initializer in this case is an NPM package named create-< Initializer >. This package will be installed by npm-exec(also known as NPX) and then execute the script corresponding to the bin property in package.json. Run any other initialization-related operations.

2.3 Some official examples:

NPM command equivalent
npm init foo npx create-foo
npm init @usr/foo npx @usr/create-foo
npm init @usr npx @usr/create

Then through the above transformation, we can get:

 npm init vite@latest  =>  npx create-vite
Copy the code

So if we run NPM init vite@latest we’re essentially running NPX create-vite

2.4 View the Vite source code

The create-Vite package can be found by looking at npmjs.com or in the Packages folder in the Vite source code (figure below)

2.5 View in create-vite folder

We found the bin entry in the package.json folder under create-vite:

 {
   "name": "create-vite"."version": "2.7.2"."bin": {
     "create-vite": "index.js"."cva": "index.js"},... }Copy the code

The last

This series will be a continuous update series, about the whole “Vite from entry to master”, I will mainly from the following picture several aspects, please wait and see!!

Pretty boy pretty girls, all see here, don’t click a “like” and then go 🌹🌹🌹