vue+webpack入門講解

前言

用vue和webpack實現應該Todo項目，同時對構建過程進行一下小結。參考文檔見文末的 Reference。

1、關於包和npm

1 npm

簡單來說，就是 函數——模塊腳本——包——庫的組成關係，咱們開發時，須要引入其餘人的第3方包，本身在html文檔裏一個一個引入太麻煩，因此須要一個集合了不少第3方功能的管理工具，即npm。此外，npm 是依附於 node.js 的。

2 package.json文件

它的做用是：

1. 做爲一個描述文件，描述了你的項目依賴哪些包

1. 容許咱們使用 「語義化版本規則」, 指明項目裏依賴包的版本
2. 讓你的構建更好地與其餘開發者分享，便於重複使用

建立的方法是,在項目根目錄下執行：

npm init

咱們要在package.json 文件中指定項目依賴的包，這樣別人在拿到這個項目時纔可使用 npm install下載。有了package.json，咱們就能讓其餘人在更方便的下載和使用全部 該項目須要的依賴包。能夠這麼理解：package.json文件至關於給他人使用時，提供了一份安裝全部依賴包的自動下載索引。

包的依賴方式有：

1. dependencies：在生產環境中須要用到的依賴;

1. devDependencies：在開發、測試環境中用到的依賴

3 安裝package

使用 npm 安裝 package 有兩種方式：

• 本地（當前項目路徑）安裝 ;
• 全局安裝

選擇哪一種安裝方式，決定了將如何使用這個包，其中，

1. npm install 默認就是安裝到本地的;

1. 若是在項目裏有 package.json文件，運行 npm install 後它會查找文件中列出的依賴包，而後下載符合語義化版本規則的版本；
2. npm install 默認會安裝 package.json中 dependencies 和 devDependencies 裏的全部模塊。

安裝參數 --save 和 --save -dev：

添加依賴時咱們能夠手動修改 package.json 文件，添加或者修改 dependencies devDependencies 中的內容便可。

另外一種更酷的方式是用命令行，在使用 npm install 時增長 --save 或者 --save -dev 後綴：

1. npm install --save 表示將這個包名及對應的版本添加到 package.json的 dependencies

1. npm install --save-dev 表示將這個包名及對應的版本添加到 package.json的 devDependencies

4 npm run命令

npm 還能夠直接運行 package.json中 scripts指定的腳本，具體內容見文末的參考文檔。

2、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的相關配置並保存；

2、安裝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

3、新建 .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) 的含義；