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.org4：安装全局vue-cli脚⼿架

淘宝镜像安装成功之后，我们就可以全局vue-cli脚⼿架，输⼊命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输⼊vue，出来vue的信息，及说明安装成功；因为本⼈翻墙，习惯⽤npm所以后⾯的命令依然⽤npm运⾏；

输⼊命令：npm install --global vue-cli5：开始进⼊主题，初始化⼀个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，具体代码如下：

然后在路由中引⼊test.vue,路由位置：src/router/index.js,代码如下：

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。