小白的全栈开发 一

简介

• 从新手的角度（对vue有了解，对Koa和Express有了解。）从0开始搭建一个通过RESTful API提供数据，vue组成的单页面的前端项目。希望能够帮助和我一样是全栈小白的你（看过很多关于怎么搭建全栈的文章，部分可能有借鉴）。

马上毕业了，毕设题目是XXX课程网站，就是一个类似B站的网站。学生可以观看视频，文档(暂定为word和pdf)，可以在视频和文档下面进行评论。由老师上传视频和文档。因为要自己独立完成，所以开始自己的全栈之旅。分享出来我的全栈经历，并记录我的毕设进度(逃~)。
-　当时构想自己的网站是这样的： 是一个spa，有vue express提供接口api mongodb

开启全栈之旅

首先这些东西你要有，node vue-cli webpack mongodb，准备好之后 我们就开始全栈之旅吧

开始创建项目

• cd到你的想创建目录的文件夹 然后在命令行 vue init webpack vuefile（你自己定的项目名称）

• 

• 这里说一下这个ESLint 这是一个代码风格检查的插件，你的缩进是两个空格还是四个空格，你用不用: 当你的代码不符合ESLint的规则时就会报错，及时你的代码语法和逻辑都没错。看自己喜好选择yes还是no。如果不小心回车选择了yes。一会告诉你怎么解决。

• 

• 然后就和截图上面一样 cd到vuefile 然后npm install一键安装依赖项 最后npm run dev 你的vue就可以跑起来了。 大概长这样

• 

• 补上前面的坑，如果你的ESLint选了Yes 在vuefile>build>webpack.base.conf.js 找到eslint-loader 并将代码块注释。

• 

• 

项目已经创建完成了下面要将项目改成spa

　登录界面构建

进入我们的vue工作区(src文件夹)

找到main.js 改成这个样子

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // 引入element-ui
import 'element-ui/lib/theme-default/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)  //全局使用ElementUI 就可以在其他.vue文件使用element-ui
/* eslint-disable no-new */
new Vue({
  mode: 'history', //开启history模式保证spa可以和以前的网页一样可以前进和后退
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

• 在components 新建组件login

–

<template>
    <el-row class="content">
    <el-col :xs="24" :sm="{span: 6,offset: 9}">
      <el-switch on-text="登录" off-text="注册" v-model="inOut" on-color="#20A0FF" off-color="#42d885">
      </el-switch>
        <el-row>
          <el-input 
            v-model="name" 
            placeholder="账号"
            type="text">
          </el-input>
          <el-input 
            v-model="password" 
            placeholder="密码"
            type="password">
          </el-input>
          <template v-if="inOut">
            <el-button type="primary"  @click="login">登录</el-button>
          </template>
          <template  v-else>
            <el-popover
              placement="right"
              width="200"
              trigger="focus"
              :content=tips>
            <el-input 
            placeholder="确认密码"
            v-model="password_r"
            type="password" slot="reference">
          </el-input>
            </el-popover>
          <el-button type="success"  @click="register">注册</el-button>
          </template>
        </el-row>
    </el-col>
  </el-row>
</template>
<script>
    export default {
    data () {
      return {
        name: '',
        password: '',
        password_r:'',
        inOut: true,
        tips:"输入密码啊"
      }
    },
    watch: {
    // 如果 question 发生改变，这个函数就会运行
    password_r: function () {
      if(this.password_r ==''){
        this.tips="输入密码啊"
      }
      else if(this.password_r != this.password)
      {
        this.tips="两次密码不一样哦"
      }
      else
        this.tips="对接成功，可以注册了"
    }
  },
  methods:{
    login() {
           this.$message({
          message:  `欢迎${this.name}同学`,
          type: 'success'
        })
        },
    register() {
        this.$message({
          message:  `新同学${this.name}注册成功`,
          type: 'success'
        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .el-row.content
    padding 16px
  .title
    font-size 28px
  .el-input
    margin 12px 0
  .el-button
    width 100%
</style>

• 这一步运行需要npm install stylus 和 stylus-loader

• 为新的login.vue增加路由 到router下的index.js

//... 前面的就不写了 引入其他需要的东西
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
  ]
})

在我们的浏览器中输入http://localhost:8080/#/login

• 

• 长成上面的样子的话，估计就成功了

待续

　荆轲刺秦王