搭建自己的系统(前端)
1、第一个vue组件
2、webstorm基础使用
3、安装依赖,开发环境运行和访问
4、创建页面,分配路由
5、vue基础操作
基础环境准备
1、安装node.JS
2、安装vue
使用管理员cmd安装
npm install -g vue-cli
查看vue版本
vue --version
3、初始化项目
vue init webpack webapp
4、使用webstorm打开webapp项目
登录视图页面
1、安装element-ui
npm i element-ui -S
2、查看项目是否安装element
打开package.json,可以看到elment-ui版本
3、引入element
打开main.js根据官网提示复制一下内容,引入加正式安装三行
4、开始app项目制作登录页面
保留router-view进行渲染
5、views目录创建login.vue
内容为login
6、修改路由文件,index.js
7、查看项目页面
执行 npm run dev
查看页面
项目表单创建
1、页面设计
<template>
<div>
<el-form ref="form" :model="loginForm">
<h3>系统登陆</h3>
<el-form-item>
<el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">
</el-input>
</el-form-item>
<el-form-item>
<el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码">
</el-input>
</el-form-item>
<el-form-item>
<el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码">
</el-input>
<img src="">
<el-checkbox v-model="checked">记住我</el-checkbox>
<el-button type="primary">登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "login",
data(){
return{
loginForm:{
username:'admin',
password:'123',
code:''
}
}
}
}
</script>
<style scoped>
</style>
2、页面调整样式
<template>
<div>
<el-form ref="form" :model="loginForm" class="loginContainer">
<h3 class="loginTitle">系统登陆</h3>
<el-form-item>
<el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">
</el-input>
</el-form-item>
<el-form-item>
<el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码">
</el-input>
</el-form-item>
<el-form-item>
<el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" class="loginCode">
</el-input>
<img :src=captchaUrl>
<el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
<el-button type="primary" style="width: 100%">登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "login",
data(){
return{
captchaUrl:'',
loginForm:{
username:'admin',
password:'123',
code:''
},
checked:true
}
}
}
</script>
<style>
.loginContainer{
border-radius: 15px;
backgroud-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 15px 35px 15px 35px;
background: #fff;
border: 1px solid #eaaaaa;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
margin: 0px auto 40px auto;
text-align:center;
}
.loginCode{
width: 250px;
margin-right: 80px;
}
.loginRemember{
text-align: left;
margin: 0px 0px 15px 0px;
}
</style>