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 相关文章推荐
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
JS实现多功能计算器
Oct 28 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP生成树的方法
2015/07/28 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
图片完美缩放
2006/09/07 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
行政总监岗位职责
2013/12/05 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
行政处罚告知书
2015/07/01 职场文书
中学政教处工作总结
2015/08/13 职场文书