前端 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')
相关推荐
天蓝色的鱼鱼几秒前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君879973 分钟前
Flutter 如何给图片添加多行文字水印
前端·flutter
进击的尘埃6 分钟前
AI 代码审查工具链搭建:用 AST 解析 + LLM 实现自动化 Code Review 的前端工程方案
javascript
juejin_cn15 分钟前
[转][译] 从零开始构建 OpenClaw — 第五部分(对话压缩)
javascript
leolee1834 分钟前
Redux Toolkit 实战使用指南
前端·react.js·redux
bluceli36 分钟前
React Hooks最佳实践:写出优雅高效的组件代码
前端·react.js
IT_陈寒1 小时前
JavaScript代码效率提升50%?这5个优化技巧你必须知道!
前端·人工智能·后端
IT_陈寒1 小时前
Java开发必知的5个性能优化黑科技,提升50%效率不是梦!
前端·人工智能·后端
LDX前端校草1 小时前
前端开发规则配置
前端
代码老中医1 小时前
2026前端工程化新范式:如何用AI驱动你的设计系统?
前端