如何创建一个vue+elementui项目
从零搭建一个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')
更多推荐
所有评论(0)