从零开始教你用vue-cli一招引入jq和boostrap

CrazyCodes 发布于2019-08-22 16:13 / 1687人阅读

摘要：和占了在以前的前端半壁江山如今是三分天下和有着成熟体系和架构那我们用如何引用和呢安装脚手架脚手架工具快速构建项目架构。。全局安装生成项目名为的的项目模板，自定义到文件夹中打开或者命令窗口初始化安装依赖然后输入。。

jq和boostrap占了在以前的前端半壁江山

如今是vue react augular 三分天下

jq和boostrap有着成熟体系和架构那我们用vue-cli如何引用jq和boostrap呢？

1 安装vue-cli脚手架

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

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

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

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

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

然后输入npm run dev。。不出意外浏览器会自动弹出一个欢迎页面，如果不自动弹出就打开http://localhost:8080
如果成功运行就会看到vue的logo

2 引入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了

3 引入boostrap

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各种文件

试试bootstrap引入成功没：

打开hello.vue文件

替换组件模板

如果引入成功，下边导航栏就会出现

GPU云服务器云服务器教你用教你用阿里云开我的世界服务器从零开始 linux从零开始

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

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

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
Vue.js最佳实践（五招让你成为Vue.js大师）

摘要：但如果你想更加高效地使用来开发，成为大师，那下面我要传授的这五招你一定得认真学习一下了。虽然损失了一丢丢性能，但避免了无限的。所以我们需要设置，这些默认行为将会被去掉以上两点的优化才能成功。陆续可能还会更新一些别的招数，敬请期待。本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我，有空就给你们写。对大部分人来说，掌握Vue.j...

CocoaChina 2019-08-22 15:52 评论0 收藏0