方法一:引入CDN
使用起来最简单的方法,直接引入CDN就可以工作了
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>

最简单的页面效果

方法二:npm安装(node版本需要6.x.0以上)
安装步骤:
官网给出的安装方法:
node输入命令行 npm i element-ui -S
我是在本地安装的没有全局安装,这样需要在项目地址安装一些别的一老:VUE和webpack等

出现的问题:

这个是package文件的配置问题出错,解决办法:
1.直接修改package.json文件内容
2.npm命令行重新初始化一下
npm init
根据提示修改信息,注意version是1.0.0

npm init -f 查看信息
接着npm install 安装项目需要的依赖环境

这样下载的项目很完整,有很多完整的项目示例
 
方法三:自己开发使用,应用空白模板
文件结构:

node命令行进入文件夹

运行:
npm run dev

运行成功

会直接打开页面,并且实时更新调试

npm安装的会提示具体错误信息

src内创建的vue文件修改后会实时刷新内容的,不需要每次都运行
 
编译项目:npm run build命令
执行后会输出编译好的项目文件

Element-UI安装和项目开发的更多相关文章

  1. 安装java项目开发环境

    搭建java 查看本机是否已有java 如果有,请卸载. 下载jdk 复制到服务器中 临时配置你在shell里面改,只是做了临时更改啊,一重启就没了 配置到系统的环境变量里 export JAVA_H ...

  2. Element Ui 安装以及配置

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 引入 Element 你可以引入整个 Element,或是根据需要 ...

  3. 🎉 Element UI for Vue 3.0 来了!

    第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~ 2016 年 3 月 13 日 Element 悄然诞生,经历 ...

  4. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  5. element ui Angular学习笔记(一)

    1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入El ...

  6. Electron-vue实战(一)—搭建项目与安装Element UI

    Electron-vue实战—搭建项目与安装Element UI 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.新建项目1.初始化项目打开cmd,新建一个项目,我使用的是electro ...

  7. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  8. FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)

    目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...

  9. [Openwrt 项目开发笔记]:PHP+Nginx安装(七)

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在上一节中,我们已经搭建了MySQL数据库了,因 ...

随机推荐

  1. thinkphp5 怎么获取当前的模块,控制器和方法名

    //当前模块url地址 $request= Request::instance(); $module_name=$request->module(); $controller_name=$req ...

  2. python 通过pymongo操作mongoDB执行sort

    在mongo shell 中对数据进行排序操作的时候 db.getCollection('ANJUKE_PRICE').find({},{'id':1,'_id':0}).sort({'id':1}) ...

  3. Jmeter中Websocket协议支持包的使用

    Jmeter中Websocket协议支持包的使用(转) 参考的来源是国外一篇文章,已经整理成pdf格式(http://yunpan.cn/cFzwiyeQDKdh3 (提取码:9bcf)) 转自:ht ...

  4. Spring Cloud Eureka 服务发现与消费

    服务发现与消费,其服务发现的任务是由Eureka的客户端完成,而服务的消费任务由Ribbon.JerseyClient等完成,Ribbon是一个基于HTTP和TCP的客户端负载均衡器:使用Jersey ...

  5. [转]Scrapy简单入门及实例讲解

    Scrapy简单入门及实例讲解 中文文档:   http://scrapy-chs.readthedocs.io/zh_CN/0.24/ Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用 ...

  6. msp430学习笔记-实现开方log等计算及FFT算法(待续)

    MSP430 FFT算法实现 http://bbs.21ic.com/icview-391532-1-1.html http://blog.sina.com.cn/s/blog_6cd2030b010 ...

  7. Python3中Urllib库基本使用

    什么是Urllib? Python内置的HTTP请求库 urllib.request          请求模块 urllib.error              异常处理模块 urllib.par ...

  8. IO练习文件读取

    import java.io.*; public class CheckFile { private File f ; private BufferedReader bdr; private char ...

  9. 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交

    什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...

  10. Google 新实现的Protobuf RPC: grpc

    转自: http://www.dongliu.net/post/622450 Google 刚刚开源了grpc,  一个基于HTTP2 和 Protobuf 的RPC 实现. Protobuf 本身虽 ...