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中实现暂停的几篇文章
Mar 04 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
js上传图片预览的实现方法
May 09 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
js读取json文件片段中的数据实例
2017/03/09 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
基于Python的关键字监控及告警
2017/07/06 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
大学生职业规划论文
2014/01/11 职场文书
小学教师培训感言
2014/02/11 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python