vue前端笔记

1.Npm 设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

2.创建vue项目

vue create  项目名

3.vue引入全局css

在assets文件夹下创建gloable.css，然后再main.js中引入

import '../src/assets/gloable.css'

gloable.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

4.项目高度刚好覆盖整个页面

最外层容器style="min-height: 100vh;"每层子容器style="min-height: 100%;

5.vue封装axios

创建文件request.js代码如下

import axios from 'axios'
const instance = axios.create({
    baseURL: 'http://localhost:9090',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});
export default instance

创建User.js引用request.js，代码如下

import request from "@/public/request";
export default {
    find(){
        return request({
            method: 'POST',
            url: '/user/'
        })
    },
    save(data){
        return request({
            method: 'POST',
            url: '/user/save',
            data
        })
    }
}

6.登录

页面代码    --> 引用自程序员青戈

<template>
  <div class="wrapper">
    <div style="margin:200px auto;background-color: #fff;width: 350px;height: 300px;padding:20px;border-radius: 10px">
      <div style="margin: 20px 0;text-align: center;font-size: 24px"><b>登录</b></div>
      <el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
      <el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-lock" v-model="user.password"></el-input>
      <div style="margin: 10px 0; text-align: right">
        <el-button type="primary" size="small" autocomplete="off">登录</el-button>
        <el-button type="warning" size="small" autocomplete="off">注册</el-button>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Login.vue",
  data() {
    return {
      user: {}
    }
  }
}
</script>

<style scoped>
  .wrapper {
    height: 100vh;
    background-image: linear-gradient(to bottom right,#FC466B,#3F5EFB);
    overflow: hidden;
  }
</style>

7.整合echarts，并设置echarts组件

创建echarts.vue

<template>
  <div :id="this.mid" ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "echarts.vue",
  props: {
    width: Number,
    height: Number,
    type: String,
    collection: Array,
    xData: Array,
    title: Object,
    mid: String
  },
  mounted() {
    //设置容器大小
    this.setWh();
    //设置图形
    this.setEhart()
  },
  data() {
    return {
      option: []
    }
  },
  methods: {
    setEhart(){
      switch (this.type){
        case 'pie' :
              this.pieOption()
              break
        default :
          this.barOption()
      }
    },
    barOption(){
      var chartDom = document.getElementById(this.mid);
      var myChart = echarts.init(chartDom);
      this.option = {
        title: this.title,
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: {
          type: 'value',
          minInterval: 1   //表示将刻度的最小间距设置为1
        },
        series: this.collection
      };

      myChart.setOption(this.option);
    },
    pieOption(){
      var chartDom = document.getElementById(this.mid);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: this.title,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            label: {
              //echarts饼图内部显示百分比设置
              show: true,
              position: "inside", //outside 外部显示  inside 内部显示
              formatter: `{d}%`,
              color: "#ffffff", //颜色
              fontSize: 12 //字体大小
            },
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.collection,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    setWh(){
      let container = document.getElementById(this.mid)
      container.style.width = this.width + 'px'
      container.style.height = this.height + 'px'
    }
  }
}

</script>

<style scoped>

</style>

使用举例，HomeView.vue

<template>
<div>
  <el-row>
    <el-col :span="12">
      <echarts mid="main1" :height="400" :width="500" type="bar" :xData="xData" :collection="collection" :title="title"></echarts>
    </el-col>
    <el-col  :span="12">
      <echarts mid="main2" :height="400" :width="500" type="line" :xData="xData" :collection="collection" :title="title"></echarts>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <echarts mid="main3" :title="this.title" :height="400" :width="500" :collection="collection2" type="pie"></echarts>
    </el-col>
  </el-row>
</div>
</template>

<script>
import echarts from "@/components/echarts";
export default {
  name: "HomeView",
  components: {
    echarts
  },
  data(){
    return{
      title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
      },
      collection: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'    //pie： 饼图   line: 折线图  bar: 柱状图
        },
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'bar'    //pie： 饼图   line: 折线图  bar: 柱状图
        }
      ],
      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      collection2: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]

    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>

注意点：

1.图表容器需要指定宽高，不然图表无法显示出来

2.echarts.vue中id需要从父组件传入，这样可保证每个容器的id都不一样，当id容器一样时，使用<echarts>引入图形时，图形会重叠在一起

<template>
  <div :id="this.mid" ></div>
</template>

3.图形使用后端传入的动态数据时，容器需要绑定一个key，用来刷新图形

例： 

<el-col :span="12" :key="iskey + '1'">
  <echarts mid="main1" :height="400" :width="500" type="bar" :xData="xData" :collection="collection" :title="title"></echarts>
</el-col>

8.map用法

let map = this.tableData.map(item => {
 return {
   id: item.id,
   name: item.name
 }

9.设置导航条宽带为100%

style="box-sizing:content-box;width:100%;margin-right: -200px"

需要注意的是margin-right是时效的，这里需要通过box-sizing:content-box解决。