vue+echarts项目一：前端准备工作

初始化 NPM VUE-CLI 之前的文章有提到过

vue+element实现单选多选 答题的打分demo(从0-1全过程)_benlalagang的博客-CSDN博客_vue答题插件答题: vue+element答题demo 包含单选 多选 判断、打分页面https://blog.csdn.net/benlalagang/article/details/125927798这里我们选择不同的点

起名字起成 vision

vue create vision

脚手架选择配置项

Vuex、Router、Less预处理、 

取消选择：

ESE 测试  单元测试  ES-lint

创建完成后显示的是基础欢迎页 把无关的代码删除 只留下最干净的页面

app.vue

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

router/index.js

后期需要新增展示、引入import 对应的组件  在下方路由表注册即可

import Vue from 'vue'
import VueRouter from 'vue-router'
const Screen = () => import('../Screen')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect:'/screen'
  },
]

const router = new VueRouter({
  routes
})

export default router

Vue中引入echarts

这里我们在 public/index.html 外部引入 好处：项目上线时 减少体积  （为了稳定这里先用本地的  打包时再修改）

<!-- 一旦通过script标签引入 echatrs.js 文件  window.echarts 它在window上 也可以挂载到Vue全局 -->
    <script src="static/lib/echarts.min.js"></script>
<!-- 引入主题的Js 文件 -->
    <script src="static/theme/chalk.js"></script>
    <script src="static/theme/vintage.js"></script>

main.js:

// 全局挂载 echarts  任意组件就可以使用 this.$echarts
Vue.prototype.$echarts = window.echarts

直接使用npm 安装的话 后期为了节省体积 还是要进行外联

安装指令： 

npm install echarts --save

main.js:

import * as echarts from 'echarts';

 axios的安装

npm install axios

main.js:

使用 node express 创建一个本机服务端口 2903

// axios 的配置封装
axios.defaults.baseURL = 'http://127.0.0.1:2903/api/'
// 全局挂载 axios  任意组件就可以使用 this.$http
Vue.prototype.$http = axios

通用的全局样式 

直接写在App.vue里了  原则就是将所有的容器的宽度和高度设置为占满父容器

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

<style lang="less">
html,body,#app,.comP1,.comP2,.comP3{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
canvas{
  border-radius: 24px;
}
</style>

Vux中通用一个主题

store/inedx.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    theme:'chalk'
  },
  getters: {
  },
  mutations: {
    changeTheme(state){
      if (state.theme === 'chalk'){
        state.theme = 'vintage'
      }else {
        state.theme = 'chalk'
      }
    }
  },
  actions: {
  },
  modules: {
  }
})

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";


// axios 的配置封装
axios.defaults.baseURL = 'http://127.0.0.1:2903/api/'
// 全局挂载 axios  任意组件就可以使用 this.$http
Vue.prototype.$http = axios

import './assets/font/iconfont.css'

import * as echarts from 'echarts';

// 全局挂载 echarts  任意组件就可以使用 this.$echarts
Vue.prototype.$echarts = window.echarts


Vue.config.productionTip = false

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