這篇文章主要記錄如何構建一個vue工程，及踩到過的坑

使用vue+webpack+vue-router+vuex+axios+elementUI+jQuery+一些jQuery外掛

一、使用vue-cli建立一個vue的工程
涉及到的命令包括：

	
        $ npm install -g vue-cli				//1
	$ vue init webpack vue-project		                //2
	$ cd vue-project					//3
	$ npm install						//4
	$ npm run dev						//5

1、本文使用vue-cli是通過npm來下載的，所以首先要有一個node的環境，在安裝完node之後，npm就會自動安裝在你的電腦中了，然後開啟控制檯，輸入npm install -g vue-cli 全域性安裝vue-cli。
2、在安裝完vue-cli之後，你就能夠在控制檯使用vue命令了，進入到想建立工程的資料夾中，輸入vue init webpack-simple vue-project，會讓你工程名稱，描述，作者等資訊，然後就會建立一個叫做vue-project的工程。
此時你會得到一個如下的目錄結構。

4、Package.json中有該工程所依賴的各種包，執行npm install，會自動安裝這些包。
5、最後執行npm run dev，會在你本地localhost:8080啟動一個服務，你能開啟瀏覽器訪問它。

二、元件的使用
我們想對路由控制，會使用到vue-router，統一管理狀態，會使用到vuex，想對頁面上一些功能進行復用，也會寫一些自己的元件，如何在我們的工程中使用這些元件呢？

例如使用vue-router，首先要在工程中引入vue-router,使用命令npm install vue-router --save-dev ,會從npm中下載最新版本的vue-router，並將相關資訊儲存在package.json中。
然後再在main.js中引入vue-router :

import VueRouter from 'Vue-router'
Vue.use(VueRouter);

這樣就能使用vue-router了。
也並不是所有能從npm上下載下來的元件都能使用Vue.use()，比如axios就不行，當你使用import axios from 'axios'引入axios後，他並不能使用Vue.use(axios)來將它引入工程，對於axios來說，使用Vue.prototype.$http = axios 就可以在其他頁面直接this.$http使用axios的時候。
對於自己寫的字尾為.vue的元件，需要vue-loader支援，在引入vue-loader之後，就能使用自己寫的元件了，vue元件的使用方法，

三、element-UI的使用
element-UI也像vue-router一樣，下載之後import進工程，但同時還要import 'element-ui/lib/theme-default/index.css'，使用到css檔案，就要使用到css-loader和style-loader。
除此之外，element-UI中還要使用file-loader解析.woff的圖示，故需要下載這幾個loader，並且在webpack.config.js中配置。

 {
       test: /\.css$/,
       loader: 'style-loader!css-loader'
 },
 {
       test: /\.css$/,
       loader: 'style-loader!css-loader'
 },
 {
       test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
       loader: 'file-loader'
 },

四、Vue引入jQuery及使用依賴jQuery的外掛
使用vue這種mvvm的框架，對頁面的dom操作就沒有以前那麼關係了，jquery也就使的少了。沒用vue之前有很多使得順手的外掛，在npm上可能並沒有，而且依賴jQuery,這時候就要把jQuery引到工程中來了，JQuery引到工程中來並不難，但發現並不是能在每個元件中直接使用$這個方法，也就不太好處理別的外掛和jQuery的依賴關係。
這時候，可以建立一個jquery-vendor.js檔案，裡面內容為：

import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $

以後別的坑再進行記錄。