Vue项目引进ElementUI组件的方法

news/2024/7/10 1:25:38 标签: vue

环境要求

Nodejs

Nodejs

官网下载地址:http://nodejs.cn/download/具体安装参考其他资料

打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确。

如果安装版本比较老,想升级新版本

npm install npm -g

安装 webpack

安装webpack

npm install webpack -g

-g 表示安装为全局

安装 vue-cli

安装 vue 脚手架项目初始化工具 vue-cli

npm install vue-cli -g

淘宝镜像

npm使用的国外中央仓库,下载速度较慢,有的时候还会有部分文件被墙掉。

npm install -g cnpm --registry=https://registry.npm.taobao.org

建议使用淘宝镜像,安装完淘宝镜像以后可以使用 cnpm 代替 npm。例如webpack可使用如下命令:

cnpm install webpack -g .

创建Vue项目

vue init webpack +项目名称

运行vue

npm run dev

访问localhost:8080

引入ElementUI

打开项目 src\main.js 添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

package.json文件中添加

"element-ui": "^2.4.9"

重新npm install

测试是否安装完成

在App.vue中随意添加elementUI标签 如:

<el-input v-model="input" placeholder="请输入内容"></el-input>
data() {
return {
input: ''
}
}


保存后,打开网页显示出input即成功

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。


http://www.niftyadmin.cn/n/1300818.html

相关文章

SVN入门视频教程-黄强-专题视频课程

SVN入门视频教程—280人已学习 课程介绍 SVN是现在比较流行的、非常容易使用的开源源码管理工具。SVN基本上已经取代了CVS。 作为一个项目开发者&#xff0c;使用SVN来协调项目开发工作&#xff0c;代码管理、版本控制是非常简单和容易的&#xff0c;所以黄强老师针对SVN常用…

vue单页面实现当前页面刷新或跳转时提示保存

前言 最近公司vue项目中有一个需求&#xff0c;需要在当前页面刷新或跳转时提示保存并可取消刷新&#xff0c;以防止填写的表单内容丢失。刚开始思考觉得很简单&#xff0c;直接在Router的钩子中判断就好了&#xff0c;但是会发现还有新的问题存在&#xff0c;浏览器刷新和当前…

Visual Studio 版本的判断

_MSC_VER 是预编译控制宏&#xff1a;表示Microsoft的C编译器的版本。 其中MS VC 14.0表示Visual C的版本为14.0&#xff0c;后面括号中的Visual Studio 2015&#xff0c;表明该VC包含在微软开发工具Visual Studio 2015中。 MSVC 14.0 _MSC_VER 1900 (Visual Studio 2015) …

vue使用原生js实现滚动页面跟踪导航高亮的示例代码

使用vue做一个专题页面。滚动页面指定区域导航高亮。 监听滚动页面事件&#xff0c;对比当前页面的位置与元素的位置&#xff0c;如果当前滚动的区域位置大于元素的位置&#xff0c;导航添加class&#xff0c;其他去掉class进行样式切换。 我使用的方法是在定位元素上添加id&am…

new 、delete操作符 、operator new 、operator delete 、malloc 、 free 函数

运行程序离不开内存管理&#xff0c;c内存管理离不开malloc和free&#xff0c;c内存管理离不开new和delete。 虽说都是为了申请内存和释放内存&#xff0c;但new和malloc还是有区别的&#xff0c;这里总结下&#xff1a; 两者联系自不必多说&#xff0c;都是为了在堆上动态的…

深入浅析js原型链和vue构造函数

一、什么是原型链? 简单回顾下构造函数,原型和实例的关系: 每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针. 然鹅,在js对象里有这么一个规则: 如果试图引用对象(实例insta…

C++内存池讲解

很多学员对内存池特别陌生,在这里跟大家探讨下网上的一片技术文: https://www.ibm.com/developerworks/cn/linux/l-cn-ppp/index6.html class MemoryPool { public:MemoryPool (int _nUnitSize, int _nGrowSize = 3, int _nInitCount = 3);~MemoryPool();void* …

vue 配置多页面应用的示例代码

前言: 本文基于vue 2.5.2, webpack 3.6.0&#xff08;配置多页面原理类似&#xff0c;实现方法各有千秋&#xff0c;可根据需要进行定制化&#xff09; vue 是单页面应用。但是在做大型项目时&#xff0c;单页面往往无法满足我们的需求&#xff0c;因此需要配置多页面应用。 …