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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
JavaScript实现随机点名器
Mar 25 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
source.php查看源文件
2006/12/09 PHP
php 日期时间处理函数小结
2009/12/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP答题类应用接口实例
2015/02/09 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
django的ORM模型的实现原理
2019/03/04 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python中xlutils库用法浅析
2020/12/29 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
学前教育毕业生自荐信
2013/10/29 职场文书
白酒市场开发计划书
2014/01/09 职场文书
考试作弊检讨
2015/01/27 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL