前端 vue + element-ui 框架从 0 - 1 搭建

1. 安装node

地址: Node.js --- 在任何地方运行 JavaScript

2. 安装 vue

2.1 执行安装命令

复制代码
npm uninstall -g vue-cli 

npm install -g @vue/cli  

安装最新的vue3版本

2.2 使用vue 脚手架 搭建项目

vue create project_name

2.2.1 注意

项目名称不能包含大写

2.3 启动项目

复制代码
        cd 项目名

        npm run serve

3. 安装 element-ui

复制代码
npm i element-ui -S  
vue 2.0 版本安装无异常、3.0 版本提示不匹配
使用 npm install element-plus --save 
vue 3.0 版本 用上面方法安装

3.1 存在下载较慢的情况 配置国内npm镜像

复制代码
npm config set registry https://registry.npmmirror.com/

4. 将 element-ui 配置到 全局 vue

复制代码
import { createApp } from 'vue'
import App from './App.vue'
import elementUi from 'element-plus'

import 'element-plus/dist/index.css'
const app  = createApp(App)
app.use(elementUi)

app.mount('#app')

5. 引入 axios

复制代码
import { createApp } from 'vue'
import App from './App.vue'
import elementUi from 'element-plus'
import Axios from "axios";

import 'element-plus/dist/index.css'
const app  = createApp(App)
app.use(elementUi)
// 导入
app.use(Axios,'axios')

app.mount('#app')
相关推荐
weixin79893765432...5 小时前
Vue 组件的更新过程(编译系统 + 响应式系统 + 虚拟 DOM & Diff)
vue.js
会一丢丢蝶泳的咻狗5 小时前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花5 小时前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端
Lsx_5 小时前
前端视角下认识 AI Agent 和 LangChain
前端·人工智能·agent
陈振wx:zchen20085 小时前
JavaScript
javascript·js
我是伪码农5 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜5 小时前
fetch-event-source源码解读
前端·javascript
用户39051332192886 小时前
前端性能杀手竟然不是JS?图片优化才是绝大多数人忽略的"降本增效"方案
前端
朱昆鹏6 小时前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
lyrieek6 小时前
pgadmin的导出图实现,还在搞先美容后拍照再恢复?
前端