從零開始教你用vue-cli一招引入jq和boostrap

CrazyCodes 發布于2019-08-22 16:13 / 1704人閱讀

摘要：和占了在以前的前端半壁江山如今是三分天下和有著成熟體系和架構那我們用如何引用和呢安裝腳手架腳手架工具快速構建項目架構。。全局安裝生成項目名為的的項目模板，自定義到文件夾中打開或者命令窗口初始化安裝依賴然后輸入。。

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從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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