vue使用element-ui

本文详细介绍了从安装Node.js开始,到使用Vue CLI和Webpack搭建项目,再到安装和配置Element UI的过程。涵盖资源下载加速、依赖安装、项目启动、Element UI组件使用等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 安装node.js ,输入node -v 和 npm -v 分别查看版本号,验证是否成功
2. 安装淘宝镜像 ,也可不用, 只是加快资源下载
 npm install -g cnpm --registry=http://registry.npm.taobao.org
 或
 npm config set registry https://registry.npm.taobao.org 
3. 安装脚手架, 输入vue -V(大写) 和 webpack -v 就可以查看是否安装成功
npm install -g vue-cli        //全局安装vue脚手架
npm install -g webpack           //全局安装webpack
npm install -g webpack-dev-server   //安装webpack环境
4. 初始化vue项目
vue init webpack vueDome
5. 安装依赖
npm install   
6. 启动项目
npm run dev 
7. 安装工具
npm i vue-resource vue-router vuex axios --save  
8. 安装element-ui
npm i element-ui -S
9. main.js中引入 ,添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
10 .组件使用
<template>
   <div class="hello">  
    <h2>Essential Links</h2>  
    <el-button>默认按钮</el-button>  
    <el-button type="primary">主要按钮</el-button>  
    <el-button type="text">文字按钮</el-button>  
  </div>
</template>
11. 效果

在这里插入图片描述

12. vue3.0

12.1 创建helloweb文件件 cd /helloweb
12.2 基于node初始化vue3.0项目

npm init @vitejs/app helloweb --template vue

12.3 安装依赖 及运行项目

npm install  
npm run dev
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值