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基本语法分析说明
Jun 15 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
javascript白色简洁计算器
May 04 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
简单实现js拖拽效果
Jul 25 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
重学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禁用函数设置及查看方法详解
2016/07/25 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python装饰器用法示例小结
2018/02/11 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python如何使用腾讯云发送短信
2020/09/17 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
台湾三立电视电商平台:电电购
2019/09/09 全球购物
毕业生如何写自荐信
2014/03/26 职场文书
安全生产宣传标语
2014/06/06 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
五一晚会主持词
2015/07/01 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
利用Java连接Hadoop进行编程
2022/06/28 Java/Android