Vue随笔记

1 Idea里面使用Vue

Idea里面要安装Vue插件

File - New - Project - JavaScript - Vue.js

然后出现：

"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js" --ignore-existing --package @vue/cli vue create --default .
npx: the --ignore-existing argument has been removed.
See `npm help exec` for more information
Need to install the following packages:
  @vue/cli@5.0.8
Ok to proceed? (y) y

然后等它自己安装完成，完成后打开一个Terminal并cd到项目的文件夹里，运行npm run serve

然后访问： http://localhost:8080/ 即可看到Vue界面

使用 Ctrl + C 退出

接着安装axios和echarts

C:\GIT_repo\vue-workspace\demo-monitor>npm install --save axios
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: acorn-jsx@5.3.2
npm WARN Found: acorn@7.4.1
npm WARN node_modules/acorn-jsx/node_modules/acorn
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer acorn@"^6.0.0 || ^7.0.0 || ^8.0.0" from acorn-jsx@5.3.2
npm WARN node_modules/acorn-jsx
npm WARN   acorn-jsx@"^5.3.2" from espree@9.6.1
npm WARN   node_modules/vue-eslint-parser/node_modules/espree

added 6 packages, removed 2 packages, and changed 48 packages in 2m

107 packages are looking for funding
  run `npm fund` for details

C:\GIT_repo\vue-workspace\demo-monitor>npm install --save echarts

added 4 packages in 2m

107 packages are looking for funding
  run `npm fund` for details

2 Vue3.0编码

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
import axios from 'axios'

const app = createApp(App);
app.config.globalProperties.$axios = axios
app.config.globalProperties.$echarts = echarts
app.config.globalProperties.$url = '/api/hello2/monitor1'

app.mount('#app')

处理跨域请求：修改vue.config.js文件

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:20006',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
})

关掉页面，重新npm run dev一下，要不即使设置代理完成也会请求不到，一定要注意

3 使用element-ui

在vue的template里想用el-row和el-col，发现根本不起作用，原来是没有引入element-ui

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width:500px; height:400px" ref="main"></div>
      </el-col>
      <el-col :span="12">
        <div id="pie" style="width:500px; height:400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

Vue3.0中需要引入elementplus 如下main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
import axios from 'axios'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'


const app = createApp(App);
app.use(ElementPlus)
app.config.globalProperties.$axios = axios
app.config.globalProperties.$echarts = echarts
app.config.globalProperties.$url = '/api/hello2/monitor1'

app.mount('#app')