Vue - 安装及配置

Vue

Vue npm安装

安装

VUE安装方式有两种，一种是npm安装，一种是JavaScript标签引入，现介绍npm安装方式。

1、安装node.js

2、安装淘宝镜像，打开命令窗口，运行如下代码：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装位置：C:\Users\HuYao\AppData\Roaming\npm

3、安装vue-cli，打开命令窗口，运行如下代码：

npm install @vue/cli -g

安装完毕后，进行检验，运行如下代码：

node list

会出现如下信息，证明安装成功：

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

4、新建一个文件夹，如“VUEStudy”，在VUEStudy文件夹中打开命令窗口，运行如下命令：

vue init webpack myvue

其中，myvue是项目文件夹名称，根据提示进行下一步，安装完成后，进入myvue文件夹

运行如下命令并等待安装：

npm install

报错后运行提示命令：

npm audit fix

5、验证安装，在myvue文件夹中，输入：

npm run dev

运行vue项目，在浏览器中输入终端指定的浏览器地址，访问vue首页成功，至此，vue基本环境搭建完成。

vue-router安装

手动安装vue-router时，最好采用指定版本号方式：

npm i vue-router@3.5.2 --save-dev

若报错，按照提示修复：

npm audit fix

上述命令会安装VUE2.X，如果不指定vue-router版本安装，

npm install vue-router --save-dev

会默认安装vue-router 4.X版本，而vue-router 4.X支持VUE3.X，不支持npm audit fix，在vue-router引用时会报错。

//main.js
import VueRouter from 'vue-router'

Vue.use(VueRouter)

vue-router卸载

npm uninstall vue-router

vue脚手架配置方式（推荐）

运行，cmd打开终端，运行如下代码：

vue ui

自动弹出网页后，在网页端安装配置vue项目

VUE引入E-Charts

安装

终端中运行如下代码：

npm install echarts vue-echarts

配置

在main.js 中加入如下代码：

//main.js
...
//全局引入
import ECharts from 'vue-echarts'

...
//注册全局组件
Vue.component('v-chart', ECharts)

组件中使用：

<template>
  <main>
    <el-row>
      <el-col :span="24">
        <div class="area">
          <v-chart class="echarts" :option="option" @click="getDate"/>
        </div>
      </el-col>
    </el-row>

  </main>
</template>

<script>
// 全局引入
import VChart, {THEME_KEY} from "vue-echarts";
// 按需引入
import * as echarts from 'echarts/core';
import {ToolboxComponent, LegendComponent} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);


export default {
  components: {
    'v-chart':VChart
  },
  // provide: {
  //   [THEME_KEY]: 'dark'
  // },
  name: 'elements',
  data() {
    return {
      option: {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: 40, name: 'rose 1'},
              {value: 38, name: 'rose 2'},
              {value: 32, name: 'rose 3'},
              {value: 30, name: 'rose 4'},
              {value: 28, name: 'rose 5'},
              {value: 26, name: 'rose 6'},
              {value: 22, name: 'rose 7'},
              {value: 18, name: 'rose 8'}
            ]
          }
        ]
      }
    }
  },
  created() {//自动渲染数据

  },
  methods: {//方法
    getDate(value) {
      console.log(value.name, value.value)
      //this.$http.get()
    }
  },
}

</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.area {
  width: 80%;
  height: 80vh;
  background-size: 100% 100%;
  padding: 8%;
  margin-left: 5%;
}
</style>

需要指定E-Charts区域大小，因此需要设置一个div，并指定样式area

参考E-Charts官方文档，按需引入，并设置样式 https://echarts.apache.org/zh/index.html