详解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 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
ajax取消挂起请求的处理方法
2013/03/18 PHP
Java中final关键字详解
2015/08/10 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
python提取内容关键词的方法
2015/03/16 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python json格式化打印实现过程解析
2020/07/21 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
保护动物倡议书
2014/04/15 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL