本篇文章將從無到有的通過一個demo來展示vue-loader的基本用法，會涉及到部分webpack，npm等知識。
首先介紹一下最基本的文件結構，因為正式項目中的文件資源都比較多，本項目只是最基本的演示項目，所以會有所偏差。
其中，main.js是項目的入口文件，package.json是工程文件，主要有項目依賴、名稱、配置等信息，webpack.config.js是webpack配置文件。
新建項目
首先第一步是新建項目相關的文件夾和文件，需要在項目文件夾的根目錄建下面4個文件
然后通過npm在項目根目錄生成工程文件：npm webpack --yes，命令執行完畢后，在項目根目錄會發現多了一個package.json的文件。
webpack准備工作
1，在項目根目錄執行命令安裝webpack：npm install webpack webpack-dev-server --save-dev
2，修改工程文件，添加熱加載功能：
然后再次執行命令即可：npm run dev
3，根目錄執行命令下載vue-loader：npm install vue-loader --save-dev
4，根目錄執行命令下載vue文件解析包：npm install vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 --save-dev
5，為了將ES6編譯為ES5，還需要下載相關包文件：npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
6，安裝vue：npm install vue --save
基本操作
在項目相關文件建完后，開始一些基本的操作。
1，在webpack.config.js文件中配置入口文件
2，在index.html中引入剛剛的出口文件。
3，在main.js文件中使用ES6語法引入相關模板並注冊一個vue實例。
第一個頁面
現在，我們開始使用.vue文件寫vue相關的內容，需要說明的是，.vue文件又三部分組成
- <template>：用於寫之前我們寫在body里面的html內容。
- <script>：用於寫所有與js相關內容
- <style>：用於寫頁面樣式。
現在，第一個簡單的demo就完成 。