从0到1构建前端项目

最新推荐文章于 2024-06-09 16:20:20 发布

安全天天学

最新推荐文章于 2024-06-09 16:20:20 发布

阅读量842

点赞数 1

分类专栏： Vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_53568983/article/details/128505130

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

从0到1构建前端项目

前言
一、vite下载及配置
二、下载Element-UI
总结

前言

由于前端的快速发展，前端都是由一些模块化的东西构成，所有构建前端项目就是下载前端框架和UI，这里我使用的是vite和Element-UI

一、vite下载及配置

首先打开终端，输入如下指令进行vite下载

npm init vue@latest admin

在这里插入图片描述

如上指令会生成一个admin文件夹，进入该文件夹，然后还要下载相应的依赖模块才可以使用，使用如下指令下载依赖模块

cd admin
npm install

在这里插入图片描述

下载之后使用npm run dev运行vite，

在这里插入图片描述

访问地址http://127.0.0.1:5173/出现如下页面就是成功了

在这里插入图片描述

二、下载Element-UI

使用如下指令进行Element-UI下载(要进入到admin文件夹下面)

npm install element-plus --save

在这里插入图片描述

如下是main.js中应该替换掉的类容

// 1、main.js 文件
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";


import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

// 在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。
// size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。
app
  .use(router)
  .use(ElementPlus, { size: "small", zIndex: 3000 })
  .mount("#app");