vue+webpack入門講解
前言
用vue和webpack實現應該Todo項目，同時對構建過程進行一下小結。參考文檔見文末的 Reference。
一、關於包和npm
1 npm
簡單來講，就是 函數——模塊腳本——包——庫的組成關系，我們開發時，需要引入其他人的第3方包，自己在html文檔裏一個一個引入太麻煩，所以需要一個集合了很多第3方功能的管理工具，即npm。此外，npm 是依附於 node.js 的。
2 package.json文件
它的作用是：
- 作為一個描述文件，描述了你的項目依賴哪些包
- 允許我們使用 “語義化版本規則”, 指明項目裏依賴包的版本
- 讓你的構建更好地與其他開發者分享，便於重復使用
創建的方法是,在項目根目錄下執行：
npm init
我們要在package.json 文件中指定項目依賴的包，這樣別人在拿到這個項目時才可以使用 npm install下載。有了package.json，我們就能讓其他人在更方便的下載和使用所有 該項目需要的依賴包。可以這麽理解：package.json文件相當於給他人使用時，提供了一份安裝所有依賴包的自動下載索引。
包的依賴方式有：
- dependencies：在生產環境中需要用到的依賴;
- devDependencies：在開發、測試環境中用到的依賴
3 安裝package
使用 npm 安裝 package 有兩種方式：
- 本地（當前項目路徑）安裝 ;
- 全局安裝
選擇哪種安裝方式，決定了將如何使用這個包，其中，
- npm install 默認就是安裝到本地的;
- 如果在項目裏有 package.json文件，運行 npm install 後它會查找文件中列出的依賴包，然後下載符合語義化版本規則的版本；
- npm install 默認會安裝 package.json中 dependencies 和 devDependencies 裏的所有模塊。
安裝參數 --save 和 --save -dev：
添加依賴時我們可以手動修改 package.json 文件，添加或者修改 dependencies devDependencies 中的內容即可。
另一種更酷的方式是用命令行，在使用 npm install 時增加 --save 或者 --save -dev 後綴：
- npm install
- npm install
4 npm run命令
npm 還可以直接運行 package.json中 scripts指定的腳本，具體內容見文末的參考文檔。
二、vscode插件配置
1 安裝ESlint
主要是用來規範代碼風格，配置步驟是：
??S1 VSCode 擴展面板並搜索 ESLint 擴展，然後點擊安裝;
??S2 npm init + npm install eslint --save-dev；
??S3 在 package.json文件裏，設置 script腳本命令；
??S4 運行 script腳本命令，從而創建 檢測規則文件 .eslintrc.js；
??S5 運行 script腳本命令，從而運行檢測；
??S6 安裝 eslint-plugin-html插件，讓 ESLint 檢測Vue 組件裏的JS；
??S7 最後設置一下 vscode，在用戶設置中修改 ESLint 的相關配置並保存
2 安裝vetur
??S1 VSCode 擴展面板並搜索vetur擴展;
??S2 在用戶設置中修改 vetur的相關配置並保存；
二、安裝vue和webpack相關依賴
1 安裝vue和Webpack
安裝Vue：npm install vue --save
安裝Webpack：npm install webpack --save-dev
2 安裝Webpack裏處理vue組件的loader
安裝vue-loader:
讓webpack可以處理轉化vue的組件為—— 瀏覽器可以識別的JS模塊；
npm install --save-dev vue-loader
安裝 css-loader 和 vue-template-compiler：
因為vue-loader又 依賴於 第3方的 css-loader 和 vue-template-compiler，所以也需要下載安裝他們：
npm install --save-dev css-loader vue-template-compiler
三、新建 .vue項目，開始寫vue的組件
略過
四 配置webpack.config.js文件
上文安裝了 vue-loader等第3方依賴，接下來就要利用webpack去引入他們。
S1 寫vue組件；
S2 把組件綁定到 vue實例上（也是webpack的入口文件）；
S3 設置webpack.config.js文件，配置出入口；
S4 設置webpack.config.js文件，配置相對應文件的 解析loader；
S5 在package.json裏設置運行腳本的指令，從而調用webpack
四 Reference
??1 npm 與 package.json 快速入門;
??2 關於 npm 命令使用的好習慣;
??3 Eslint入門教程;
??4 使用 VSCode + ESLint 實踐前端編碼規範；
??5 ESLint官方文檔；
??6 Vetur：VSCode下強大的Vue開發工具；
??7 搭建Webpack+Vue項目；
??8 vue-loader是什麽；
??9 render: h => h(App) 的含義；
vue+webpack入門講解