前导知识：此案例结合 ElementUI 组件库

一：创建工程

到要存放项目的位置下打开CMD
输入指令：vue init webpack hello-vue

填写相关信息并一路No即可第一步结束

二：安装依赖

我们这个demo需安装 vue-router、element-ui、sass-loader 和 nod-sass 这四个插件
步骤如下

进入工程目录 ———————> cd hello-vue
安装 vue-router ——————> npm install vue-router --save-dev
安装 element-ui ——————> npm i element-ui -S
安装依赖 —————————> npm install
安装SASS 加载器 —————> cnpm install sass-loader node-sass --save-dev
启动测试 —————————> npm run dev

可以成功访问了之后我们就可以开始下一步了

三：在IDEA中open此项目并修改其中文件

删掉一些自带的图片和vue文件并修改图中右侧两个文件

四：在src下新添文件夹及文件

assets：用于存放资源文件
components：用于存放Vue 功能组件
views：用于存放Vue视图组件
router：用于存放vue-router配置

在视图组件view中新建两个组件( 首页和登录页面 )

Login.vue代码如下

<template>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form></template>
<script>export default {data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {callback();}}}, 1000);};var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.pass) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm: {pass: '',checkPass: '',age: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$router.push("/Main");} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

五：在路由文件夹中新建index.js

import Vue from 'vue'
import Router from 'vue-router'import main from '../views/Main'
import login from '../views/Login'//显式的使用
Vue.use(Router);export default new Router({routes:[{//请求路由路径path:'/Main',//跳转的组件component:main},{//请求路由路径path:'/Login',//跳转的组件component: login}]
});

六：修改main.js 文件和App.vue文件

main.js代码

import Vue from 'vue'
import App from './App'import router from './routers' //扫描路由
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//显式安装路由
Vue.use(router);
Vue.use(ElementUI);new Vue({el: '#app',//配置路由router,render:h => h(App) //ElementUI
})

App.vue代码

<template><div id="app"><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script>

七：流程再走一遍~

访问网站一开始是空白的

我们尝试访问Login

填写信息并点击提交

成功跳转到Main页

这是因为在Login.vue中写了路由转换的语句

好的分析一下思路：

访问网站先访问App.vue
因为App.vue中有路由进而去main.js找路由配置所以找到路由的index.js
此时还没访问Main页或者Login页
当访问这俩个页面时会去index.js中找他们对应的路由请求路径
之后跳转到他们对应的组件中，将组件中的template模板渲染展示

The road to the Vue（七、实战篇)相关推荐

Vue 人资实战篇七员工管理上封装通用的组件、formatter属性、过滤器的使用、树形结构、建立公共导入的页面路由、excel的导入和导出、
1.0 封装一个通用的工具栏目标:封装一个通用的工具栏供大家使用 1.1 通用工具栏的组件结构在后续的业务开发中,经常会用到一个类似下图的工具栏,作为公共组件,进行一下封装组件 src/comp ...
Vue 人资实战篇八权限设计重点！！！路由访问权限，左侧导航栏显示等等，还有 mixin 混入方法
1.0 权限设计-RBAC的权限设计思想传统的权限设计是对每个人进行单独的权限设置,但这种方式已经不适合目前企业的高效管控权限的发展需求,因为每个人都要单独去设置权限基于此,RBAC的权限模型就应 ...
Vue 人资实战篇九其他模块集成和主页审批-图表-日历、echarts、枚举的一个方法
1.0 全模块集成目标: 将其他业务模块代码集成到该项目中到目前为止,我们已经完成了一个基本项目框架 + 组织架构 + 公司 + 员工 + 权限的业务联调, 时间关系,我们不可能将所有的业务都去 ...
Vue实战篇三十三：实现新闻的浏览历史
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇三十一：实现一个改进版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇三十：实现一个简易版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue.js实战之系统学习第七节
想看上一节的请点击: Vue.js实战之系统学习第六节接下来我们要学习第七节了,时间过的好快. 组件详解组件是Vue.js的核心功能,也是整个框架设计最精彩的地方,当然也是最难掌握的.本章节将带你 ...
Vue实战篇二十八：实现一个手机版的购物车
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十七：实现走马灯效果的商品轮播图
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十九：模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...

The road to the Vue（七、实战篇)

一：创建工程

二：安装依赖

三：在IDEA中open此项目并修改其中文件

四：在src下新添文件夹及文件

在视图组件view中新建两个组件( 首页和登录页面 )

Login.vue代码如下

五：在路由文件夹中新建index.js

六：修改main.js 文件和App.vue文件

main.js代码

App.vue代码

七：流程再走一遍~

好的分析一下思路：

The road to the Vue（七、实战篇)相关推荐

最新文章

热门文章

The road to the Vue（七、实战篇)

一：创建工程

二：安装依赖

三：在IDEA中open此项目 并修改其中文件

四：在src下新添 文件夹 及文件

在视图组件view中新建 两个组件( 首页 和 登录页面 )

Login.vue代码如下

五：在路由文件夹中新建index.js

六：修改main.js 文件和App.vue文件

main.js代码

App.vue代码

七：流程再走一遍~

好的 分析一下思路：

The road to the Vue（七、实战篇)相关推荐

最新文章

热门文章

三：在IDEA中open此项目并修改其中文件

四：在src下新添文件夹及文件

在视图组件view中新建两个组件( 首页和登录页面 )

好的分析一下思路：