从零构建 vue2 + vue-router + vuex 开发环境到入门,实现基本的登录退出功能
2017-06-29 11:38
911 查看
github:https://github.com/lzxb/vue2-demo
原文地址:https://gold.xitu.io/post/5842554761ff4b006b90c399
源码说明
项目目录说明
. |-- config // 项目开发环境配置 | |-- index.js // 项目打包部署配置 |-- src // 源码目录 | |-- components // 公共组件 | |-- header.vue // 页面头部公共组件 | |-- index.js // 加载各种公共组件 | |-- config // 路由配置和程序的基本信息配置 | |-- routes.js // 配置页面路由 | |-- css // 各种 css 文件 | |-- common.css // 全局通用 css 文件 | |-- iconfont // 各种字体图标 | |-- images // 公共图片 | |-- less // 各种 less 文件 | |-- common.less // 全局通用 less 文件 | |-- pages // 页面组件 | |-- home // 个人中心 | |-- index // 网站首页 | |-- login // 登录 | |-- signout // 退出 | |-- store // vuex 的状态管理 | |-- index.js // 加载各种 store 模块 | |-- user.js // 用户 store | |-- template // 各种 html 文件 | |-- index.html // 程序入口 html 文件 | |-- util // 公共的 js 方法, vue 的 mixin 混合 | |-- app.vue // 页面入口文件 | |-- main.js // 程序入口文件,加载各种公共组件 |-- .babelrc // ES6 语法编译配置 |-- gulpfile.js // 启动,打包,部署,自动化构建 |-- webpack.config.js // 程序打包配置 |-- server.js // 代理服务器配置 |-- README.md // 项目说明 |-- package.json // 配置项目相关信息,通过执行 npm init 命令创建 .
1.html 入口文件,源文件路径: src/template/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"> <title>vue2-demo</title> </head> <body> <div id="app"> <router-view></router-view> 4000 ; </div> </body> </html>
2.js 入口文件,源文件路径: src/main.js
import Vue from 'vue' import VueRouter from 'vue-router' import routes from './config/routes' import store from './store/' import components from './components/' //加载公共组件 import './css/common.css' import './less/common.less' Object.keys(components).forEach((key) => { var name = key.replace(/(\w)/, (v) => v.toUpperCase()) //首字母大写 Vue.component(`v${name}`, components[key]) }) Vue.use(VueRouter) const router = new VueRouter({ routes }) router.beforeEach(({meta, path}, from, next) => { var { auth = true } = meta var isLogin = Boolean(store.state.user.id) //true 用户已登录, false 用户未登录 if (auth && !isLogin && path !== '/login') { return next({ path: '/login' }) } next() }) new Vue({ store, router }).$mount('#app')
3.页面路由,权限配置,源文件路径: src/config/routes.js
import App from '../app' export default [ { path: '/', component: App, children: [ { path: '/login', //登录 meta: { auth: false }, component: resolve => require(['../pages/login/'], resolve) }, { path: '/signout', //退出 component: resolve => require(['../pages/signout/'], resolve) }, { path: '/home', //个人主页 component: resolve => require(['../pages/home/'], resolve) }, { path: '/', //首页 meta: { auth: false }, component: resolve => require(['../pages/index/'], resolve) }, { path: '*', //其他页面,强制跳转到登录页面 redirect: '/login' } ] } ]
4.页面入口组件,源文件路径: src/app.vue
<style lang="less" scoped> </style> <template> <router-view></router-view> </template> <script> export default { } </script>
5.store 实例化,导入各种 modules ,源文件路径: src/store/index.js
import Vue from 'vue' import Vuex from 'vuex' import user from './user' Vue.use(Vuex) export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', //在非生产环境下,使用严格模式 modules: { user } })
6.定义 store user 模块,源文件路径: src/store/user.js
import Vue from 'vue' export const USER_SIGNIN = 'USER_SIGNIN' //登录成功 export const USER_SIGNOUT = 'USER_SIGNOUT' //退出登录 export default { state: JSON.parse(sessionStorage.getItem('user')) || {}, mutations: { [USER_SIGNIN](state, user) { sessionStorage.setItem('user', JSON.stringify(user)) Object.assign(state, user) }, [USER_SIGNOUT](state) { sessionStorage.removeItem('user') Object.keys(state).forEach(k => Vue.delete(state, k)) } }, actions: { [USER_SIGNIN]({commit}, user) { commit(USER_SIGNIN, user) }, [USER_SIGNOUT]({commit}) { commit(USER_SIGNOUT) } } }
7.加载各种公共组件,源文件路径: src/components/index.js
import header from './header' export default { header }
8.封装页面公共头部组件,源文件路径: src/components/header.js
<style lang="less" scoped> .header { position: relative; line-height: 38px; color: #fff; text-align: center; background: #222; .item { position: absolute; top: 0; bottom: 0; z-index: 1; a { color: #fff; } } .left { left: 10px; } .right { right: 10px; } } </style> <template> <header class="header"> <div class="item left"> <slot name="left"></slot> </div> <div class="title">{{title}}</div> <div class="item right"> <slot name="right"></slot> </div> </header> </template> <script> export default { props: { title: { type: String, default: '' } } } </script>
9.引入全局公共 css ,源文件路径: src/css/common.css
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }
10.引入全局公共 less ,源文件路径: src/less/common.less
* { padding: 0; margin: 0; }
11.创建首页,,源文件路径: src/pages/index.vue
<style lang="less" scoped> .login-msg { padding: 50px; text-align: center; } .msg { padding: 50px; text-align: center; font-size: 20px; color: red; } </style> <template> <div> <v-header title="首页"> <router-link slot="right" v-if="user.id" to="/home">{{user.name}}</router-link> </v-header> <div class="login-msg" v-if="!user.id"> <router-link to="/login">你还未登录,请先登录</router-link> </div> <div class="msg" v-if="user.id"> <img width="50" :src="logo" alt=""> <br> 哈哈,恭喜你已经入坑 Vue2 </div> </div> </template> <script> import { mapState } from 'vuex' import logo from './logo.png' export default { data() { return { logo } }, computed: mapState({ user: state => state.user }), } </script>
12.创建登录页,,源文件路径: src/pages/login.vue
<style lang="less" scoped> .login { padding: 50px; text-align: center; .line { padding: 5px; input { padding: 0 10px; line-height: 28px; } } button { padding: 0 20px; margin-top: 20px; line-height: 28px; } } </style> <template> <div> <v-header title="登录"> <router-link slot="left" to="/">返回</router-link> </v-header> <form class="login" v-on:submit.prevent="submit"> <div class="line"> <div v-show="btn && !form.id">id 不能为空</div> <input type="number" placeholder="输入你的 id" v-model="form.id"> </div> <div class="line"> <div v-show="btn && !form.name">用户名不能为空</div> <input type="text" placeholder="输入你的用户名" v-model="form.name"> </div> <button>登录</button> </form> </div> </template> <script> import { mapActions } from 'vuex' import { USER_SIGNIN } from 'store/user' export default { data() { return { btn: false, //true 已经提交过, false 没有提交过 form: { id: '', name: '' } } }, methods: { ...mapActions([USER_SIGNIN]), submit() { this.btn = true if(!this.form.id || !this.form.name) return this.USER_SIGNIN(this.form) this.$router.replace({ path: '/home' }) } } } </script>
13.创建个人主页,,源文件路径: src/pages/home.vue
<style lang="less" scoped> </style> <template> <div> <v-header title="首页"> <router-link slot="left" to="/">首页</router-link> <router-link slot="right" to="/signout">退出</router-link> </v-header> <div style="padding: 50px;">{{user.name}}欢迎回家</div> </div> </template> <script> import { mapState } from 'vuex' export default { computed: mapState({ user: state => state.user }), } </script>
14.创建退出页,,源文件路径: src/pages/signout.vue
<style lang="less" scoped> .btn { padding: 50px; text-align: center; button { padding: 5px 10px; } } </style> <template> <div> <v-header title="退出"> <router-link slot="left" to="/home">返回</router-link> </v-header> <div class="btn"> <button v-on:click="submit">确认退出</button> </div> </div> </template> <script> import { mapActions } from 'vuex' import { USER_SIGNOUT } from 'store/user' export default { methods: { ...mapActions([USER_SIGNOUT]), submit() { this.USER_SIGNOUT() this.$router.replace({ path: '/login' }) } } } </script>
进击 vue2
vue2 重构 cnode 社区,将会近日完成, 一个从 0 构建的 vue2 的完整项目, 可以使用最简单的方式实现页面后台时状态还原, 局部滚动条还原等。
原文地址:https://gold.xitu.io/post/5842554761ff4b006b90c399
相关文章推荐
- vue-router实现SPA购物APP基本功能
- 基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声
- Vue+Vue Router+Axios+Webpack+Flask+MySQL实现简单的注册、登录验证功能
- ajax开发:jqueryajax+php的登录与退出功能实现
- SSH入门开发(实现一个简单的登录功能)详解
- 基于vue2 + vue-router + vuex 构建的一个新闻类大型单页面应用 —— 今日头条
- ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现
- Reader开发(一)电子书分页,翻页效果,字体大小调整和基本功能实现
- java入门--构建Java开发环境
- 【百度地图开发之四】百度地图基本操作功能实现讲解
- 基于Asterisk的VoIP开发指南——(1)实现基本呼叫功能
- SharpStreaming项目开发纪实:构建基本的服务器及客户端应用(六)——服务器通信部分初步实现
- Android开发实现新浪账号授权登录的功能
- 基于Asterisk的VoIP开发指南——(1)实现基本呼叫功能
- 基于Asterisk的VoIP开发指南——(1)实现基本呼叫功能
- 嵌入式实时操作系统VxWorks入门――开发环境构建[转]
- IOS开发简单登录LoginViewController、注册RegisterViewController、UcenterViewController功能实现方法
- SharpStreaming项目开发纪实:构建基本的服务器及客户端应用(七)——服务器界面实现
- Extjs4开发笔记(四)&#8212;&#8212;实现登录功能
- 基于模型设计的FPGA开发与实现:基本流程(一)之入门小例子(二):秒表