创建vue项目+使用elementui组件

100 阅读1分钟

欢迎大家访问我其他博客网站(微信公众号、掘金、csdn、博客园、知乎),都是同名(极客三刀流)

准备工作

安装nvm

这里是推荐的博客window下安装并使用nvm(含卸载node、卸载nvm、全局安装npm)-CSDN博客

IDE

如vscode、webstorm等

参考文档

简介 | Vue.js

一个 Vue 3 UI 框架 | Element Plus

正式开始

先找到一个目录

找到一个目录地址用于存放vue项目,建议放在D盘, 我这边是如下放的

image-20250420204442122

image-20250420204442122.png

文件地址栏

输入cmd

进入命令行窗口

输入如下命令

 npm create vue@latest

在选择下面配置

图片中的项目名称自己定义

image-20250420204845165.png

检验文件是否建立成功

命令行窗口输入以下命令,cd 后面 跟上你自己刚刚创建文件的名字

 cd <your-project-name>
 npm install
 npm run dev

用IDE打开刚刚创建的vue项目

瘦身

image-20250420205215457.png

image-20250420205233074.png

精简App.vue

image-20250420205640249.png

引入Element-Plus

在 IDE中 执行安装依赖

 npm i element-plus -S

在 main.js 里面引入

image-20250420210417139.png

 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 ​
 app.use(ElementPlus, {
   locale: zhCn,
 })  

可能讲的不够好,请大家多多指正,到这里就结束了!!!