Vue CLI3.0中使用框架和引导程序的方法

某视频剪辑软件中使用框架和引导程序不是特别符合某视频剪辑软件原生的写法，但是有时候又要用，所以放上我的引入设置，供大家参考。

在Vue CLI2.0中引入框架和引导程序需要设置很多配置项，网上有很多方法法，这里不重复写了。直接上Vue CLI3.0配置步骤。

第一步：安装jQuery、Bootstrap、popper.js依赖。

其中popper.js用于在引导程序中显示弹窗、提示、下拉菜单，所以需要引入。

新公共管理安装jquery[电子邮件保护]popper。js-保存注意：上面的[电子邮件保护]指的是安装引导程序第三版，如果不加@3 符号，默认安装第四版。

第二步：配置main.js

引入助推器请看配置文件。

//main.jsimport Vue来自“Vue”；从""导入应用程序/app。vue '；从""导入路由器“/路由器”；从""导入存储“/store”；//在这里引入自举。默认只引入引导程序中的js，css需要另外引入，我的bootstrap.ss在APP.vue中引入的导入“bootstrap”；//也可以在这里引入bootstrap.css//导入" bootstrap/dist/CSS/bootstrap。CSS”；vue。配置。生产提示=假；new Vue({ router:路由器，store:商店，render: h=h(App)}).$ mount(' # app ')；我的APP.vue的配置，只是引入bootstrap.css，代码仅供参考。

样式/因为我的引导程序文件经过了我自己的调整，所以单独放在资产文件夹中做单独引入。//如果你只是想使用原生的自举，直接在main.js中引入钢性铸铁文件即可@import ./资产/CSS/bootstrap。CSS '；/style第三步：配置vue.config.js文件

Vue CLI3.0中的所有配置都在vue.config.js文件，你在这里配置好，脚手架自动使用你的配置覆盖掉默认的配置。

如果你的项目中没有vue.config.js文件，请你在package.json文件的同级目录新建一个vue.config.js文件。文件内具体的配置如下：

const web pack=require(' web pack ')；模块。导出={//configureWebpack是Vue CLI3.0中用于配置工具插件参数的地方，你在这里设置，会新建或者覆盖工具默认配置//webpack ProvidePlugin的含义是创建一个全局的变量，使这个变量在工具各个模块内都可以使用。这里的配置含义是创建$ '、' jQuery '、' window.jQuery '三个变量指向框架依赖，创建波普变量指向popper.js依赖。configureweb pack k : { plugins :[新网络包.ProvidePlugin({ $: 'jquery '，jQuery: 'jquery '，window.jQuery': 'jquery '，popper 3360[' popper . js '，' default'] }) ] }}第四步：具体使用范例

我做了一个工具提示的示例，鼠标放上去会出现工具提示提示

//模板模板div class=' content-wrap '按钮类型=' button ' class=' BTN BTN-默认'数据-切换=' tooltip '数据-放置=' left ' title='左侧“工具提示”左侧工具提示/按钮类型=' button ' class=' BTN BTN-primary ' data-toggle=' Tooltip ' data-placement=' top ' title=' top ' Tooltip ' top/按钮类型=' button ' class=' BTN BTN-警告' data-toggle=' Tooltip ' data-placement=' bottle ' bottle ' bottom ' title '在页面加载完毕后初始化工具提示，相当于$(function(){ $('[data-toggle=' tooltip ']').tooltip()；} $('[数据-切换='工具提示']').tooltip()；}};/script如果eslint报误，请设置。eslintrc.js文件。

模块。导出={ en v : { node : true，jquery: true } }本人测试结果如下：

参考文档：

https://cli.vuejs.org/zh/guide/webpack.html

引导工具提示：https://v3。bootscs。com/JavaScript/#工具提示

stackoverflow : https://stackoverflow.com/questions/42684661/add-bootstrap-to-vue-CLI-project

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。