如何创建一个vue+elementui项目_vue+element-ui项目创建

一、安装

到node.js官网(https://nodejs.org/zh-cn/download/)下载相应的版本进行安装，安装过程可以默认安装，也可以自定义安装。

通过命令" node -v "和 " npm -v " 可查版本号，说明安装成功。再通过命令  " npm install -g @vue/cli "  安装vue/cli。

二、项目创建

 首先新建一个文件夹，在这个文件夹下cmd，通过命令： " vue create vue-huose "  开始创建。

 然后需要设置一些参数，选择Manually select features，再选择如下几项（通过空格键进行选择）

选择 Choose Vue version 回车去选择vue的版本（这里选择版本3）

选择package.json

 选择是否保存本次设置，接下来便在新建的文件夹下载，自动创建名为vue-house的vue项目。

三、项目启动

首先cd到这个项目与package.json同级的路径下，然后   "npm run serve"  启动这个项目

项目启动成功如下：

通过浏览器http://localhost:8080/访问如下界面表示项目启动成功。通过ctr+c然后选择Y，终止该项目。

四、使用IDEA启动项目

为了编辑该项目和使用element-ui，这里我们使用IDEA来对项目进行编写。直接把项目文件夹拖到IDEA当中。

点击add configuration---------加号---------npm---------在scripts里面输入serve-----也可重新命名name-----确定-------然后点击绿色三角按钮，就可以通过IDEA来启动这个vue项目了。

在package.json里scripts当中serve项后面添加 "--open" 实现项目启动成功后，浏览器自动跳转到首页。

五、element-ui引入

使用elementui需要对其进行安装，在idea的黑窗口输入命令 "npm install element-plus –save"进行安装。

 安装完成后，需要在main.js里面进行引入，保存后便可。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'     //需要引入的部分1
import 'element-plus/dist/index.css'       //需要引入的部分2
 
createApp(App).use(store).use(router).use(ElementPlus)//需要引入的部分3
.mount('#app')