vue.js、element-ui、vuex环境搭建实例分享

vue init webpack <project-name>

npm install

npm run dev

npm install --save vue element-ui

npm install --save vue-router

npminstall --save axios

npm install sass-loader -Dnpm install node-sass -D

import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import VueRouter from 'vue-router'Vue.use(ElementUI)
Vue.use(VueRouter)

<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>

import Ulogin from '../components/Ulogin'Vue.use(Router)

export default new Router({
 routes: [ // {
 // path: '/',
 // name: 'HelloWorld',
 // component: HelloWorld
 // },
 {
 path:'/',
 name:'',
 component:Ulogin
 }
 ]
})

<template>
 <p id="app">
 <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>