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）如果看到一下界面说明已经成功了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vxe-table 实现表格数据分组功能(按指定字段数据分组)
文章介绍了如何使用树结构实现表格数据分组,并提供了官方文档的链接,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要介绍了Vue数据更新但页面没有更新的多种情况问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了深入理解Vuex的作用，对Vuex感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了vue中使用@blur获取input val值的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue.config.js中配置Vue的路径别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
本文探讨了Vue项目中缺少明显入口文件的原因,并提供了解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
自定义指令是vue中使用频率仅次于组件，其包含bind、inserted、update、componentUpdated、unbind五个生命周期钩子。本文将对vue指令的工作原理进行相应介绍2021-06-06
弹窗效果是在Web开发中经常用到的一种交互效果,它可以在用户点击某个按钮或者触发某个事件时显示一个悬浮框,提供用户与页面进行交互的机会,这篇文章主要给大家介绍了关于vue写一个全局弹窗组件通过js调用的方法,需要的朋友可以参考下2024-06-06
表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的有效性，本文主要介绍了element ui From表单校验不生效问题解决，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
在现代Web开发中,Vue.js与Flask或Django配合使用,实现前后端分离,提高开发效率和应用性能,本文介绍了整合Vue.js和Flask/Django的步骤,包括环境搭建、API编写、项目配置,以及生产部署,此架构不仅加快了开发进程,还提高了项目的可维护性和可扩展性2024-09-09
最新评论