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

生成项目

1、前往node.js官网下载安装node。安装完成，控制台任意路径输入node -v命令，如果显示版本号，说明安装成功。（现在安装node.js会自动安装npm命令，所以不用再单独安装npm。）

2、全局安装vue脚手架工具。npm i vue-cli -g
3、切换到工程目录，生成vue脚手架工程。vue init webpack login
4、此时出现如下提示，则执行命令npm install -g @vue/cli-init

5、安装完成

6、再次执行vue init webpack login

7、完成后，用webstrom打开生成目录

导入vue-router

8、在目录src/components/下创建两个空文件Main.vue和Login.vue。工程会自动导入vue-router，若没有自动导入，则安装包：npm i vue-router
9、在目录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
    }
  ]
})

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

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

Vue.config.productionTip = false

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

11、路由就设置成功了，接下来可以修改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>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</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>

12、导入完成以后发现index.js页面有提示警告。Module is not installed

按ctrl键，鼠标单击@，发现@代表的路径不正确

解决方案

解决方法：修改配置。打开WebStorm编辑器：File ->Settings->Languages&Frameworks->JavaScript->Webpack

发现该行未配置。于是双击shift,搜索文件webpack.conf.js

于是配置上该路径即可

路由模块运行

13、输入$ npm run dev启动项目

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

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