使用vue-cli構建vue工程，及一些小坑的記錄

這篇文章主要記錄如何構建一個vue工程，及踩到過的坑
使用vue+webpack+vue-router+vuex+axios+elementUI+jQuery+一些jQuery插件

全部的代碼都在github上有https://github.com/EaVanCN/vu...，這是一個門戶網站的前端demo,使用假數據填充頁面，持續更新中。

1、使用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

一、本文使用vue-cli是經過npm來下載的，因此首先要有一個node的環境，在安裝完node以後，npm就會自動安裝在你的電腦中了，而後打開控制檯，輸入npm install -g vue-cli 全局安裝vue-cli。
二、在安裝完vue-cli以後，你就可以在控制檯使用vue命令了，進入到想建立工程的文件夾中，輸入vue init webpack-simple vue-project，會讓你工程名稱，描述，做者等信息，而後就會建立一個叫作vue-project的工程。
此時你會獲得一個以下的目錄結構。

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

2、組件的使用
咱們想對路由控制，會使用到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組件的使用方法，vue官網中有相關介紹。

3、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'
 },

而後就能使用element-UI了。

4、Vue引入jQuery及使用依賴jQuery的插件
使用vue這種mvvm的框架，對頁面的dom操做就沒有之前那麼關係了，jquery也就使的少了。沒用vue以前有不少使得順手的插件，在npm上可能並無，並且依賴jQuery,這時候就要把jQuery引到工程中來了，JQuery引到工程中來並不難，但發現並非能在每一個組件中直接使用$這個方法，也就不太好處理別的插件和jQuery的依賴關係。
這時候，能夠建立一個jquery-vendor.js文件，裏面內容爲：

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

而後再在main.js中import該文件import $ from '/jquery-vendor.js'，這樣就能夠全局使用$了。將這個import放在上面，也就可以處理插件與jQuery的依賴了。例如我使用了SuperSlider，直接將它的js放在assist/js中，而後再在inedx.html中使用script標籤引入就行。在每一個組件中都可以使用該插件了。

之後別的坑再進行記錄。