【Vue.js】vue.js+layerui+bootstrap

DDreach 发布于2019-08-23 18:28 / 3002人阅读

摘要：环境搭建如果你还没有搭建开发环境，请移步以下步骤基于你已经搭建好的开发环境首先从官网上下框架在项目的文件夹下导入文件主要导入和然后在中全局导入然后我们开始进行测试我们这里随意插入一个按钮，绑定一个点击事件点击事件如下您是如何看待前端开发重要

环境搭建
如果你还没有搭建vue开发环境，请移步
https://cn.vuejs.org/

以下步骤基于你已经搭建好vue的开发环境
首先从官网上下layui框架

https://www.layui.com/

在项目的static文件夹下导入文件

主要导入layer.css和layer.js

然后在index.html中全局导入

然后我们开始进行测试
我们这里随意插入一个按钮，绑定一个点击事件

点击事件如下

  methods: {
    testlayer: function() {
      layer.confirm(
        "您是如何看待前端开发？",
        {
          btn: ["重要", "奇葩"] //按钮
        },
        function() {
          layer.msg("的确很重要", { icon: 1 });
        },
        function() {
          layer.msg("也可以这样", {
            time: 20000, //20s后自动关闭
            btn: ["明白了", "知道了"]
          });
        }
      );
    }
  }

测试运行
发现控制台报了

$ is not defined

的错误

解决方法：
1.首先安装jquery

cnpm install jquery --save

2.在项目根目录下的build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpack

var webpack = require("webpack")

3.在module.exports中添加一段代码

 plugins: [ 
    new webpack.optimize.CommonsChunkPlugin("common.js"),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery" 
    }) 
  ]

4.在main.js里导入jQuery

import "jquery"

最后重新编译

npm run dev

我们可以发现运行成功了

导入bootstrap
同样，我们先从官网下载框架
在index.html中全局导入

注意，导入第三方文件后一定要重新npm run dev，否则无法生效
我们这里简单测试一个按钮组件

GPU云服务器云服务器 Vue.js vue.js 属性 vue.js自学 cdn vue.js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105271.html

web前端技术体系大全

以下为个人目前接触到的前端技术，欢迎大家补充。一、前端技术框架 1、Vue.js 官网：https://cn.vuejs.org/ Vue CLI：https://cli.vuejs.org/ 菜鸟教程：http://www.runoob.com/w3cnote... Nuxt.js：https://zh.nuxtjs.org/ 桌面应用Electron：https:...

RaoMeng 2019-08-23 15:53 评论0 收藏0
Javascript学习资源整理

摘要：教程系列廖雪峰的官方网站教程汤姆大叔的博客深入理解系列阮一峰的个人网站入门阮一峰的个人网站入门实例教程阮一峰的个人网站架构入门教程阮一峰的个人网站全栈工程师培训教程核心思想代码示例表单校验的基本写法小马入门课程文档系列技术文档教程系列廖雪峰的官方网站 - JavaScript教程 ⭐️⭐️⭐️⭐️⭐️汤姆大叔的博客 - 深入理解JavaScript系列阮一峰的个人网站 - ECMA...

xiaodao 2019-08-19 17:31 评论0 收藏0
搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

摘要：高颜值好用易扩展的微信小程序库，有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架，支持定制主题，主要服务于前台及中后台产品。基于后台管理系统。快来Star，在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

zhangrxiang 2019-08-29 13:59 评论0 收藏0
搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

摘要：高颜值好用易扩展的微信小程序库，有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架，支持定制主题，主要服务于前台及中后台产品。基于后台管理系统。快来Star，在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

source 2019-08-21 18:01 评论0 收藏0