PREFACE

• Simply use VUE to build front-end
• download the lastest node.js
• create vue framework
• add Element-Plus

Simply use VUE to build front-end

Althought I wrote a complete front-end project of an exam system, but I forget most knowledge about VUE because I don’t use it very often after I arrived in Sydney. Yesterday a friend asked me to make a simple website, I just thought maybe I can simply record some steps to build the application.

download the lastest node.js

I work on windows, and I download the pre-built binaries from the hyperlink here: npm prebuilt-binaries

Download and unzip it, then I gained binaries. Just add the path into the host’s environment, then check npm -v and node -v.

If you want to upgrade npm and node, just uninstall npm at the control panel of the windows. Then download the lastest binaries from the nodejs’ offcial website. Nodejs contains both npm and node.

create vue framework

please refer to https://cn.vitejs.dev/guide/ for more details, which is VUE’s offcial website.

Use the command below to create vue.

npm create vite@latest my-vue-app -- --template vue

add Element-Plus

refer to official website: https://element-plus.org/zh-CN/.

npm install element-plus --save

Then revise the original main.js, so that ensure you can use ES directly and correctly.

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // 确保引入 Element Plus 的样式

import App from './App.vue'


const app = createApp(App); // 创建应用实例
app.use(ElementPlus); // 使用 Element Plus 插件
app.mount('#app'); // 挂载应用到 DOM

---

Welcome to point out the mistakes and faults!