Vue开发相关

vue cli 版本：Vue CLI v4.5.13

vue版本：^3.0.0

echarts版本：5.1.2

1.使用Vue Cli创建项目。

使用vs code打开一个空文件夹，在该目录下执行命令：

# 我习惯安装到本地，如果想全局安装使用-g
npm install @vue/cli --dev-save

安装好后，当前目录下会出现一个node_modules目录，然后使用命令创建一个项目，项目名称为big-screen：

.\node_modules\.bin\vue create big-screen

使用该命令后会出现下面的创建步骤，选择手动：

然后使用空格键把下面的都选择上：

选择Vue3：

以此做如下选择：

等待项目创建完成，完成后当前目录下会多一个big-screen的vue项目，在该项目目录下执行：

npm run serve

vue项目就启动起来了：

删除App.vue里面的无关代码，删除之后代码如下：

<template>
  <div id="nav">
  </div>
</template>

<style lang="less">
</style>

删除components和views两个目录下的所有文件。

删除掉route/index.js里面的相关代码，最终代码如下：

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在项目的根目录下创建文件vue.config.js，其内容如下：

module.exports={
      devServer:{
            port:8999,// 端口
            open:true // 自动打开默认浏览器
      }
}

2.引入echarts包。安装echarts：

npm install echarts --dev-save

在index.html（上一步创建的项目，index.html存放在public目录下）里面添加如下代码：

<script src="../node_modules/echarts/dist/echarts.min.js"></script>

该步引入后，全局window下就多了一个echarts对象，使用的时候，只需要使用window.echarts就可以了。

使用下面的方法挂载全局echarts对象：

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const applicaition= createApp(App);
applicaition.use(store).use(router).mount('#app');

// 挂载变量到原型对象上，以成为全局对象
applicaition.config.globalProperties.$echarts=window.echarts;

在使用的时候使用只需要this.$echarts就可以拿到echarts对象了。

3.引入axios。安装axios：

npm install axios --dev-save

引用和设置全局对象以及基url：

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:80/api/'

const applicaition= createApp(App);
applicaition.use(store).use(router).mount('#app');

// 挂载变量到原型对象上，以成为全局对象
// 但是这样做经常会失败，失败的原因我尚未找到
applicaition.config.globalProperties.$echarts=window.echarts;
applicaition.config.globalProperties.$http=axios;

4.获取echarts地图数据：echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang

5.当父div的高度和宽度设置为100%时，让span在父div中垂直和水平居中：

<div style="height:100%;width:100%;display:table;">
    <span style="display:table-cell;vertical-align:middle;text-align:center;">
        test
    </span>
</div>

6.关闭ESLint。ESLint校验针对缩进也有严格限制，缩进不对会导致代码编译的时候产生大量报警或报错，这未免太严格了些，所以我一般会选择关闭这个插件，关闭方法是在项目根目录下创建vue.config.js，然后加上一句lintOnSave:false：

module.exports={
      lintOnSave:false,
      devServer:{
            port:8999,
            open:true
      }
}

7.element-ui只支持到vue2.0，针对vue3.0，官方推出了element-plus：Element Plus - The world's most popular Vue 3 UI framework

直接通过npm安装很有可能因为版本问题导致你的项目编译时出现很多错误，所以推荐使用官方提供的一个插件安装GitHub - element-plus/vue-cli-plugin-element-plus: Element Plus plugin for @vue/cli 4.5

8.使用element-plus时，如果想让单行el-row布局在页面中垂直居中，那么需要像下面这么写：

    <el-row justify="center" align="middle" style="height: 100%;">
      <el-col :span="6">
        <LoginComponent></LoginComponent>
      </el-col>
    </el-row>

注意align="middle"是让内容在该行内居中，但是如果行的高度不铺满整个页面，那么是不能让行内元素在页面居中的，因此需要设置style="height: 100%;"