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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
js 走马灯简单实例
Nov 21 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
JS实现鼠标移动拖尾
Dec 27 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开发文件系统实例讲解
2006/10/09 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python 串口读写的实现方法
2019/06/12 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
如何在python中写hive脚本
2019/11/08 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
市场营销策划方案
2014/06/11 职场文书
供电工程专业求职信
2014/08/09 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
宇宙与人观后感
2015/06/05 职场文书