vue项目创建并引入饿了么elementUI组件的步骤


Posted in Javascript onApril 11, 2019

1:安装node

前端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

vue项目创建并引入饿了么elementUI组件的步骤

2:查看node的版本号

输入命令:node -v;

vue项目创建并引入饿了么elementUI组件的步骤

3:安装淘宝npm镜像

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

4:安装全局vue-cli脚手架

淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;因为本人翻墙,习惯用npm所以后面的命令依然用npm运行;

输入命令:npm install --global vue-cli

5:开始进入主题,初始化一个vue项目

输入命令,itemname是你的项目名称

输入命令:vue init webpack itemname

其中vue build 一般选择Runtime-only,如果需要编译则选择Runtime + Compiler,但会影响性能;

ESlint是检查代码,一般选择安装,选Standard;

Pick a test runner 选择Jest

vue项目创建并引入饿了么elementUI组件的步骤

如果出现以下截图,说明已经成功了,输入命令,运行项目

vue项目创建并引入饿了么elementUI组件的步骤

6:安装 elementUI

输入命令:npm i element-ui -S
这里解释以下 -S指生产环境,-D指开发环境

vue项目创建并引入饿了么elementUI组件的步骤

element-ui安装在了这里

vue项目创建并引入饿了么elementUI组件的步骤

7:测试一下ElementUI是否可用;

在项目的src/components目录下新建test.vue,具体代码如下:

<template>

 <div>
  <el-row>
   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
  </el-row>
  <el-row>
   <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
  <el-row>
   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  </el-row>
  <el-row>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
  <el-row>
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
 </div>

</template>

<script>
export default{
 name:"test",
 data(){
  return{
   data:"这是测试数据",
  }
 }
}
</script>

<style lang="css">
 .el-row {
  margin-bottom: 20px;
  &:last-child {
   margin-bottom: 0;
  }
 }
 .el-col {
  border-radius: 4px;
 }
 .bg-purple-dark {
  background: #99a9bf;
 }
 .bg-purple {
  background: #d3dce6;
 }
 .bg-purple-light {
  background: #e5e9f2;
 }
 .grid-content {
  border-radius: 4px;
  min-height: 36px;
 }
 .row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
 }
</style>

然后在路由中引入test.vue,路由位置:src/router/index.js,代码如下:

vue项目创建并引入饿了么elementUI组件的步骤

然后在浏览器地址栏输入http://localhost:8080/#/test,(前提已经运行了npm run dev)如果看到一下界面说明已经成功了

vue项目创建并引入饿了么elementUI组件的步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
Javascript的比较汇总
Jul 25 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 #Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 #Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 #Javascript
Vue开发Html5微信公众号的步骤
Apr 11 #Javascript
跟混乱的页面弹窗说再见
Apr 11 #Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 #Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 #Javascript
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php whois查询API制作方法
2011/06/23 PHP
深入PHP curl参数的详解
2013/06/17 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
详解python中的index函数用法
2019/08/06 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
JAVA程序员面试题
2012/10/03 面试题
财务主管自我鉴定
2014/01/17 职场文书
大课间活动制度
2014/01/18 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
护士感人事迹
2014/05/01 职场文书
政风行风评议整改方案
2014/09/15 职场文书
店长岗位职责
2015/02/11 职场文书
毕业生个人自荐书
2015/03/05 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书