Vue小模块之用户登录功能（一）工程创建和路由配置

Vue小模块之用户登录功能（一）搭建基础环境

技术栈

Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

生成项目

前往node.js官网下载安装node，安装完成后，打开cmd命令行，在任意路径输入node命令，再输入

console.log('hello')

若输出hello则表示node安装成功。

全局安装vue脚手架工具

$ npm i vue-cli -g

切换到工程目录，生成vue脚手架工程

$ vue init webpack login

接下来根据提示输入工程的信息

vue-router需要安装，新手可以选择不安装ESLint和所有测试工具，一下子学太多容易从入门到放弃

? Project name login
? Project description A Vue.js project
? Author your name
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

脚手架工程安装完成后就可以用编译工具打开login文件夹（我是用的VSCode），目录如下，编程都在src目录下进行

导入vue-router

先在目录src/components/下创建两个空文件Main.vue和Login.vue

工程会自动导入vue-router，若没有自动导入，则安装包：

$ npm i vue-router

在目录src/router/下创建index.js文件，代码如下

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main.vue'
import Login from '@/components/Login.vue'

Vue.use(Router) // 注册vue-router

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
  ]
})

在main.js中引入前面的配置的路由

import Vue from 'vue'
import App from './App'
import router from './router' // 引入路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router, // 等价于 router: router
  components: { App },
  template: '<App/>'
})

路由就设置成功了，接下来可以修改App.vue,Main.vue和Login.vue的代码如下（目前界面很难看，引入Element后再进行美化）

// App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style></style>


// Main.vue
<template>
    <div>
        <h1>主页面</h1>
        欢迎!<b @click="login">点这里登录</b>
    </div>
</template>

<script>
    export default {
        methods: {
            login () {
                this.$router.replace('/login')
            }
        }
    }
</script>

// Login.vue
<template>
    <div>
        <h1>登录界面</h1>
        用户名：<Input /><br/>
        密码：<Input /><br/>
        <button @click="login">登录</button>
    </div>
</template>

<script>
    export default {
        methods: {
            login () {
                this.$router.replace('/')
            }
        }
    }
</script>

路由模块运行

输入$ npm run dev启动项目

可以看到如下页面

点击粗体字后可以切换到登录界面

点击登录后进入到主页面，如果能实现两个界面之间的切换，则路由模块成功实现

总结

本阶段实现了基础环境的搭建和路由的配置，下个阶段将使用Element框架对界面进行美化，并对表单添加基础的验证功能