本文主要和大家分享vue.js、element-ui、vuex环境搭建实例，本文主要以图文实例和代码分享，希望能帮助到大家。一、初始化项目vue init webpack <project-name>
二、初始化依赖包npm install
三、运行调试npm run dev
地址栏输入localhost:8080
四、导入elementui包npm install --save vue element-ui
五、导入vue-router包npm install --save vue-router
六、导入axios包npminstall --save axios
七、安装sass-loader以及node-sass插件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 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>
目录结构：
运行：npm run dev
相关推荐：
vue、node、webpack环境搭建教程详解
实例详解vue环境搭建简单教程
2017年最好用的6个php环境搭建工具推荐
以上就是vue.js、element-ui、vuex环境搭建实例分享的详细内容。