1.环境搭建-之前的环境搭建是vue-cli2 现在要安装官网最新版 4.x
官网地址https://cli.vuejs.org/zh/guide/installation.html
安装前先卸载之前的版本
按照光网进行安装
关于旧版本
Vue CLI 的包名称由 vue-cli
改成了 @vue/cli
。 如果你已经全局安装了旧版本的 vue-cli
(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g
或 yarn global remove vue-cli
卸载它。
安装vue-cli4.x 命令
因为作者的是3.11.0所有控制版本
npm uninstall vue-cli -g 卸载版本(vue-cli<3)
npm uninstall @vue/cli -g 卸载版本(vue-cli>=3)
npm install -g @vue/cli@3.11.0 安装3.11.0版本,也可以安装最新版,我自己安装3.11.0版本
vue --version 安装完成后查看版本
vue create xxxx 创建一个项目
自定义配置
npm install -g @vue/cli
用vue --version 检测是否安装成功
C:\Users\hp>vue --version
@vue/cli 4.5.11
进入创建项目的文件根目录进行创建项目
vue create vuehr
回车之后会弹出--选择编译工具 选择手动进行编译
选择这几个 空格键选择取消
2.x
> 3.x (Preview)
In dedicated config files
> In package.json
不保存当前模板
开始创建项目
项目环境依赖已经全部自动下载好了。直接进行运行运行项目
cd vuehr
$ npm run serve
启动项目进行访问,访问成功页面创建成功
项目创建成功-唯一区别是项目的目录结构更加简洁,其余无差别,相互切换特别容易
------------
开始写前端项目,
前端项目使用https://element.eleme.cn/#/zh-CN/component/quickstart
---安装element环境 进入到项目中
npm i element-ui -S
----在main.js中引入引入环境依赖
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
引入之后
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
写项目代码
删除无用代码和页面
1.制作登录页面
登录页面---Login
创建Login登录页面Login.vue
<template>
<div>
Login
</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>
router中引入资源
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
}
]
const router = new VueRouter({
routes
})
export default router
运行显示是否成功
登陆页代码
<template>
<div>
<!--校验规则-->
<!--class="loginContainer"定义登陆样式-->
<el-form :rules="rules" :model="loginForm" class="loginContainer">
<h3 class="loginTitle">系统登录</h3>
<!--校验属性值username校验用户是否输入-->
<el-form-item prop="username">
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<!--是否记录密码-->
<el-checkbox class="loginRemember" v-model="checked"></el-checkbox>
<!--登陆按钮-->
<el-button type="primary" style="width: 100%">登陆</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
loginForm: {
username: 'admin',
password: '123456'
},
checked: true,
rules: {
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}]
}
}
}
}
</script>
<style scoped>
.loginContainer{
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
/*阴影效果*/
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
margin: 15px auto 20px auto;
text-align: center;
color: aqua;
}
.loginRemember{
text-align: left;
margin: -2px 0px 15px 0px;
}
</style>
完整代 首页进行登录验证
<template>
<div>
<!--校验规则-->
<!--class="loginContainer"定义登陆样式-->
<!--ref="loginFrom"表单的名字-->
<el-form :rules="rules" ref="loginFrom" :model="loginForm" class="loginContainer">
<h3 class="loginTitle">系统登录</h3>
<!--校验属性值username校验用户是否输入-->
<el-form-item prop="username">
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<!--是否记录密码-->
<el-checkbox class="loginRemember" v-model="checked"></el-checkbox>
<!--登陆按钮-->
<!--登陆点击事件-->
<el-button type="primary" style="width: 100%" @click="submitLogin">登陆</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
loginForm: {
username: 'admin',
password: '123456'
},
checked: true,
rules: {
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}]
}
}
},
/*登陆点击事件的处理*/
methods: {
submitLogin(){
/*表单校验 验证是否输入*/
this.$refs.loginFrom.validate((valid) => {
if (valid) {
alert('submit!');
} else {
this.$message.error('请输入用户名和密码!!');
return false;
}
});
}
}
}
</script>
<style scoped>
.loginContainer{
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
/*阴影效果*/
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
margin: 15px auto 20px auto;
text-align: center;
color: aqua;
}
.loginRemember{
text-align: left;
margin: -2px 0px 15px 0px;
}
</style>
前端登陆-模块完成 进行写后端接口