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目錄下

編輯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下，引用的文件，將是全局的

測試：

隨便挑1個vue文件，寫一個button，顯示正常。

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