vue组件化做注册登陆页面简单记录
最近工作慌了，开始做毕设了，打算用vue做个SPA，学的不深，也算琢磨着跑了点，先理理思路，再前行，把刚刚做了的简单注册登陆页面记录下，也打下个底面，一步步来，望大神指教。
记录时间：2015-12-30 周三 03:01 单独示例源码：https://github.com/dingyiming/demo-Vue-sign
主要内容
- vue
- vue-router
- bootstrap
目录结构
+ assets
+ dist //打包后文件目录
+ src //开发源码
+ assets //资源文件
- bootsrtap.min.css
- logo.png
+ views //大视图组件
- Sign.vue //登陆注册主组件
+ components //子组件文件夹
+ sign //登陆组件的子组件
- _signup.vue //注册组件
- _signin.vue //登陆组件
- main.js //js加载入口文件
- filters.js //过滤器
- routers.js //分离出来的组件路由文件
- package.json //npm依赖管理文件
- webpack.config.js //webpack打包配置文件
- index.html //页面显示入口文件
初始化项目
- 奉上package.json内容
{
"name": "demo_vue-loader-example",
"version": "0.0.1",
"description": "demo",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --quiet",
"build": "export NODE_ENV=production && webpack --progress --hide-modules"
},
"author": "dingyiming",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.1.18",
"babel-preset-stage-0": "^6.1.18",
"babel-runtime": "^6.2.0",
"css-loader": "^0.23.0",
"fastclick": "^1.0.6",
"file-loader": "^0.8.5",
"jade": "^1.11.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"stylus-loader": "^1.4.2",
"template-html-loader": "0.0.3",
"vue-hot-reload-api": "^1.2.1",
"vue-html-loader": "^1.0.0",
"vue-loader": "^7.1.4",
"vue-validator": "^1.4.4",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"bootstrap": "^3.3.6",
"vue": "^1.0.10",
"vue-resource": "^0.5.1",
"vue-router": "^0.7.7",
"vue-strap": "^1.0.3"
}
}
npm install加载依赖
- webpack配置文件
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
// edit this for additional asset file types
test: /\.(png|jpg|gif)$/,
loader: 'file?name=[name].[ext]?[hash]'
},
{
test: /\.js$/,
// excluding some local linked packages.
// for normal use cases only node_modules is needed.
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel'
}
]
},
// example: if you wish to apply custom babel options
// instead of using vue-loader's default:
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
}
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]
} else {
module.exports.devtool = '#source-map'
}
入口视图文件 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码段 | 即时问答社区</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="icon" href="dist/logo.png" type="image/x-icon">
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>
入口js文件 main.js
'use strict'
import Vue from 'vue'
import Vue_Router from 'vue-router'
import Vue_Resource from 'vue-resource'
import Vue_validator from 'vue-validator'
import FastClick from 'fastclick'
import routerMap from './routers'
import filters from './filters'
import App from './views/App.vue'
Vue.use(Vue_Router)
Vue.use(Vue_Resource)
Vue.use(Vue_validator)
let router = new Vue_Router({
hashbang:true,
history:false,
saveScrollPosition: false,
transitionOnLoad: true
})
//全局的前置钩子函数，在路由切换开始时调用
router.beforeEach(function(){
window.scrollTo(0,0)
})
//独立出来的路由
routerMap(router)
router.start(App,'#app')
路由设置 routers.js
'use strict'
export default function(router){
router.map({
'/':{
component: require('./views/Index.vue')
},
/* 404路由 */
'*': {
component: require('./views/Index.vue')
},
'/sign':{
component: require('./views/Sign.vue'),
subRoutes: {
'/':{
component: require('./components/sign/_signin.vue')
},
'signup':{
component: require('./components/sign/_signup.vue')
}
},
},
'/group':{
component: require('./views/Group.vue')
},
'/qa':{
component: require('./views/QA.vue')
}
})
}
基础模板 app.vue
<template lang='jade'>
topnav
leftnav
div.main
router-view(
class="view"
keep-alive
transition
transition-mode="out-in")
</template>
<script>
export default {
components:{
"topnav":require('../components/_topnav.vue'),
"leftnav":require('../components/_header.vue'),
"bottom":require('../components/_footer.vue')
}
}
</script>
<style lang="stylus">
@import '../assets/bootstrap.min.css'
*
margin 0
padding 0
.main
margin-left 150px
padding 5px
</style>
注册登陆主组件 Sign.vue
引入了bootstrap 涉及到css的地方如有出入，请自行调整
<template lang="jade">
div.content
div.form.col-md-6.col-md-offset-3.text-center
div.title
h1 代码段
h2 daimaduan.cn | 即时问答社区
h4.change
span
a(v-link="{ path: '/sign', exact: true }") 登录
b ·
a(v-link="{ path: '/sign/signup', exact: true }") 注册
router-view(
class="view"
keep-alive
transition
transition-mode="out-in")
</template>
<script>
</script>
<style lang="stylus">
color-e66 = #e66
.content
.form
margin-top 10%
h1
font-size 48px
color color-e66
h2
font-size 20px
color color-e66
.change
font-size 20px
border-bottom 1px solid #eee
color #b1b1b1
margin-top 50px
span
position relative
top 10px
padding 0 30px
background #fff
a
color #b1b1b1
text-decoration none
.v-link-active
color #555555
b
margin 0 10px
form
margin-top 20px
input
margin-top 10px
p
color #b1b1b1
font-size 14px
margin-top 5px
</style>
子组件-注册 _signup.vue
<template lang="jade">
form.form-group.col-md-8.col-md-offset-2
input.form-control(type="text",placeholder="请输入邮箱")
input.form-control(type="text",placeholder="您的真实姓名")
input.form-control(type="password",placeholder="密码总得填的")
br
a.btn.btn-success.btn-block 注册
p 确认遵守用户协议
</template>
子组件-登陆 _signin.vue
<template lang="jade">
form.form-group.col-md-8.col-md-offset-2
input.form-control(type="text",placeholder="请输入邮箱")
input.form-control(type="password",placeholder="密码总得填的")
div.checkbox
label.pull-left
input(type="checkbox")
自动登录
a.pull-right
忘记密码？
br
a.btn.btn-primary.btn-block 登录
p 确认遵守用户协议
</template>
<style lang="stylus">
.checkbox
label
color #b1b1b1
&:hover
color #e66
a
line-height 32px
color #b1b1b1
text-decoration none
&:hover
color #e66
</style>
其他组件
可参考源码
- 左侧栏
- 右上角边栏
跑起来(实时热加载)
npm run build
npm run dev
效果图
自己欠缺一些前端的造诣，喜欢“简书”这个产品以及小而美的公司，所以界面借鉴了简书，先锻炼着吧。
2016我的毕设2（具体实践说明）：http://dingyiming.github.io/2015/12/30/%E6%AF%95%E8%AE%BE2.html
加油！丁
记录时间：2015-12-30 周三 03:01 http://dingyiming.github.io/index.html 我想找个工作
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent