• vue-cli+webpack在生成的项目中使用bootstrap方法(二)


    vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多。

    当然是可以更省力些,可以通过npm安装bootstrap,然后用import直接导入bootstrap的方式进行整合,因为vue-loader能自动从node_modules下加载库,非常方便。

    完整过程实现一遍。

    脚手架生成项目(同方法一)

    执行命令用webpack模板生成一个名为vuestrap的项目(名字任意)

    vue init webpack vuestrap

    在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意)。

    ? Project name vuestrap
    ? Project description A Vue.js project
    ? Author 省略
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? No
    ? Setup unit tests with Karma + Mocha? No
    ? Setup e2e tests with Nightwatch? No

    选项选完,项目也就生成了。

    执行命令,安装脚手架创建的组件

    npm install

    安装jquery(同方法一)

    bootstrap是依赖jquery的,所以就先装上jquery,这里用的版本是1.11.3。

    稍后在配置的时候,是以webpack插件的方式进行打包,所以这里直接用npm进行安装,因为插件方式打包的组件都是require进来的。

    执行命令,并保存到package.json中

    npm install jquery@1.11.3 --save-dev

    注:如果想查看npm上jquery有哪些版本,可以执行命令:

    npm view jquery versions

    安装bootstrap (方法二)

    这里用的版本是3.3.0。

    执行命令,即可安装完成。

    npm install bootstrap@3.3.0 --save-dev

    配置jquery (同方法一)

    将jquery以插件打包,需要为webpack的plugins进行插件设置。

    在build/webpack.base.conf.js文件中,在整个配置对象的末尾增加plugins配置。

    在webpack.base.conf.js中的配置项,可以在dev和build出来的pro版本中都有效。

    下面的配置其实就是变量名的真正指向设置,这样,在页面中对jquery的各种名字的调用就会有效,否则bootstrap跑不起来。

      plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "windows.jQuery": "jquery"
        })
      ]

    引用bootstrap(方法二)

    在src/main.js文件的顶部加入如下对bootstrap主要文件的引用,注意这里的路径,不在是从src/assets加载,而是换成了从node_modules加载。

    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min.js'

    配置bootstrap(同方法一)

    因为bootstrap除了js和css文件外,还有字体文件需要一并打包,默认生成的webpack.base.conf.js中的moudle->rules设定中都已经包含对字体文件的打包设置,所以无需修改,很人性啊。

    写完后,执行命令,运行效果。

    npm run dev

    效果:

    点击按钮,可以打开modal。

     

    代码

    End

  • 相关阅读:
    vue中的Data为什么必须是一个函数
    单页面应用的优缺点
    数组去重
    mvvm框架
    前端计算精确度问题处理JS
    shell 修改json配置。
    ubuntu 两个文件夹合并
    fdisk、df与du的区别
    新买移动磁盘,使用前需要什么操作?
    Springboot+MybatisPlust+ControllerAdvice ;Mybatis_Plus多数据源,controller统一异常返回
  • 原文地址:https://www.cnblogs.com/kongxianghai/p/6910133.html
Copyright © 2020-2023  润新知