详解vue-cli快速构建项目以及引入bootstrap、jq


Posted in Javascript onMay 26, 2017

vue-cli脚手架工具快速构建项目架构:

。。首先默认了有已经安装了node。。。

 npm install -g vue-cli                   全局安装vue-cli

 vue init webpack cnm                  生成项目名为cnm的的项目模板,cnm自定义

npm install                                   到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖

此时文件夹目录应该是这样

详解vue-cli快速构建项目以及引入bootstrap、jq

然后输入npm run dev。。不出意外浏览器会自动弹出一个欢迎页面,如果不自动弹出就打开http://localhost:8080

详解vue-cli快速构建项目以及引入bootstrap、jq

到这里就可以在对应的文件中修改代码开发项目了。。。但是如果要引入一些插件或者框架怎么办呢?

引入jq:

输入 npm install jQuery --save-dev      用npm下载jq依赖、

找到build文件夹下的webpack.base.conf.js文件打开,修改配置:

1、加入webpack对象:

var webpack=require('webpack');

2、在module.exports里面加入:

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

3、在入口文件main.js中加入

import $ from 'jquery'

全局引入jq

引入bootstrap:

1、修改webpack.base.conf.js文件:

alias: { 
   'vue$': 'vue/dist/vue.esm.js', 
   '@': resolve('src'), 
   'assets': path.resolve(__dirname, '../src/assets'), 
   'jquery': "jquery/src/jquery" 
  }

2、在入口文件main.js中加入:

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

3、在assets文件目录中拷贝bootstrap各种文件

详解vue-cli快速构建项目以及引入bootstrap、jq

试试bootstrap引入成功没:

打开hello.vue文件

替换组件模板

<template> 
 <nav class="navbar navbar-default" role="navigation"> 
  <div class="container-fluid"> 
   <!-- Brand and toggle get grouped for better mobile display --> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ msg }}</a> 
   </div> 
 
   <!-- Collect the nav links, forms, and other content for toggling --> 
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li> 
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li> 
     <li class="dropdown"> 
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> 
       <li class="divider"></li> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >One more separated link</a></li> 
      </ul> 
     </li> 
    </ul> 
    <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li> 
     <li class="dropdown"> 
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> 
      </ul> 
     </li> 
    </ul> 
   </div><!-- /.navbar-collapse --> 
  </div><!-- /.container-fluid --> 
 </nav> 
</template>

如果引入成功

详解vue-cli快速构建项目以及引入bootstrap、jq

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
js实现分页功能
May 24 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
js实现随机数小游戏
Jun 28 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 #Javascript
jQuery导航条固定定位效果实例代码
May 26 #jQuery
mongoose中利用populate处理嵌套的方法
May 26 #Javascript
Angularjs修改密码的实例代码
May 26 #Javascript
详解vue.js的devtools安装
May 26 #Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 #Javascript
vue.js获取数据库数据实例代码
May 26 #Javascript
You might like
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
Position属性之relative用法
2015/12/14 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Jupyter加载文件的实现方法
2020/04/14 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
Pandas的数据过滤实现
2021/01/15 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
春风行动实施方案
2014/03/28 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
节约用水演讲稿
2014/05/21 职场文书
关于安全的标语
2014/06/10 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
Golang并发工具Singleflight
2022/05/06 Golang