Vue入门 创建vue项目并安装UI框架ElementUI--1

最新推荐文章于 2025-09-16 14:17:07 发布
原创 最新推荐文章于 2025-09-16 14:17:07 发布 · 4.4k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文详细介绍了如何从头开始创建Vue项目，包括安装node.js、设置vue-cli、使用IntelliJ IDEA创建项目，以及运行项目。接着，教程演示了怎样安装和使用流行的UI框架ElementUI，通过npm命令快速集成到Vue项目中。

创建vue项目

一、安装node.js
二、安装vue-cli脚手架
三、使用IntelliJ IDEA（或者visual studio code）创建vue项目
四、运行vue项目
五、安装Element-ui

一、安装node.js
  1. node.js官网下载地址：https://nodejs.org/zh-cn/，一路next下来，安装完毕。
  2. 打开cmd(window环境下快捷键window+R),输入node -v
    在这里插入图片描述
    上图就是node.js的版本信息（版本v8.11.2）
    3.由于node.js已经集成了npm（包管理器），所以npm也一起安装好了,输入npm -v
    在这里插入图片描述
    上图就是npm的版本信息（版本5.6.0）。
二、安装vue-cli脚手架

输入npm install vue-cli -g

最低0.47元/天 解锁文章
Vue( ElementUI入门、vue-cli安装)
m0_64863860的博客
09-29 1446
Vue是一个当下流行的开发框架，它的核心思想是组件化和数据驱动，ElementUI是饿了么推出的基于vue2.0的组件库，提供了丰富的课复用的组件，方便前端的开发。ElementUI官网。另外一个与ElmentUI类似提供基于Vue2.0的组件库是iview。Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
精选资源
vue-hiprint-example:基于Vue Element-UI的hiprint项目
05-11
基于Vue Element-UI的hiprint项目 屏幕截图 入门 该项目是vue指纹的起点。 步骤1 > git clone https://github.com/peakcool/vue-hiprint-example.git 第2步 > cd YOUR_PROJECT/vue-hiprint-example 第三步 > ...
idea-elementUI-plugin.zip
12-01
idea element ui 提示插件。 安装：1、先安装vuejs插件；2、本地安装idea-elementUI-plugin.jar；3、重启idea即可。 使用：在页面写 <el- 即可提示。
vue UI框架
weixin_34248487的博客
03-07 223
1）vue 只是一个js库，不算框架，他不限制你使用使用UI框架，理论上你可以使用任意 UI 框架   2）一些 vue UI框架 vux：https://vux.li/#/ mint：http://mint-ui.github.io/#!/zh-cn vue-carbon：https://myronliu347.github.io/vue-carbon/#!/ vue-mobile：https:...
基于Vue2的高效前端UI框架UIVue项目实战
最新发布
weixin_42602241的博客
09-16 1271
</script>-- 父组件 ParentForm.vue --><template><div>/><p>当前输入: {{ inputValue }}</p></div><script>data() {return {},methods: {},console.log('输入框获得焦点');
Vue创建项目并引入Element-UI
erpao的博客
05-17 639
1.首先在命令行输入vue，检查Vue环境是否有问题： 出现下图所示，就说明环境没问题！ 2.指定创建Vue项目的位置 3.执行创建项目的命令 使⽤vue-cli创建项⽬命令：vue create 项目名称 我们把“my-project”作为我们创建的项目的名称！ 下面三个是让我们选择的，我们选择默认的，即直接按回车即可！ 按回车后等待即可，，，，，， 出现下图的白色框框里的内容，则就说明已经安装成功了！ 4.运行 根据步骤三的图片中白色框框里的提示，运行你创建的项目吧！ 首先切换到你创建项目的位
创建Vue项目并且加载elment-ui
weixin_46266624的博客
04-25 125
【代码】创建Vue项目并且加载elment-ui。
基于vue的UI框架集锦
weixin_30470643的博客
12-27 718
前端框架百花齐放、争奇斗艳，令人眼花缭乱。大神们一言不合就整一个框架出来，另小白们无所适从。下面罗列了一些比较优秀的UI框架，Star多的大都是老牌劲旅，Star少的许多是后起之秀。 适用PC端 1、elementUI 支持vue2.x， 饿了么前端团队打造 2、iView 支持vue2.x 3、Vue Antd 支持vue1.x，据说不再有人维护 4、N3 支持vue2.x...
精选资源
2018年Vue2.x 5小时入门视频教程-包括Vuex、MintUi、ElementUi基础教程-01.zip
10-05
本教程针对Vue2.x版本，涵盖了基础到进阶的知识点，旨在帮助初学者在5小时内快速入门Vue，并了解如何与Vuex、MintUi、ElementUi等库进行集成。 首先，从描述中我们可以看出，课程会从Vue的基础开始讲解，如Vue的...
精选资源
2018年Vue2.x 5小时入门视频教程-包括Vuex、MintUi、ElementUi基础教程-02.zip
10-05
"24 Vue UI框架 ElementUi的使用 以及webpack.config.js配置.zip"涵盖了ElementUi的基础组件使用，并指导你如何配置Webpack以支持ElementUi。 "16 Vue非父子组件传值.zip"介绍了在Vue中非直接父子组件之间如何传递...
vue 安装element UI
baidu_23263735的博客
09-11 201
1、安装element-ui npminstall element-ui --save 2、在main.js文件中 引入 element 组件 ： import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ...
基于vue的ui框架
04-28
基于vue的ui框架。可适用于app,微信端，具有网页常见的布局和js兄啊过
ElementUI安装与使用指南
ChinaDragon10的博客
01-30 4413
ElementUI使用指南
基于vue的UI框架集锦(移动端+pc端)
热门推荐
赵乘风_i
04-26 7万+
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约，是我喜欢的风格 star 2.3k中文文档 在线预览2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。中文文档 在线预...
Vue的UI框架
qq_41437844的博客
08-25 432
1：饿了么ElementUI 推荐指数：star:45.2k 适用：PC端 官网地址：http://element-cn.eleme.io/#/zh-CN GitHub地址：https://github.com/ElemeFE/element 介绍： Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，整个ui风格简约，上手挺快，大多数vue开发应该都是选择element,因为社区做的比较完整，不懂的可以在网上找到很多博客和解答。 2：vuetify 推荐指数：star
使用VueUI安装elementUI
qq_42886373的博客
09-03 682
创建新的项目，完成之后 找到插件，然后搜索elementUI进行安装。然后傻瓜式配置插件。 然后使用idea打开vue工程，在命令行输入： npm run serve 启动工程之后会报错： 因为在vueUI中安装没有完成，需要使用命令行的方式再次进行安装： cnpm install --save element-ui 最后再次运行： npm run serve 打开的界面是这样： 至此就已经成功安装elementUi ...
安装element ui
weixin_43972428的博客
09-23 7547
3.原因是英文翻译：npm WARN已弃用core-js@2.6.12: core-js@不再维护，由于问题太多，不建议使用。由于V8引擎的奇想，旧core-js版本的特性检测可能会导致高达100倍的减速，即使什么都没有填充。7.执行npm run serve，在package.json中出现element ui的版本号。1.先在dev控制台输入npm i element-ui --save。6.在dev窗口执行npm i element-ui --save。即需要升级core-js。
element-ui 安装
xuelang532777032的博客
03-06 1685
其实 很简单  只是资料不好找，饿了吗 的框架  1/下载来  https://github.com/taylorchen709/vue-admin；2/解压 文件，并进入目录 npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm installcnpm run dev如果还不行  进来博主QQ群问下吧  QQ群153...
【vue】创建第一个vue+element ui项目
someday____的博客
09-01 1385
在之前的文章中已经搭建了vue开发环境，并创建好了vue项目，接下来开始创建第一个vue+element项目之前的文章请移步：1.使用vscode运行Vue项目在vscode中创建vue项目Element-Ui是基于Vue封装的组件库，主要作用是简化了常用组件的封装。简单来说Vue是一个前端JavaScript框架，Element-Ui是前端UI框架。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值