前端工程

vue组件化注册登陆页面简记

vue组件化做注册登陆页面简单记录

最近工作慌了，开始做毕设了，打算用vue做个SPA，学的不深，也算琢磨着跑了点，先理理思路，再前行，把刚刚做了的简单注册登陆页面记录下，也打下个底面，一步步来，望大神指教。

记录时间：2015-12-30 周三 03:01
单独示例源码：https://github.com/dingyiming/demo-Vue-sign

主要内容

  • vue
  • vue-router
  • bootstrap

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
+ 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内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
  "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配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
'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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
'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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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的地方如有出入，请自行调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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

1
2
3
4
5
6
7
8
9
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>

其他组件

可参考源码

  • 左侧栏
  • 右上角边栏

跑起来(实时热加载)

1
2
3
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
我想找个工作