vite2+vue3项目使用router+echarts+eslint+Element-UI（Element-Plus）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

创建项目

项目运行命令如下（再说一遍怕忘）：

arduino 复制代码

npm run dev

接下来的安装操作都是在项目的根目录下打开终端，可以是编辑软件的内置终端，也可以是从文件夹打开的命令行

router

处于项目根目录下

执行命令

css 复制代码

npm install vue-router@4

这时能看到配置文件package.json中出现以下框选内容

新建文件

1、找到项目的main.js文件添加以下代码

javascript 复制代码

// 引入路由
import router from './router'

整个文件代码为

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

其中element-plus是另外载入的

2、在项目目录src下新建文件夹router

3、在router文件夹下新建js文件index.js

4、在router/index.js文件中写入以下内容

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'
// 开启历史模式
// vue2中使用的mode：history 实现
const routes = [
  {
    path: '/',
    redirect: '/home' // 重定向到home页面
  },
  {
    path: '/home',
    component: () => import('../views/HelloWorld.vue') // 在src文件夹下新建的views文件夹，用于存放各个页面
  },
  {
    path: '/about',
    component: () => import('../views/AdoutView.vue')
  }
]
const router = createRouter(
  {
    history: createWebHistory(),
    routes
  }
)

export default router

其中../views/AdoutView.vue两个页面是自己新建的，在src下新建views文件夹，在views文件夹下新建两个名为AdoutView和HelloWorld的.vue页面

5、App.vue代码

xml 复制代码

<template>
  <div class="app">
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
    <p></p>
    <img alt="Vue logo" src="./assets/logo.png" />
    <router-view></router-view>
  </div>
</template>

<script>

</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;
  font-size: 23px;
}
</style>

6、页面内容

HelloWorld.vue

xml 复制代码

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String
})

const count = ref(0)
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>

    <p>
      Recommended IDE setup:
      <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
      +
      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
    </p>

    <p>
      <a href="https://vitejs.dev/guide/features.html" target="_blank">
        Vite Documentation
      </a>
      |
      <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
    </p>

    <button type="button" @click="count=count+12434415">count is: {{ count }}</button>
    <p>
      Edit
      <code>../components/HelloWorld.vue</code> to test hot module replacement.
    </p>
  </div>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>

AdoutView.vue

xml 复制代码

<template>
  <div>
    <!-- 测试element-ui有没有导入成功 -->
    <!-- <el-button type=" primary" >按钮</el-button> -->
    <p>AdoutView页面</p>
  </div>
</template>

8、展示效果

ECharts

官网示例：官网示例

1、安装

css 复制代码

npm install --save echarts

2、使用挂载

在需要使用的页面script中写入代码

javascript 复制代码

import * as echarts from 'echarts'

就可使用echarts了

3、页面代码

替换AboutView.vue的代码，这里是重新写的代码，可以全选替换

css 复制代码

