给自己用的：VueCli创建Vue2项目，包括引入axios，elementui

1、创建项目

1、环境

安装nvm，百度，懒得写

2、安装vuecli

都执行一遍

npm install -g vue-cli
npm install -g webpack
npm install -g webpack-cli

3、创建项目

创建项目,敲回车就直接是当前的名字 ，命令:vue init webpack project-name

第二个是项目描述可要可不要

第三个是作者信息，不写默认就是提示的那个

第四个直接回车就行

第五个是路由必须要,往后的都不需要了，对于后端开发来说

项目创建好了

2、引入axios

1、安装

进入创建好的文件目录下，安装axios

npm install axios

他启动的时候有可能会报错，他这个意思就是axios版本不兼容，给axios添加上版本号,或者百度一下用哪个版本

npm install axios@1.1.3

2、引入

全局引入，在src/main.js文件中

//main.js
import axios from 'axios'
//把axios对象挂到Vue实例上面，使用axios的时候直接全局调用this.$http就可以了 
Vue.prototype.$http = axios

3、使用

get的请求路径如果没有做代理就需要写完整路径

代理

配置代理后直接就可以用/api/***的方式请求,在config/index.js中的proxyTable:{}内

proxyTable: {

"/api":{ //名字自定义的,代理下面的地址
     target:"http://localhost:8080",//代理服务器地址 ，
     secure:false,//如果是https接口，需要配置这个参数值为 true
     ws: true,//是否代理websockets ，单向的短连接服务，后面会用到，所以先配置好 
     changeOrigin: true,//允许跨域访问 后端地址
     pathRewrite: {'^/api': ''} //代理的地址,当实际需要请求的路径里面没有"/api"时，就用模糊匹配
} ,

}

get使用案例

this.$http.get('/api/get-version').then((response) => {
        this.resultData = response.data;
      }, (response) => {
        // error callback
      });

post使用案例

      this.$http.post(
        "/testAjax/test02",
        { "name": "af3" })
        .then(function (rs) {//成功回调函数
          console.log("axios模块post请求")
          console.log(rs.data);
        }).catch(function (rs) {//错误回调函数
          console.log("axios模块post请求：服务器错误")
        })

3、引入elementui

全局引入

npm install element-ui -S

main.js文件中引入

import "element-ui/lib/theme-chalk/index.css";

import ElementUI from "element-ui";

Vue.use(ElementUI, { size: "medium" });

小计

npm常用命令

1、清除缓存

npm cache clean --force

操作

1、添加图标

index.html头部添加

  <link rel="icon" href="src/assets/logo/logo.png" type="logo/logo.jpg">
<link rel="shortcut icon" href="src/assets/logo/logo.png" type="logo/logo.jpg">	 <!-- 必须 -->

npm install 

npm run dev

执行一遍，如果没有出来在build/webpack.dev.conf.js中添加favicon:'src/assets/logo/logo.png'

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon:'src/assets/logo/logo.png'
    }),

参考博客：https://blog.csdn.net/qq_42543264/article/details/101064371

2、设置头部导航栏

直接在app.vue中加入如下代码，这个是大概的剩下的自己调

<template>
  <div id="app">
    <el-col :span="24">
      <el-menu :default-active="this.$route.path" router mode="horizontal" class="el-menu-header-demo"
        @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <i class="el-icon-s-platform"></i>
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-col>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      navList: [
        { name: "/views/chip", navItem: "地图碎片" },
        { name: "/views/device", navItem: "地图设备" },
        { name: "/views/params", navItem: "地图参数" },
        { name: "/views/picture", navItem: "地图图片" },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 设置后去掉头部导航栏白边 */
body {
  margin: 0;
  padding: 0;
}
.el-menu-header-demo {
  border-bottom: none;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  height: 60px;
}

.el-menu-header-demo .el-menu-item {
  height: 60px;
  line-height: 60px;
}

.el-menu-header-demo .el-menu-item:hover,
.el-menu-header-demo .el-menu-item.is-active {
  background-color: #434a50;
}
</style>

3、引入阿里云矢量图标

地址：https://www.iconfont.cn

直接举例：

我要收藏，点赞和关注图标，elementui中没有收藏，我们就可以去阿里云中找到并引入

进入网站将，你要的图标添加到商店

添加到库中后点击右上角的购物车，打开查看自己添加的图标，最好是新建项目，这样你下次再搞的时候就可以直接添加然后再次下载直接替换文件即可

下载代码后解压到项目中的icon目录下

然后再main.js中全局引入

/* 阿里图标 */
import './icon/iconfont/iconfont.css'

使用

在iconfont.css中这个名字就是对应的图标

代

<el-col :span="3" style="display: flex; justify-content: center;">
    <el-card class="box-card" style="width: 200px; height: 180px;" shadow="hover">
        <div slot="header" class="clearfix">
            <span>PDF转换工具</span>
            <el-button style="float: right; padding: 3px 0" type="text"
                icon="el-icon-d-arrow-right"></el-button>
        </div>
        <div class="text item">
            <span>将pdf转换成word</span>
            <div class="card-actions">
                <el-link :underline="false" @click="handleLike">
                    <i class="iconfont" :class="[isLiked ? 'icon-dianzan1' : 'icon-dianzan']"></i>
                </el-link>
                <el-link :underline="false" @click="handleCollect">
                    <i class="iconfont" :class="[isCollected ? 'icon-cai1' : 'icon-cai']"></i>
                </el-link>
            </div>
        </div>
    </el-card>
</el-col>


====================
data() {
    //这里存放数据
    return {
        isLiked: false,
        isCollected: false
    };
},
methods: {
    handleLike() {
        this.isLiked = !this.isLiked;
    },
    handleCollect() {
        this.isCollected = !this.isCollected;
    }
},

=============
<style scoped>
.card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.card-actions .el-link {
    margin-left: 10px;
    font-size: 18px;
    color: #909399;
}

.card-actions .el-link.is-active {
    color: #409EFF;
}
</style>

效果图

注意：如果颜色改不了，就去iconfont.js中搜fill，找到对应的更改即可