vue-loader

 本篇文章將從無到有的經過一個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就完成 。