<style scoped>
#sector {
  background-color: indigo;
  width: 50%;
  height: 320px;
  /* margin: 0 auto; */
}
</style>
<template>
  <div id="sector">
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'SectorName',
  data () {
    return {
      option: {
        animation: false,
        title: {
          text: '本周主煤流系统启动平均时长',
          textAlign: 'left',
          x: 'center',
          y: 'top',
          textStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 16
          }
        },
        color: ['#0d81f7', '#0fb42c'],
        tooltip: {},
        legend: {
          show: true,
          top: 18,
          right: 0,
          // 与series中的文字相同，只有一样的时候才会显示
          data: ['主煤流系统手动启动时长1', '主煤流智能启动时长'],
          textStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 13
          },
          itemWidth: 10,
          itemHeight: 10
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#0092D5'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
          // 横轴
          data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06'],
          textStyle: {
            fontSize: 17
          }
        },
        yAxis: {
          name: '(分钟)',
          nameTextStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
            align: 'right'
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#0092D5',
              opacity: 0.3
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          }
        },
        grid: {
          top: '35%',
          bottom: '17%',
          left: '7%',
          right: '2%'
        },
        series: [{
          name: '主煤流系统手动启动时长1',
          barWidth: 40,
          type: 'bar',
          data: [110, 21, 3, 42, 15, 63],
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'insideLeft', // 在上方显示
                offset: [-8, 0],
                textStyle: { // 数值样式
                  color: '#fff',
                  fontSize: 17
                }
              },
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#0069F5' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#35C3FF' // 100% 处的颜色
              }], false)
            }
          }
        }, {
          name: '主煤流系统智能启动时长',
          barWidth: 40,
          type: 'bar',
          data: [92, 23, 74, 15, 11, 27],
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'insideRight', // 在上方显示
                offset: [8, 0],
                textStyle: { // 数值样式
                  color: '#fff',
                  fontSize: 17
                }
              },
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#03AC32' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#69EF00' // 100% 处的颜色
              }], false)
            }
          }
        }]
      }
    }
  },
  // 已完成模板已经渲染或el对应html渲染后
  // 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  mounted () {
    // 取得div的ID对象
    const chart = echarts.init(document.getElementById('sector'))
    // 得到option的配置
    chart.setOption(this.option)
    // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function () { chart.resize() })
  },
  methods: {},
  watch: {},
  created () {
  }
}
</script>

运行后长这样，这个代码也是在网上找的，还有比较简单点的在Echarts的官网options中的内容替换即可，因为懒得搞了就这样随便看看（好丑的说）

ESlint

安装

npm init @eslint/config

①选择模式：问要哪种的eslint，我选择的是最后一个检查错误，强制更改后才可以运行

css 复制代码

? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

②语言模块，选择javascript

typescript 复制代码

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

③选择语言框架选择vue.js

rust 复制代码

? Which framework does your project use? ...
  React
> Vue.js
  None of these

④是否使用ts，我这里的项目时没有使用TS的，所以我没选，看自己的项目来选择

yaml 复制代码

 ? Does your project use TypeScript? >> No / Yes

⑤代码在哪里运行使用空格键全选浏览器+node

css 复制代码

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

⑥选择一个风格，这里选普遍用的流行风格就行

css 复制代码

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style

⑦你想遵循哪一种风格指南?选择Standard

ruby 复制代码

? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

⑧配置文件类型，选择JS

lua 复制代码

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

⑨出现以下提示，选择Yes

swift 复制代码

Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0
? Would you like to install them now? >> No / Yes

⑩选择安装方式，有啥用啥，我一般用npm（建议不使用pnpm）

perl 复制代码

? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

然后就会在安装了，等待安装好安装完成

安装完成后，项目根目录会出现.eslintrc.js文件

继续安装

css 复制代码

npm i -D vite-plugin-eslint

添加代码

在根目录的vite.config.js文件中添加以下代码

css 复制代码

eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })

该文件全部代码如下

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// vite.config.js 文件
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ]
})

再次初始化项目

复制代码

npm install

运行项目

arduino 复制代码

npm run dev

能够看到出现了提示（出现与编写规范不同的地方），泽里选择的这个模式要求比较多，所以最开始我的报错就很多，注意看每一行的报错信息，大部分都是空格没加，多了空格，缩进不对，额外的末尾分号，单双引号使用还有文件末尾空行等等原因，大部分都不是很难找，修改了就行

Element-Ui

1、安装Element-Plus

在项目根目录终端运行以下代码 npm install element-plus --save

2、在项目的src目录下的main.js文件中添加以下代码

原本应该是ElementUI的，但是我之前搞得时候一直只能成功一半，总感觉是vue3的问题，后面查了查发现是用vue3安装element-ui的时候会报错，于是就转用了

javascript 复制代码

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

scss 复制代码

createApp(App).use(ElementPlus)

main.js完整代码

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './router'
// 整合ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

3、在页面中引用并运行

在页面中写入以下代码（这里就是测试到底有没有成功，可以选择其他的代码，只要能证明自己成功了就行）

xml 复制代码

<el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

运行项目后，能在页面上看见以下样式则为引用成功

Over