当前位置: 首页 > 编程笔记 >

Vue项目如何引入bootstrap、elementUI、echarts

胡嘉歆
2023-03-14
本文向大家介绍Vue项目如何引入bootstrap、elementUI、echarts,包括了Vue项目如何引入bootstrap、elementUI、echarts的使用技巧和注意事项,需要的朋友参考一下

引入bootstrap

安装依赖包

cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev

全局引入

在项目中根目录下的main.js中添加如下代码:

import 'bootstrap'
import $ from 'jquery'

在vue文件中引用

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
</script>

引入elementUI

安装 elementUI

打开终端,输入以下内容

npm i element-ui -S

全局引入

在项目中根目录下的main.js中添加如下代码:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

引入echarts

安装echarts

npm install echarts -S

2.全局引入main.js

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍详解如何在vue项目中引入elementUI组件,包括了详解如何在vue项目中引入elementUI组件的使用技巧和注意事项,需要的朋友参考一下 前提:已经安装好Vue 初始化vue 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI 安装 elementUI 引入elementUI 在main.js中引入elementUI 测试 下面我们来测试一

  • 本文向大家介绍在vue项目如何引入异步组件?相关面试题,主要包含被问及在vue项目如何引入异步组件?时的应答技巧和注意事项,需要的朋友参考一下 { path: '/name', name: 'name', component: () => import('../views/name.vue'), },

  • 本文向大家介绍vue项目创建并引入饿了么elementUI组件的步骤,包括了vue项目创建并引入饿了么elementUI组件的步骤的使用技巧和注意事项,需要的朋友参考一下 1:安装node 前端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要

  • 本文向大家介绍详解vue-cli快速构建项目以及引入bootstrap、jq,包括了详解vue-cli快速构建项目以及引入bootstrap、jq的使用技巧和注意事项,需要的朋友参考一下 vue-cli脚手架工具快速构建项目架构: 。。首先默认了有已经安装了node。。。  npm install -g vue-cli                   全局安装vue-cli  vue init

  • 本文向大家介绍vue-cli如何引入bootstrap工具的方法,包括了vue-cli如何引入bootstrap工具的方法的使用技巧和注意事项,需要的朋友参考一下 本文介绍了vue-cli如何引入bootstrap工具的方法,分享给大家,也给自己留个笔记。 以下操作以正常安装node环境为前提。 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --

  • 我正在使用引导Vue来呈现一个选择输入。一切都很好--我可以根据所选的选项获取值并更改UI。 我正在尝试更改我的页面上的标题文本--成为所选选项的文本。我正在使用一个对象数组来呈现选择输入中的选项。 以下是我在模板中使用的内容: 下面是我传递给模板的数据/选项的样子: 我可以获得或,我希望获得的是或(文本值),而不是值。有没有一种方法可以做到这一点,而不创建一个额外的数组或其他东西来映射选定的选项

  • 本文向大家介绍在vue项目中引入vue-beauty操作方法,包括了在vue项目中引入vue-beauty操作方法的使用技巧和注意事项,需要的朋友参考一下 vue-beauty有丰富的vue组件库,使用vue-beauty方便项目的开发,下面介绍在vue项目中引入vue-beauty。 1、vue项目初始化 npm install --global vue-cl:全局安装vue脚手架vue ini

  • 本文向大家介绍vue组件如何被其他项目引用,包括了vue组件如何被其他项目引用的使用技巧和注意事项,需要的朋友参考一下 自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用。本文就粗细的介绍下,如有疑问欢迎共同讨论。在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包,尤其是本地引用 3.vue组件的两种引用方案 一、发布一个包到np