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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
环境工程专业自荐信
2014/03/03 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL