Create a vue3 project

1. Environmental preparation

1. Install node.js

Download URL: Node.js 

2. Check whether the installation is successful: the output version number indicates that the installation is successful

 Note: If it is already installed and not displayed, it may be that the environment variable is not configured

2. Build the vue environment

1. Install scaffolding vue-cli globally

 Enter at the command line:

npm install vue-cli -g （vue-lcli2)
npm install -g @vue/cli (vue-cli3）

 Error:

1. If you encounter such an error, just switch to Taobao’s mirror image source  decisively, and download it again after switching.

npm config set registry https://registry.npm.taobao.org

 2, The npm install command fails, prompting Cannot read properties of null (reading 'package').
Solution: Clear the cache npm cache clear --force and then reinstall the dependency npm install

 2. Check whether the installation is successful: the output version number indicates that the installation is successful

C:\Users\123>vue --version
@vue/cli 5.0.8

C:\Users\123>vue -V
@vue/cli 5.0.8

Error:

Solution:

1. Download

npm install -g vue

2. Enter npm config list first

3. Configure environment variables

This computer-"Properties-"Advanced System Settings-"Environment Variables

 

3. Create a vue project

Vue-cli3 creates a project, vue create project name 

Enter the command: vue create vue3-pdf-project

 Note: You can choose what you need

4. Configure Element plus

1. Document address

A Vue 3 UI framework | Element Plus (element-plus.org)

2. Download and install

npm install element-plus --save

3. Complete introduction

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)

app.use(ElementPlus).use(store).use(router).mount('#app')

4. Test

AboutView.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
     <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
  </div>
</template>

npm run serve run

5. A simple layout use case

Delete AboutView.vue 

 

Modify App.vue and index.js

 

 Modify HomeView.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <!-- <title-type></title-type> -->
         <h1 style="color:#12b049">test</h1>
      </el-header>
      <el-main> 
        <fill-in-the-blank></fill-in-the-blank>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import fillInTheBlank from '@/views/fillInTheBlank.vue'
// import TitleType from '@/views/titleType.vue'

export default {
  name: 'HomeView',
  components: {
    fillInTheBlank,
    // TitleType
  }
}
</script>

<style scoped>
.header{
  background-color: blue;
}
.main{
  background-color: aqua;
}
</style>

 implement

  npm run serve