前端 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')
相关推荐
陈随易5 小时前
Postman 被曝自动往 Claude Code 和 Codex 装插件
前端·后端·程序员
Dream-Y.ocean7 小时前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
Csvn8 小时前
性能监控
前端
Highcharts.js8 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
Csvn9 小时前
构建工具
前端
FRing039 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷10 小时前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码
kyriewen11 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
IT_陈寒12 小时前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端
工控丫丫12 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库