vue项目创建并引入饿了么elementUI组件的步骤

前端开发框架和环境都是需要节点。js,先安装node . js开发环境,vue的运行是要依赖于节点的npm的管理工具来实现,下载,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

输入命令:节点- v; 　　

　　

　　

　　

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue。淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

　　

输入命令:npm安装- g cnpm——注册表=https://registry.npm.taobao.org 　　

<强>

　　

淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm安装——全球vue-cli回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功,因为本人翻墙,习惯用npm所以后面的命令依然用npm运行;

　　

输入命令:npm安装——全球vue-cli 　　

　　

　　

输入命令,itemname是你的项目名称

　　

输入命令:vue init webpack itemname 　　

其中vue构建一般选择运行时只,如果需要编译则选择+运行时编译器,但会影响性能,
　　

　　

ESlint是检查代码,一般选择安装,选标准;
　　

　　

选择一个测试运行器选择Jest

　　

　　

如果出现以下截的图,说明已经成功了,输入命令,运行项目

　　

　　

　　

输入命令:npm我element-ui - s
　　这里解释以下- s指生产环境,- d指开发环境 　　

　　

element-ui安装在了这里
　　

　　

　　

　　

　　

在项目的src/组件目录下新建test.vue,具体代码如下:

　　 　　 　　& lt; template> 　　 　　& lt; div> 　　& lt; el-row> 　　& lt; el-col:跨度=" 24 "祝辞& lt; div class=" grid-content bg-purple-dark”祝辞& lt;/div> & lt;/el-col> 　　& lt;/el-row> 　　& lt; el-row> 　　& lt; el-col:跨度=" 12 "祝辞& lt; div class=" grid-content bg-purple”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 12 "祝辞& lt; div class=" grid-content bg-purple-light”祝辞& lt;/div> & lt;/el-col> 　　& lt;/el-row> 　　& lt; el-row> 　　& lt; el-col:跨度=" 8 "祝辞& lt; div class=" grid-content bg-purple”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 8 "祝辞& lt; div class=" grid-content bg-purple-light”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 8 "祝辞& lt; div class=" grid-content bg-purple”祝辞& lt;/div> & lt;/el-col> 　　& lt;/el-row> 　　& lt; el-row> 　　& lt; el-col:跨度=" 6 "祝辞& lt; div class=" grid-content bg-purple”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 6 "祝辞& lt; div class=" grid-content bg-purple-light”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 6 "祝辞& lt; div class=" grid-content bg-purple”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 6 "祝辞& lt; div class=" grid-content bg-purple-light”祝辞& lt;/div> & lt;/el-col> 　　& lt;/el-row> 　　& lt; el-row> 　　& lt; el-col:跨度=" 4 "祝辞& lt; div class=" grid-content bg-purple”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 4 "祝辞& lt; div class=" grid-content bg-purple-light”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 4 "祝辞& lt; div class=" grid-content bg-purple”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 4 "祝辞& lt; div class=" grid-content bg-purple-light”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 4 "祝辞& lt; div class=" grid-content bg-purple”祝辞& lt;/div> & lt;/el-col> 　　& lt; el-col:跨度=" 4 "祝辞& lt; div class=" grid-content bg-purple-light”祝辞& lt;/div> & lt;/el-col> 　　& lt;/el-row> 　　& lt;/div> 　　 　　& lt;/template> 　　 　　& lt; script> 　　出口默认{ 　　名称:“测试”, 　　数据(){ 　　返回{ 　　数据:“这是测试数据”, 　　} 　　} 　　} 　　& lt;/script> 　　 　　& lt;风格lang=" css "比; 　　.el-row { 　　margin-bottom: 20 px; 　　和:胎{ 　　margin-bottom: 0; 　　} 　　} 　　.el-col { 　　border - radius: 4 px; 　　} 　　.bg-purple-dark { 　　背景:# 99 a9bf; 　　} 　　.bg-purple { 　　背景:# d3dce6; 　　} 　　.bg-purple-light { 　　背景:# e5e9f2; 　　} 　　.grid-content { 　　border - radius: 4 px; 　　最小高度:36 px; 　　} 　　.row-bg { 　　填充:10 px 0; 　　background - color: # f9fafc; 　　} 　　& lt;/style>

vue项目创建并引入饿了么elementUI组件的步骤