如何创建一个vue+elementui项目

一、安装

到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')

猜你喜欢

转载自blog.csdn.net/zhanglinsen123/article/details/122704556