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 替换
Feb 19 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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返回字符串中所有单词的方法
2015/03/09 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python的dataframe和matrix的互换方法
2018/04/11 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python利用opencv保存、播放视频
2020/11/02 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
给同事的道歉信
2014/01/11 职场文书
超市总经理岗位职责
2014/02/02 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
任命通知范文
2015/04/21 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android