创建vue项目：vue ui界面创建项目后，安装Element Ui插件、axios 依赖，如何启动vue项目，npm run serve，启动vue项目方式（保姆级教程三）_vue ui怎么启动项目

今天讲解 vue ui 图形化界面搭建项目后，添加 Element UI 插件以及 axios 依赖有什么问题请留言，请点赞收藏！！！

提示： 本教程是创建 vue 项目后添加依赖组件。还没有创建项目的，请看本专栏之前的文章：vue-cli创建vue项目
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1、创建项目后添加插件

上面创建项目后，是一个空的，这里需要添加一些插件（比如：ElementUI 等，也就是利用 vue ui 界面来添加一些插件和依赖）

注意： 使用 vue ui 界面安装下面的插件和依赖时，可能会卡顿（一直卡顿）：

cmd 窗口也卡着不动，显示：reify:fsevents: sill reify mark deleted ['E:\\Desktop\\....]'

解决： 首先确认不是网络的原因。然后尝试切换 npm 镜像源。假如是淘宝镜像，就切换成官方镜像，反之；然后重新进入 vue ui 再次进行。

1.1 安装Element UI插件

选择 插件 菜单，选择右上角的 添加插件 按钮，搜索 Element-UI 组件库（vue-cli-plugin-element）：

1.2 安装axios依赖

左侧菜单选择 依赖，选择右上角的 安装依赖，然后在弹出的对话框中搜索 ”axios”，模式为 “运行依赖”，安装即可

2、启动vue项目

① 首先创建 vue 项目后，再通过 idea 去打开这个文件夹就行。在 idea 中的 Terminal 命令行启动 vue 项目：npm run serve

重点： 项目打包命令：cnpm run build

② 也可以在cmd终端中运行vue项目。

E:\xm> cd firstApp    //进入项目目录
E:\xm\firstApp> cnpm install
E:\xm\firstApp> npm run serve   //启动项目
1
2
3

注意：拿到别人的项目或从 github 上下载的项目，第一步就是要在项目中 cnpm install，下载项目所依赖的插件，然后 npm run dev（这个命令报错的话就输入：npm run serve 命令）运行项目。

报错： 运行 npm run serve 报错

WARNING  Compiled with 1 warning
warning  in ./src/plugins/element.js
export 'default' (imported as 'Vue') was not found in 'vue'...... 
1
2
3

解决： 里面也说得很清楚，/src/plugins/element.js，其实就是 element-ui 出现了问题。在之前版本 vue2 里面 element.js是这样写的：

import Vue from 'vue';
import {Button} from 'element-ui'
 
Vue.use(Button)
1
2
3
4

main.js 中是这样写的：import Vue from 'vue'，因此可以匹配。但是在 vue 更新之后，main.js 文件里面是 import {createApp} from 'vue'。所以则需要把 element.js 里面的代码修改一下：（也就是说 vue2 没问题，vue3 就需要修改下）

//修改为:

import {createApp} from 'vue'
import { Button } from 'element-ui'

createApp().use(Button)
1
2
3
4
5
6

再用 npm run serve 运行 就可以运行成功了。

提示： 对于 Element UI 官网上面的 element 组件列表的快速引入方式，也需要修改，因为它里面是用的也是 import Vue from 'vue';

至此：本系列教程完毕，后续讲解更多的 Vue 知识！！！