创建项目，登录校验
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：
vue --version
运行以下命令来创建一个新项目：
vue create hello-world
一，项目中可以只留main.js和单文件组件app.vue
import Vue from 'vue'
import App from './App.vue'
// 关闭生产环境提示
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
二，配置components和main.js同级，里配置index.vue,login.vue
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Index from './components/index.vue'
import Login from './components/login.vue'
// 关闭生产环境提示
Vue.config.productionTip = false
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/index' },
{ path: '/index', component: Index },
{ path: '/login', component: Login }
]
})
new Vue({
render: h => h(App),
router: router
}).$mount('#app')
三，和main.js同级，新建一个router文件夹，建一个index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/home.vue'
import Login from '../components/login.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]
})
// 创建一个路由对象
export default router
三，一：main.js中：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 关闭生产环境提示
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
四，表单校验，重置
<template>
<div class="login">
<!-- :rules 给form加校验规则，status-icon给输入杠中加入图标，prop接收表单校验的规则,通过ref获取form表单 -->
<el-form :model="form" :rules="rules" class="demo-form" status-icon ref="form">
<el-form-item label="用户名" prop="username" label-width="100px">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" label-width="100px">
<el-input v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="reset">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
// required必填，trigger触发方式
{ required: true, message: '请输入活用户名', trigger: 'blur' },
{ min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入活用户名', trigger: 'blur' },
{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
]
}
}
},
methods: {
reset () {
// 通过$refs.form获取表单信息，调用resetFields()重置
this.$refs.form.resetFields()
},
login () {
console.log('submit!')
}
}
}
</script>
<style lang="less">
.el-input {
width: 30%;
}
</style>
