1、在D盘中创建一个baijiahao的文件夹,用于存放创建的Vue3的项目。
2、打开DOS面板,输入
npm init @vitejs/app vue3demo
回车,给出一下的提示
@vitejs/create-app is deprecated, use npm init vite instead
? Select a framework: 》-use arrow-keys, Return to submit.
> vanilla
vue
react
preact
lit
svelte
创建的是一个Vue项目 所以选择第二个进行依赖的安装
关于是使用vue+js 还是使用vue+ts看自己的项目需求来定。在这里使用的是vue+js作为开发的基础语言。然后按回车建,将进行项目的基础文件安装和下载
vue3+vite项目的dos命令界面
Vue3项目名称
Vue3+Vite项目目录展示图
Vue3项目创建好之后,还需要进行依赖的下载,使用一下命令进行相关核心依赖的安装
npm install --save
使用npm安装相关的Vue3项目的依赖
安装好之后,项目中就会对一个node_modules文件夹,该文件夹用于存放一些Vuey依赖的核心库和第三方的库
3、安装ElementPlus UI组件的相关依赖;使用以下命令
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
以上命令可用选择自己喜欢的一个包文件进行下载和安装。具体的安装方法在这里就不详细的介绍了。
使用npm包管理器安装element-plus
安装好之后,使用vscode打开项目。并在main.js文件中引入相关的Element-plus的样式和核心的组件
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
//引入Element-plus核心的文件和css样式
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";
//然后进行挂载在app中
app.use(ElementPlus, {
locale: zhCn,
});
app.mount("#app");
Vscode编辑器中项目
根据上面的步骤,基本上Vue3+Vite+ElementPlus的项目基本算是搭建完全了。那么怎么使用Element-Plus的其中的组件呢?
下面有一个简单的案列,也可以去Element-plus官网去查看相关的文档使用方法。
Default
Primary
Success
Info
Warning
Danger
以上是使用element-plus的按钮组件,并使用
npm run dev
命令进行启动,随后在浏览器中输入localhost:3001查看是否正常的进行显示
浏览器中显示的按钮信息
注意:关于端口号是多少 看控制台中的信息
页面更新:2024-05-13
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号