Vue学习（二）熟悉项目结构

熟悉项目结构

登陆退出业务流程

1.登陆页面输入账号密码
2.调用后台接口进行验证
3.通过验证后，根据后台响应状态跳转到项目主页

相关知识点

1.http无状态
2.通过cookie在客户端记录状态（前后端间无跨域问题，推荐）
3.通过session在服务端记录状态（前后端间无跨域问题，推荐）
4.通过token方式维持状态（前后端间有跨域问题，推荐）

token原理分析

页面布局

前期工作

1.通过Element-UI组件实现布局， 会用到el-form（表单）,el-form-item（item项，账号密码登陆重置区域）,el-input（输入）,el-button（按钮）,字体图标。
2. 用VS Code打开新建项目，然后切换终端，输入git status查看当前工作区是否干净。
3. 然后建立新分支，每开发一个新功能最好建立一个新分支，当新分支开发完后，合并到master分支即可。输入命令git checkout -b 名称 即可。可以使用git branch查看当前所有分支，有*代表当前所处分支。
4. 先对项目结构进行梳理。cmd后输入vue ui进入可视化面板，点击任务和serve。

然后点击运行按钮（此处遇到问题，项目运行一下很快就停止）待解决
编译成功后点击启动app，会进入默认的页面，如果想要修改页面，则进入VS Code修改代码。

项目中各个代码文件含义

1. 首先查看src文件夹下的main.js文件，它是整个项目的入口文件。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
Vue.config.productionTip = false
new Vue({  router,  render: h => h(App)}).$mount('#app')

通过render函数把App根组件渲染到了页面上，同时将路由router挂载到vue实例中。

2. 接下来查看App根组件，发现分为三部分，其中template是ui结构，script是行为，style是样式。
   
   里面的代码即默认页面。删掉代码即可得到空白页面，也可自己进行编辑新页面。
   
3. 路由router.js文件，它默认导入Home.Vue，也配置了相关的路由规则。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
      path: '/',    
      name: 'Home',    
      component: Home  },  
  {    
      path: '/about',    
      name: 'About',    
      // route level code-splitting    
      // this generates a separate chunk (about.[hash].js) for this route                	// which is lazy-loaded when the route is visited.    
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')  }]
const router = new VueRouter({  routes})
export default router

可把routes[]中的内容删除或修改成自己的内容。

4. 可以把views和components中的默认组件删掉，就可以得到一个干净的项目结构。
   

开始编写项目

1. 首先创建组件，按照根组件的格式来写。单文件组件中style标签要加上scoped，防止样式冲突。

<template>    
<div>登陆组件</div>
</template>
<script>export default {    }</script>
<style scoped>
</style>

2. 在router中以路由的形式渲染到根组件App中。首先导入import，然后在路由规则数组中新增一个路由规则。

import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../components/login.vue'
Vue.use(VueRouter)
const routes = [  {path: '/login',components:login}  ]
const router = new VueRouter({  routes})
export default router

其中path指定路径，即用户访问login路径时，通过components属性来指定展示的组件。
添加{path:’/’,redirect:’/login’},用户访问根路径时自动重定向到login。

3. 在App根组件中放置占位符

<template>  
<div id="app">    
<router-view></router-view>  
</div>
</template>

这样根据路由匹配到的组件都会渲染到router-view中进行展示。

4. 然后就可以在可视化面板中运行的网页中刷新或输入路径进行验证。（待验证）