首页 > 其他分享 >VUE+Echarts安装与配置01

VUE+Echarts安装与配置01

时间:2024-03-07 22:23:37浏览次数:21  
标签:npm index VUE vue 01 router Echarts

1、创建VUE
npm init vue@latest //初始化VUE,执行创建向导任务
npm install //安装相关依赖
npm run dev //运行程序,查看创建结果

2、创建Echarts
npm install echarts //安装Echarts插件
import * as echarts from echarts //引用Echarts

3、引入router
npm install vue-router

4、设置main.js
import router from ../router/index
createApp(App).use(router).mount('#app')

5、设置index.js

点击查看代码
import { createRouter,createWebHashHistory } from "vue-router";

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

const routes = [
    {
        path:'/index',
        name:'index',
        component:()=>('../views/index.vue')
    }
]

export default router`

标签:npm,index,VUE,vue,01,router,Echarts
From: https://www.cnblogs.com/liuyuan7015/p/18057854

相关文章

  • 【Vue】HutoolExcel导出
     最近写Excel导出功能,发现需求有点复杂,这里整理一下思路和解决方案一、需求背景:老系统改造,功能和代码是现成的,预览了一下内容:第一个是有特定样式,比如首行标题,以及红色的列名称 第二个,导出多个Sheet页 第三个,最后多一行放置导出时间 二、技术选型:我非常喜欢用Huto......
  • P8686 [蓝桥杯 2019 省 A] 修改数组
    备赛蓝桥杯和icpc的习题:一道并查集的题目>#include<iostream>>#include<vector>>#include<algorithm>>#include<math.h>>#include<string>>#include<string.h>>#include<iomanip>>#include<map>&g......
  • Vue Core 8
    namespaceWebApplication2{publicclassProgram{publicstaticvoidMain(string[]args){varbuilder=WebApplication.CreateBuilder(args);builder.Services.AddSpaStaticFiles(configuration:options=>{......
  • P1525 [NOIP2010 提高组] 关押罪犯
    原题链接题解1:按边权从大到小排序,如果这条边的两个点没确定关系,那么把他们设为敌人这样,就成了一棵棵最大生成树(因为有的罪犯之间没有怨气)由敌人的敌人是朋友可以得出,如果两个点在同一棵树,且距离为偶数,那么代表他们之间互为朋友code1#include<bits/stdc++.h>usingnamespace......
  • 说说Vue 3.0中Treeshaking特性?举例说明一下?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一、是什么Treeshaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Deadcodeelimination简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码如果把代码打包比作制作蛋糕,传统......
  • Vue学习笔记39--创建Vue脚手架
    创建Vue脚手架1.Vue脚手架是Vue官方提供的标准开发工具(开发平台)2.脚手架最新版本4.x3.文档:https://cli.vuejs.org/zh/操作步骤:第一步:(仅第一次执行):全局安装@vue/cli(commandlineinterface)注:安装钱建议先设置镜像==》npmconfigsetregisterhttps://registry.npm.taoba......
  • VUE Grid的写法
    <template><table><thead><tr><thv-for="colingridColumns":key="col">{{col}}</th></tr></thead><tbody><tr......
  • VUE GRID WITH COMPONENT排序
    父组件:<!--Anexampleofcreatingareusablegridcomponentandusingitwithexternaldata.--><scriptsetup>importDemoGridfrom'../components/Grid.vue'import{ref}from'vue'constsearchQuery=ref('')......
  • 洛谷P4069 [SDOI2016] 游戏
    题目描述我们要操作的是一条在树上的路径\(s\)->\(t\)。(1)查询\(s\)->\(t\)最大的数字。(2)在\(s\)->\(t\)上增加一个数字,输入\(a\),\(b\),对于路径上的一个点\(u\)增加的数字是\(dis(s,u)\timesa+b\)。解题思路直接查询一条从\(s\)到\(t\)的路径是十分不方便的,所以我们......
  • 洛谷题单指南-搜索-P1101 单词方阵
    原题链接:https://www.luogu.com.cn/problem/P1101题意解读:对于方阵中的每一个字符,在8个方向上判断是否和"yizhong"匹配,是一个递归问题。解题思路:用chara[N][N]存储所有字符方阵,用boolb[N][N]标记每个字符是否在任一方向上和yizhong匹配遍历方阵每一字符,如果是'y'则在8个方......