Vue知识（一）

Vue官方文档

再进行下面操作前，先看看这篇文环境部署文章
Vue可视化界面

npm install -g @vue/cli   安装Vue ui

首先使用脚手架构建好初始Vue后，认识一下Vue的目录结构

接着编写初始化demo，我们只需要关心src目录下的就可以，简单配置一下其他文件，我依次展开说
我的目录结构

在config目录下的index中配置路由接口代理，在文中添加

 //路由接口代理配置
    proxyTable: {
      '/':{
        target: 'http://localhost:8443',   //后台的访问路径
        changeOrigin: true,
        pathRewrite:{
          '^/':''
        }
      }
    },

接着在src/commonent目录中创建相关组件.Vue文件夹（在文件外可以先创建个目录，易区分文件）

例如：公共组件Footer

//在temolate中只能有一个div，可以相互嵌套

<template> 
  <div id="foot">
    <div class="copyright">
        <p>Copyright © 2020 Qunar.com Inc. All Rights Reserved.</p>
          <div class="img">
      		<i class="icon"></i><span>联系邮箱：********@163.com</span>
      	</div>

      	<div class="img">
      		<i class="icon1"></i><span>联系地址:************</span>
      	</div>

      	<div class="img">
      	  <i class="icon2"></i><span>联系电话：123456489789</span>
      	</div>


    </div>
   </div>
</template>

<script>
  export default {
    name: 'AgricultureFooter'     //组件名称，必填项
  }

</script>

<style>

//设置CSS样式
  #foot {
    margin-bottom: 0;
  	width: 100;
  	height: 126px;
  	background-color: #CC9933;
  	position: relative;
  }



</style>

写一个登录入口

<template>
<div>
  <agriculture-header></agriculture-header>
  <div class="wrap" id="wrap">
  	<div class="logGet">
  			<!-- 头部提示信息 -->
  			<div class="logD logDtip">
  				<p class="p1">登录</p>
  			</div>
  			<!-- 输入框 -->
  			<div class="lgD">
  				<img src="../../assets/LoginName.png" width="20" height="20" alt=""/>
  				<input type="text" v-model="UserAuthVo.loginName"
  					placeholder="输入用户名" />
  			</div>
  			<div class="lgD">
  				<img src="../../assets/password.png" width="20" height="20" alt=""/>
  				<input type="password" v-model="UserAuthVo.password"
  					placeholder="输入用户密码" />
  			</div>
  			<div class="logC">
  				<button v-on:click="login">登 录</button>
  			</div>
  		</div>
  </div>

  <agriculture-footer></agriculture-footer>
</div>

</template>

<script>
//这里导入公共组件

  import AgricultureHeader from '@/components/common/AgricultureHeader.vue'
  import AgricultureFooter from '@/components/common/AgricultureFooter.vue'

  export default {
    name: 'AgricultureLogin',
    // AgricultureHeader/AgricultureFooter 组件给申明到components里面然后在template里面使用
    components: { AgricultureHeader, AgricultureFooter },

    data () {
        return {
          UserAuthVo: { loginName: '', password: '' },
          // responseResult: [],  

        }
      },
      methods: {
        login () {
          this.$axios
            .post('/login/login', null, {   //后台的请求路径
              params: {
                loginName: this.UserAuthVo.loginName,
                password: this.UserAuthVo.password
              }
            })
            .then(
              successResponse => {
              this.responseResult = JSON.stringify(successResponse.data)
              if (successResponse.data.code === 200) {
                this.$router.replace({path: '/index'})
              }
            })
            .catch(failResponse => {})
        }
      },

  }

</script>

<style>

 #app .wrap{
    height: 610px;
   	width: 100;
 	  background-image: url(../../assets/LoginBackground1.jpg);
  	background-repeat: no-repeat;
    background-size: cover;
   	/* background-position: center center; */
   	position: relative;
  }

</style>

最后在router/index文件夹中配置一下接口路由（注意：Router是一个管理者，路由转发数组是用routes不是router）

import Vue from 'vue'
import Router from 'vue-router'
import AgricultureIndex from '@/components/home/AgricultureIndex.vue'
import AgricultureLogin from '@/components/manage/AgricultureLogin.vue'


Vue.use(Router)

export default new Router({
  //路径转发  
  routes: [     //注意拼写
    {
      path: '/',
      redirect: '/login'
     },
    {
      path: '/index',
      name: 'AgricultureIndex',
      component: AgricultureIndex
    },

    {
      path: '/login',
      name: 'AgricultureLogin',
      component: AgricultureLogin
    },

  ]
})

想使用异步请求的功能需要在程序主入口文件main.js中加入异步的插件，可以是ajax、axios等，我这里使用axios（他是对ajax的封装，在Vue中也很好使用）。
首先需要安装npm导入axios，在Vue项目中 npm install axios，然后配置变量
在main.js中添加这几行

var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/'

// 将API方法绑定到全局
Vue.prototype.$axios = axios

补充：

• 在浏览器添加图标favicon.ico
  首先将图标favicon.ico放在Vue的根目录，然后在Vue的构建开发（webpack.dev.conf.js）、生产环境（webpack.pord.conf.js）
  
  
  
• 添加外在框架，以LayUI 举例。
  把LayUI需要的CSS和JS放入static目录下，其他地方可能会报错。
  
  为了构建时不报错，提前可以在构建生产环境中注释CSS的安全配置
  

Vue4 创建链接