vue2.0配置 https://github.com/wike933/vuebook
前言： 學習VUE幾個月,看了很多例子和資料，vue雖然中文文檔比較多，但是都是一些零散的教程，我這裏打算寫一本完整的VUE2.0的開發教程（因為時間有限，每天更新一小塊，希望大家支持） 本人QQ ：200569525 你想學什麽，或者有什麽疑問 可以聯系我
正文：
第一步安裝vue
我們一般使用vue-cli
全局安裝 vue-cli
$ npm install --global vue-cli
創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
安裝依賴
$ cd my-project $ npm install $ npm run dev
這個雖然可以運行，但是根據現有開發環境有些地方需要配置（例如靜態資源目錄,後臺數據代理）
進入到目錄 config 打開index.js文件
找到 assetsSubDirectory: ‘./‘, 這裏配置成當前目錄，意思時靜態文件夾按照./為資源根目錄
找到 index: path.resolve(__dirname, ‘../../dist/index.html‘),設置打包後的HTML路徑
找到 assetsRoot: path.resolve(__dirname, ‘../../dist‘), 設置打包後資源目錄
找到 port:8080,這裏是設置開發環境的服務器斷口（可以設置成3000）
找到 proxyTable
（重點）
這裏說明下，有的同學不理解 我們一般vue-cli開發是啟動npm run dev 這個時候默認開啟是 http://localhost:8080 或者http://localhost:3000, 這個時候如果假設我要和後臺交互發送AJAX這個時候就跨域了（因為後臺端口不是這2個，一個端口不能啟動2個應用程序），如果不配置代理就無法請求，如果要請求只能 npm run bulid 編譯打包，放到服務器（後臺）的靜態資源目錄，這樣修改就需要每次都編譯，如果配置了代理 使用開發環境這樣修改就及時更新（ http://localhost:8080 這樣搭建的服務器你vue修改 他會及時反應），開發效率就非常高
proxyTable: {
‘/api‘ :{
target: ‘http://127.0.0.1:3000‘, // 目標域名
pathRewrite:{"^/api":""},
secure:false
}
},
以上配置是 當你AJAX請求 假設請求/api/xxx的連接時，系統會自動代理到 ** 127.0.0.1:3000/xxx** 下（如果請求不是以/api開頭那不進行重定向，訪問的還是localhost+端口），這樣代理就轉發， 我們一般在main.js定義一個全局變量 xhr="/api" 然後ajax裏面寫 $.get(xhr+"/test/"),在正式環境將xhr賦值為空字符串，這樣開發環境使用代理， 非開發環境使用正式路徑。
重點
這個地方很多人忘記改，很坑。會導致靜態資源渲染時候出錯。提醒大家一定要改 進入 build 打開 dev-server.js 找到
app.use(staticPath, express.static(‘./static‘))
替換成
app.use(staticPath, express.static(‘./‘))
這樣上面配置的靜態資源就是根目錄開始，不然需要多個static目錄
###下面講解vue開發以及一些技巧
首當其中的是 main.js
import Vue from ‘vue‘
import App from ‘./App‘ //引入根模塊
import router from ‘./router‘ //引入路由
import store from ‘./store/‘ //引入全局數據管理
window.xhr="/api" 定義全局屬性，用於AJAX前綴
如果需要造假數據 index.html 需要引入 <script src="http://mockjs.com/dist/mock.js"></script>
var Random = Mock.Random
Random.ctitle()
var data = Mock.mock({
‘list|8‘: [{
‘id|+1‘: 1,
"title":[email protected]
}],
});
Mock.mock("/notice.json", function(options) {
console.log(options)
return data
})
這個時候你就可以 $.get(‘/notice.json/‘)獲得假數據，關於mock的用法詳情請參考官網 http://mockjs.com/
註意
new Vue({
el: ‘#app‘,
router,
store,
template: ‘<App/>‘,
components: { App }
})
以上代碼必須在mock的邏輯之後，不然會出現請求404
//這裏寫 mock代碼
/*
所有mock代碼全部寫完，這個時候綁定vue插件
*/
new Vue({
el: ‘#app‘, //綁定到指定Id的元素下（可以不管）
router, //這裏是註冊路由（這個寫法等於 router:router）
store, //這裏是註冊全局數據管理的註入 這個寫法等於 {store：store}
template: ‘<App/>‘, //這個定義魔板 默認就行
components: { App } //這裏是引入根組件 （默認是app.vue）這個寫法等同於 components: { App:App}
###根組件 app.vue
<template>
<div id="app">
<router-view></router-view> //這個定義路由模板
</div>
</template>
<script>
export default {
name: ‘app‘ //這裏定義組件名
}
</script>
<style>
</style>
註意
這裏的template必須有一個根元素
<template>
<div id="app">
<router-view></router-view>
</div>
<div id="app2">
<router-view></router-view>
</div>
</template>
這種情況是不允許的
現在我們是單一<router-view>假設我一個模板中需要多個組件路由我們可以這樣
<div>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>
路由文件./router/index.js(詳細的等會介紹）這樣寫
import Vue from ‘vue‘
import Router from ‘vue-router‘//引入路由
import Hello from ‘@/components/Hello‘ //引入組件
import Hello1 from ‘@/components/Hello1‘ //引入組件
import Hello2 from ‘@/components/Hello2‘ //引入組件
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/‘, //路由路徑
name: ‘Hello‘, //路由別名
components: { //路由包含的組件
default: Hello, //這個是默認的 對應 <router-view class="view one"></router-view>
a: Hello1, //這個對應 <router-view class="view two" name="a"></router-view>
b: Hello2 //這個對應 <router-view class="view two" name="b"></router-view>
}
}
]
})vue2.0配置 https://github.com/wike933/vuebook