vue使用element-ui

最新推荐文章于 2025-07-10 13:24:12 发布

藏不戈

最新推荐文章于 2025-07-10 13:24:12 发布

阅读量570

点赞数

CC 4.0 BY-SA版权

分类专栏： js css 文章标签： vue

本文链接：https://blog.youkuaiyun.com/u014218318/article/details/94142647

css 同时被 2 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

本文详细介绍了从安装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