使用vue + element UI制作后台管理系统配置搭建

1.vue的全局引入

npm install -g @vue/cli

需要安装node,官方网站,否则提示npm不可用

2.创建项目

vue create Name //Name为你想创建的文件名

3.项目配置选择

使用vue + element UI制作后台管理系统配置搭建_第1张图片
第一个是之前的项目选择了保存所以出现的选项,第一次是不会出现的,第二个是安装vue2,第三个是安装vue3,最后一个为手动安装,这里我们选择手动安装

使用vue + element UI制作后台管理系统配置搭建_第2张图片选择如上配置回车

使用vue + element UI制作后台管理系统配置搭建_第3张图片
选择2.x版本

在这里插入图片描述
询问路由器模式直接no就好

使用vue + element UI制作后台管理系统配置搭建_第4张图片
储存当前的配置信息,询问你储存在哪里,直接回车
使用vue + element UI制作后台管理系统配置搭建_第5张图片
是否保存刚才设置的所有信息,保存以后下次可以直接选,就像之前的选项1,一样

使用vue + element UI制作后台管理系统配置搭建_第6张图片

cd进入项目

4.引入elementui

1.安装elementui

npm i element-ui -S

可以直接查看官网文档elementui官网
安装完成后可以在package.Json中看到版本
使用vue + element UI制作后台管理系统配置搭建_第7张图片

2.启动程序

使用vue + element UI制作后台管理系统配置搭建_第8张图片
进入项目的目录

npm run serve

使用vue + element UI制作后台管理系统配置搭建_第9张图片
这样就算成功了,然后在浏览器打开服务器地址
使用vue + element UI制作后台管理系统配置搭建_第10张图片

3.配置

使用vue + element UI制作后台管理系统配置搭建_第11张图片
在main.js中导入,并且使用,Vue.use(),这样完整的环境就搭建好了

4.模板展示

elementUI的组件也是非常多,挑挑选选也自己做出了一些界面
使用vue + element UI制作后台管理系统配置搭建_第12张图片
使用vue + element UI制作后台管理系统配置搭建_第13张图片

你可能感兴趣的:(vue.js,node.js,javascript)