npm教程_腳手架原理以及bootstrap引入

格式：vue init <templateName> <ProjectName>

例子：vue init webpack vue02

運行上面的命令后，腳手架幫忙按照webpack模板生成出以上目錄

接着運行npm install 安裝依賴,

腳手架自動去讀取package.json

 

自動從網上下載依賴的模塊，並且生成一個

node_modules目錄

開始運行npm run dev,它會自動執行

[build/dev-server.js]

 

1. webpack對源碼進行編譯打包，並且返回compiler對象
2. 創建express服務器(類似於tomcat),提供靜態文件的web服務,啟動端口默認是8080

 

 

 

當我們寫完程序，代碼放到src目錄下

當斷開express服務器，發現無法訪問已經已經編譯后的compiler對象，我們希望的是能夠幫從新編譯出一個靜態文件。所以運行另外一條命令

npm run build 執行的build/build.js文件

1. 自動刪除目錄
2. 執行webpack構建編譯文件，然后保存dist目錄
3. 輸出相關的信息

 

引入bootstrap

1、      先安裝npm install jquery --save-dev

在modules目錄下，自動生成了jquery目錄

編輯package.json發現自動增加jquery的依賴（不需要人手操作）

手動編輯webpack.base.conf.js

在module.exports里面加入：

plugins: [ 

  new webpack.ProvidePlugin({ 

    $:"jquery", 

    jQuery:"jquery", 

    "windows.jQuery":"jquery" 

  }) 

]  

 

到此webpack已經搞定了jquery的引用，下面就是自己src的使用

在App.vue 編寫測試jquery代碼，是成功。

到全局目錄，復制bootstrap的這3個文件，

然后粘貼到src\assets 目錄下

 

在main.js下，引用的文件，將是全局的

測試：