Vue开发（二）

前言：

经过一个多月的学习与使用，满打满算，写完了个人页面的第一个版本。
完成如下：

#mywebsite
我的个人页面初版
实现，对于各个页面的初步设计，与后台的交互功能
具体实现：
Cover[封面]：设计了个人logo，通过点击图片，超链接进我的个人页面首页
index[首页]：关于本站的首页设计，包括头部组件，欢迎语句，个人展示组件
myInfo[我的信息]：关于个人的一个介绍，包括头部组件，介绍个人的主部分，个人展示组件
*myblogs[我的博客]：展示个人写的博客，包括头部组件，标题摘要目录，个人博客信息简介，博客展示区（关于文章的简介）
mylife[我的生活]: 展示我的生活，包括一个头部组件，一个轮播栏
*messageBoard[我的留言板]：对我的留言，包括头部组件，天气组件，对我的留言栏信息（后台对接，实现留言，点赞等功能）

目前遗留问题：
单位不统一问题（多用px，偶尔用%，希望单位统一）
头部栏悬浮为顶部
吃像素问题（标签多用像素丢失问题）
头部导航栏，二级导航栏设计问题（原，绝对定位，希望改为相对定位）
vue项目耦合度太高（体现于留言栏页面）
代码框架设计有问题，没有用最新的知识，有点乱，只能算是勉强设计，使用的vue-cli版本比较老

然后决定开始开发个人页面的第二版本，解决如上问题，并引入element ui等模块进行使用，并且对路由进行配置文件管理，使项目更具有工程化。

---

正文

按照新的vue-cli教程来新建项目，用于覆盖原有乱七八糟的项目。（默认使用npm进行管理，然后需要新下载文件的，就用cnpm【淘宝镜像】）

vue-cli官方文档

先更新我的vue-cli，官方文档说要求先卸载原先旧的的版本

npm uninstall vue-cli -g //卸载旧的vue-cli版本

cnpm install -g @vue/cli //安装新的vue-cli版本

vue --version//检查版本

然后利用vue-cli 3.0+来进行项目管理

官方给出俩个选择

vue create xxx //用命令行在当前目录新建一个vue项目
vue ui //通过图形化界面来进行vue项目的管理，可以新建，也可以对以前的项目进行管理

硬吹一波，图形化界面真的是很人性了。

按照步骤，用图形化界面新建了一个vue项目，这里默认依赖就只有babel和eslint

下面看一下新的项目代码

新：

旧：

还是能看到和旧版本的vue-cli框架是有较大区别的。明显观察到文件变少了很多，变得更加精简了。
具体我也说不好。（因为我也只是会用，这不是慢慢学嘛）

官方文档推荐新建一个vue.config.js文件用于配置。

---

路由配置
先通过nmp下载vue-router插件

在src目录下新建router文件夹，里面放一个index.js用于配置路由信息

import Vue from 'vue'
import Router from 'vue-router'
import test from '../views/test'

Vue.use(Router);

export default new Router({
    
    routes: [
        {
            path: '',
            name: 'test',
            component: test
        },
    ]
})

在mian.js里面进行引入router文件夹

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App), 
}).$mount('#app')

在app.vue根组件里面引用

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

<script>
export default {
  name: "App",
  components: {}
};
</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>

就可以通过路由来访问想要的路径了

---

axios配置

//vue.config.js
module.exports = {
    // webpack-dev-server 相关配置
    devServer: {
        open: true,
        host: 'localhost',
        port: 8888,//配置页面端口
        https: false,
        hotOnly: false,
        proxy: {
            '/api': {
                target: 'http://localhost:8090',//要访问的跨域的域名
                ws: true,// 是否启用websockets
                changeOrigin: true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
                secure:false, // 使用的是http协议则设置为false，https协议则设置为true
                pathRewrite: {//重定向
                   // '^/api': '/api'    这种接口配置出来     http://XX.XX.XX.XX:8083/api/login
                    '^/api': '' //这种接口配置出来     http://XX.XX.XX.XX:8083/login
                  }
            },
           
        }
    },
    lintOnSave: false, // 关闭格式检查
}

axios配置使用:

```javascript
<template>
  <div>
    这里是测试界面
    <div>
      <button @click="axiostest()">点我发送axios虚拟请求</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    axiostest() {
      this.$axios
        .post("/api/selectallcomment", {
          
        })
        .then(res => {
          console.log(res);
        })
        .catch(res => {
          alert("错误：" + res);
        });
    }
  }
};
</script>

原理是在配置里，把/api的targer要访问的跨域的域名，这样遇到/api，就可以自动转换为要访问的跨域的域名。但是要注意，这里的转换，在控制台并不是可见的，f12进去看到请求成功了，但是他的格式是没有转换的。我一直以为没有转换成功，还在找错。后来问了同学才知道，是不可见的。

vue-cli proxyTable中跨域中pathRewrite配置

webpack-dev-server主要的配置属性

---

开发环境与生产环境的配置

在package.json同级目录下新建文件

.evn.devolopment（开发环境）

VUE_APP_SEV_URL = 'http://localhost:8090'
VUE_APP_BASE_API = '/api'

.evn.production（生产环境）

VUE_APP_SEV_URL = 'http://120.27.247.102:8090'
VUE_APP_BASE_API = '/api'

修改vue.config配置

//vue.config.js
module.exports = {
    // webpack-dev-server 相关配置
    devServer: {
        open: true,
        host: 'localhost',
        port: 8888,//配置页面端口
        https: false,
        hotOnly: false,
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_SEV_URL,//要访问的跨域的域名
                ws: true,// 是否启用websockets
                changeOrigin: true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
                secure: false, // 使用的是http协议则设置为false，https协议则设置为true
                pathRewrite: {//重定向
                    // '^/api': '/api'    这种接口配置出来     http://XX.XX.XX.XX:8083/api/login
                    ['^' + process.env.VUE_APP_BASE_API]: '' //这种接口配置出来     http://XX.XX.XX.XX:8083/login
                }
            },

        }
    },
    lintOnSave: false, // 关闭格式检查
}

vue配置开发环境和生产环境(axios)

---

  // 重置
  handleResetSetPlan(name) {
    this.$refs[name].resetFields();
  },

学会使用