vue+element-ui

一.使用图形化界面,创建vue项目

vue ui(在根目录下,打开cmd,启动图形化界面)

vue+element-ui_第1张图片

 添加插件

vue+element-ui_第2张图片

 添加element-ui插件

vue+element-ui_第3张图片

 这里选择import on demandvue+element-ui_第4张图片

 安装好了

vue+element-ui_第5张图片

 添加依赖vue+element-ui_第6张图片

 添加axios依赖vue+element-ui_第7张图片

 添加好了vue+element-ui_第8张图片

二.创建Git仓库,连接并上传刚刚创建的项目

vue+element-ui_第9张图片

 在项目文件目录下打开git的命令窗口,git bash herevue+element-ui_第10张图片

 查看状态git status,发现有很多文件没有加入暂存区,vue+element-ui_第11张图片

 然后将这些文件加入暂存区,git add .vue+element-ui_第12张图片

 与远程仓库建立连接,然后将项目推送到仓库vue+element-ui_第13张图片

 这样,创建的项目就与远程仓库建立连接并推送成功了vue+element-ui_第14张图片

 三.用idea打开刚刚的项目

vue+element-ui_第15张图片

在终端用命令创建一个login分支vue+element-ui_第16张图片

创建分支之后,去启动项目

vue+element-ui_第17张图片

 项目启动成功

vue+element-ui_第18张图片

如果很多文件颜色都是灰色的,那需要按照提示,安装所提示的东西

vue+element-ui_第19张图片

修改 

vue+element-ui_第20张图片vue+element-ui_第21张图片

 那么首页那些花花绿绿的就没有了,这个文件已修改,页面就会有效果

vue+element-ui_第22张图片

 然后去修改路由

一开始这样:

vue+element-ui_第23张图片

 修改后:

vue+element-ui_第24张图片

 删掉组件下面自带的文件,新建一个Login.vue文件,我们登录页面的内容就写在这个文件里面        

vue+element-ui_第25张图片

login.vue文件建好之后,我们要在index.js文件当中,配置好login.vue的路        由

vue+element-ui_第26张图片

vue+element-ui_第27张图片

不要忘了App.vue里面还有个路由显示出口,出口你都不写,页面怎么显示效果

 vue+element-ui_第28张图片

然后我们现在就开始在Login.vue这个文件里面写我们需要的内容

首先我们去设置全局的css样式

vue+element-ui_第29张图片

 然后将他引入到main.js这个文件中

这个文件就是你后续需要用到什么依赖啊啥的,就要引入到这个文件中

vue+element-ui_第30张图片

less有什么用

vue+element-ui_第31张图片

  less报错,是因为缺少依赖,那么要去安装两个依赖

vue+element-ui_第32张图片

 vue+element-ui_第33张图片

 vue+element-ui_第34张图片

 vue+element-ui_第35张图片

 然后页面就显示了

vue+element-ui_第36张图片

 在assets这个包下面建一个css目录,再建一个

最终登录的界面效果






另一个样式

vue+element-ui_第37张图片

加上表单验证并实现重置

vue+element-ui_第38张图片

vue+element-ui_第39张图片






再用一下阿里巴巴的图标库

 https://www.iconfont.cn/
小俊会编码:..123123

vue+element-ui_第40张图片

下载好之后,将压缩包解压,将文件夹加入到项目assets目录下

vue+element-ui_第41张图片

 在表单输入框当中使用

vue+element-ui_第42张图片

 

你可能感兴趣的:(框架,vue.js,前端,javascript)