vue init webpack <project-name>
npm install
npm run dev
位址欄輸入localhost:8080
npm install --save vue element-ui
npm install --save vue-router
npminstall --save axios
npm install sass-loader -Dnpm install node-sass -D
專案目錄
main.js裡面引入vue element 和router:
import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import VueRouter from 'vue-router'Vue.use(ElementUI) Vue.use(VueRouter)
#新登入vue檔案:Ulogin.vue
<template> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container"> <h3 class="title">系统登录</h3> <el-form-item prop="account"> <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input> </el-form-item> <el-form-item prop="checkPass"> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input> </el-form-item> <el-form-item style="width:100%;"> <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" >登录 </el-button> </el-form-item> </el-form></template><script> export default { name: "Ulogin.vue", data() { var checkAccount = (rule, value, callback) => { if (!value) { return callback(new Error('请输入账号')); } else if (value.length < 4 || value.length>12) { return callback(new Error('账号名必须在4~12位')); } else { callback(); } }; var checkPass = (rule, value, callback) => { if (value === '') { return callback(new Error('请输入密码')); } else if (value.length < 2) { return callback(new Error('密码不能小于两位')); } else { return callback(); } }; return { ruleForm2: { account: '', checkPass: '' }, rules2: { account: [ {validator: checkAccount, trigger: 'blur'}, ], checkPass: [ {validator: checkPass, trigger: 'blur'}, ] } }; }, methods: { handleSubmit2(ruleForm2) { this.$refs.ruleForm2.validate((valid) => { if (valid) { alert('提交!') } else { alert('登陆失败!'); console.log('error submit!!'); return false; } }); } } }</script><style lang="scss" scoped> .login-container { /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/ -webkit-border-radius: 5px; border-radius: 5px; -moz-border-radius: 5px; 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; .title { margin: 0px auto 40px auto; text-align: center; color: #505458; } .remember { margin: 0px 0px 35px 0px; } }</style>
router內index.js檔案設定路由:
import Ulogin from '../components/Ulogin'Vue.use(Router) export default new Router({ routes: [ // { // path: '/', // name: 'HelloWorld', // component: HelloWorld // }, { path:'/', name:'', component:Ulogin } ] })
App.vue
<template> <p> <router-view></router-view> </p></template><script> export default { name: 'App' }</script><style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }</style>
目錄結構:
執行:npm run dev
#相關推薦:
以上是vue.js、element-ui、vuex環境建構實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!