vue+webpack+vscode打造TODO應用

安裝visual studio code編輯器 https://code.visualstudio.com/Download
配置vscode
將用戶設置爲自動保存
Ctrl+~鍵可直接進入vscode的命令行
初始化成npm項目
，應該生成一個package.json文件；
安裝webpack和vue-loader
安裝缺乏的依賴
完成後，在相應的命令行目錄下就會新建成這樣
：
新建相應的文件，app.vue，編寫相應代碼。可是該文件不能直接在瀏覽器打開，因此新建一個webpack.config.js文件
用來打包前端資源
進行一些屬性配置
運行npm run build可能出錯
大體意思就是：未設置mode(模式)，請指定是「開發環境」仍是「生產環境」；css

如何解決呢？只須要在package.json中添加配置項：html
```
"scripts": {
    "start": " --mode development",
    "build": "--mode production",
  }
```
執行 npm start 處於開發中調試，有些是 npm run server，只是配置不一樣而已；執行 npm run build 打包項目，也就是打包成上線後的代碼；前端
再次運行後就不報錯了。vue
進行靜態資源文件vue類型，css,圖片類型等類型文件配置需安裝相應依賴，進行相應聲明。配置.styl類型的css預處理器stylus等react
進一步配置時安裝相應的依賴，使用命令npm i ....webpack

npm i css-loader style-loader file-loader stylus-loader styluses6
安裝webpack-dev-server包web
```
npm i webpack-dev-server
```
可以提升開發效率，指定的是開發環境npm

"dev": "webpack-dev-server --config webpack.config.js"

保證腳本同時使用在正式環境和開發環境中，須要根據不一樣環境作判斷json
安裝cross-env,設置一個環境變量，標識是開發環境仍是正式環境。做用是保證跨平臺時仍使用同一個腳本，聲明同一個開發環境

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
 "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

在webpack.config.js文件中進行配置，啓動的時候設置的腳本變量所有存在process.env這個對象裏，能夠設置不少變量名，均可以經過該對象讀取到。
設置host爲0.0.0.0的好處：可經過別的電腦或手機訪問本電腦的ip,設置爲localhost會有必定的侷限性。
安裝html插件
```
npm i html-webpack-plugin
```
做爲前端項目，沒有html入口是沒法打開的，因此安裝一個webpack的html插件

plugins是一個數組，有不少配置選項

plugins:[      //plugin的基礎配置
        new webpack.DefinePlugin({   //判斷環境，使用變量進行區分，在打包時使用正式環境
            'process.env':{
                NODE_ENV:isDev?'"development"' : '"production"'  //雙引號必定要加，不然會報錯
            }
        }),
        new HTMLPlugin()
    ]
}

開發環境有不少錯誤提醒，對於開發環境比較友好，可是正式打包時文件回國大，不利於加載速度，因此定義變量來區分打包版本。vue項目和react項目都要如此考慮。

此時能夠運行項目: npm run dev
網址改成localhost:8000

相關配置

webpack官方提供的配置#cheap-module-eval-source-map用來調試代碼。
代碼編寫的是es6代碼，直接在瀏覽器中調試是看不懂的，須要映射一下
重啓一下，從新編譯。

vue2

數據綁定，vue文件的開發方式

API重點

安裝postcss-loader

npm i postcss-loader autoprefixer babel-loader babel-core

在根目錄下新建 .babelrc 和postcss.config.js文件

postcss.config.js文件用來後處理css文件。當.styl類型的文件編譯成css文件後，用post來優化css代碼，經過一系列的逐漸來優化。

安裝.babelrc文件所需的配置文件，轉換env和jsx文件用的

npm i babel-preset-env babel-plugin-transform-vue-jsx

在webpack.config.js中加上相應的配置：

安裝缺乏的相應文件

npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx