方法一:引入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. 安装ES

    ES环境搭建 1.创建用户组2.目录授权3.安装jdk4.vi /etc/sysctl.confvm.map_maxcount=65535vm.swappiness=5 sysctl -p 生效5.修 ...

  2. 读DataSnap源代码(三)

    function TWebRequestHandler.HandleRequest(Request: TWebRequest; Response: TWebResponse): Boolean; va ...

  3. mysql 主从复制--启动操作start slave, stop slave

    在MySQL配置主从关系时,会用到start slave, stop slave命令,本文简单介绍两个命令的使用方法和作用. start slave mysql> start slave 不带任 ...

  4. oracle误删数据

    表名:SYS_MENU alter table SYS_MENU enable row movementflashback table SYS_MENU to timestamp to_timesta ...

  5. ML平台_饿了么实践

    (转载至:https://zhuanlan.zhihu.com/p/28592540) 说到机器学习.大数据,大家听到的是 Hadoop 和 Spark 居多,它们跟 TensorFlow 是一个什么 ...

  6. gcc与g++的一些关系

    Gcc 简介Linux系统下的gcc(GNU C Compiler)是GNU推出的功能强大.性能优越的多平台编译器,是GNU的代表作品之一.Gcc是可以在多种硬体平台上编译出可执行程序的超级编译器,其 ...

  7. 《JavaScript设计模式与开发》笔记 4.闭包

    1.变量的作用域 2.变量的生存周期 3.闭包更多作用 1.封装变量 2.延续局部变量寿命 4.闭包和面向对象设计 5.闭包和内存管理 1.变量的作用域 var func = function(){ ...

  8. Thinkphp 3.1. 3 ueditor 1.4.3 添加水印

    1.引入Ueditor  <!-- 实例化编辑器 --> <script type="text/javascript"> window.UEDITOR_HO ...

  9. 荣耀9少 gms core服务

    1.首先安装gms core即本软件gms安装器,安装时候会重启一次. gms core apk下载地址:http://www.paopaoche.net/android/307559.html 注意 ...

  10. 卸载QQ,360,迅雷,搜狗

    如题. 以及一切中国的流行软件. 这帮家伙都不是一个人,后面都跟着一帮子助手,杀毒,自我保护,管家,桌面,播放器,等等等等,你也不知道电脑速度为什么会这么慢,但是他变慢了. 今天头天用 360优化速度 ...