Use HBuilder X to develop Vue3+node+element-plus

There are many tools for developing Vue3, such as VSCode, which is also very easy to use. This article mainly uses HBuilder X for development.

3 environments:

Windows10

Node installation

1. Open the official website, select a version, and install it

Node.js

2. Select the path, the next step is fine 

3. Enter the command to see the version

node -v

4. Then enter the command to install the domestic Taobao mirror, so that the speed is faster

npm install -g cnpm --registry=https://registry.npm.taobao.org

 Prompt let's upgrade, we can upgrade, we can not upgrade.

5. We choose to upgrade, skip this step if you don’t want to upgrade

Enter the command in green font

npm install -g [email protected]

6. Then enter the command for global installation

cnpm install vue-cli -g

6. Check whether the installation is successful

vue -V

At this point, the environment installation is complete! ! If you are unsuccessful, try more, the installation environment is already a very troublesome thing.

 Back to the topic, build a Vue3 project

 1. After the download is complete, open the development software

2. Select the file, write the project name and path, select version 3.28, and create

3. The order of file execution

First index.html->main.js->App.vue->HelloWorld.vue

Open the file and look carefully, you can see the order, like nesting dolls, layer by layer

4. Click Run and select the built-in browser

If not, just download it

You can also choose the browser, so that you can browse outside

In fact, it worked. 

5. Next, we install element-plus and select as shown in the figure

6. Enter the command

If the network is good, use npm

npm install element-plus --save

If the network is not good, use cnpm 

cnpm install element-plus --save

7. If there is an error, see the extension, if there is no error, just see the fifth step of the extension.

expand

Install element-plus error as shown below

reason:

There  is an error in this file, so it causes a compilation error.

Solution: So, after we uninstall the content inside, and then download it again. Finally I know the reason, here is my computer's global error, now just delete it separately, and then install it separately.

1. Open the path of this project. Execute in sequence to uninstall

cnpm cache clean
rm -rf node_modules
rm package-lock.json
npm cache clear --force

2. After the execution is completed, there will be no node_modules folder

3. Execute the following commands in sequence

cnpm install 
cnpm run dev
cnpm run serve

4. node_modules have

5. Install element-plus

cnpm install element-plus --save

6. Modify main.js as follows

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

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

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

Then copy the component of element-plus

  <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>

7. Then right-click on demoVue3 and choose to operate

 result 

8. Then run the project, success!