vue项目创建并引入饿了么elementUI组件的步骤
1：安装node
前端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。
2：查看node的版本号
输入命令：node -v;
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
如果出现以下截图，说明已经成功了，输入命令，运行项目
6：安装 elementUI
输入命令：npm i element-ui -S
这里解释以下 -S指生产环境，-D指开发环境
element-ui安装在了这里
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,代码如下：
然后在浏览器地址栏输入http://localhost:8080/#/test，（前提已经运行了npm run dev）如果看到一下界面说明已经成功了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue.js实现图片压缩封装方法,包括全局main.js引入方法，通过引入imgupload方法结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
众所周知在写循环的时候给循环中的数据定义ref以便再下面直接通过this.$ref.来访问,下面这篇文章主要给大家介绍了关于vue如何在for循环中设置ref并获取$refs的相关资料,需要的朋友可以参考下2022-12-12
本文主要介绍了Vue页面中引入img图片的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue-editor-bridge报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
现在的手机五花八门,造就了移动端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持与UI图一致的效果,就成了让前端不得不头疼的问题,下面这篇文章主要给大家介绍了vue实现移动端适方案的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue2与Vue3兄弟组件通讯bus的区别及用法，有需要的朋友可以借鉴参考下，希望可以有所帮助，祝大家多多进步早日升职加薪2021-09-09
这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vant的Tabbar标签栏引入自定义图标方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
WebStorm是一款优秀的前端开发IDE,之前一直可以调试Vue项目,下面这篇文章主要给大家介绍了关于使用Webstorm调试Vue代码的详细图文教程,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-05-05
provide和inject可以实现嵌套组件之间进行传递数据,这两个函数都是在setup函数中使用的,下面这篇文章主要给大家介绍了关于Vue3学习笔记之依赖注入Provide / Inject的相关资料,需要的朋友可以参考下2023-05-05
最新评论