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

一、      先安裝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下，引用的文件，將是全局的

測試：