Vue3 - Create a Project

1. Create Project

1.1 Create using vue-cli

Official document

# Viewing the @vue/cli version and ensure that the @vue-cli version is 4.5.0 or higher
vue --version
# Install or update your @vue-cli
npm install -g @vue/cli
# Create
vue create vue_test
# Run
cd vue_test
npm run serve

If you need to update vue, you may need to uninstall the older version first:

npm uninstall vue-cli -g

Create

vue create vue3_test

Run

cd vue3_test
npm run serve

1.2 Create using vite

Official document
Vite

# Create Project
npm init vite-app vue3_test_vite
# Enter Folder
cd vue3_test_vite
# Install
npm install
# Run
npm run dev

2. Project Structure(vue-cli)

The entry script is main.js.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Demo 1: Observe create app object

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

console.log('@@@', app)

app.mount('#app')

If you want to turn off syntax checking, add this configuration to file vue.config.js

module.exports = {
  lintOnSave: false,
};

Demo 2: Unmount

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

setTimeout(() => {
  app.unmount("#app");
}, 1000);