详解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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
基于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实现链结人气统计
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
jquery foreach使用示例
2013/09/12 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python迭代器的使用方法实例
2013/11/21 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
大学三年的自我评价
2013/12/25 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
企业出纳岗位职责
2014/03/12 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android