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修改就重启所以我们开发环境配置一个代理，这样开发环境就可以不需要编译，就能与后台数据传输。
（重点）
这里说明下，有的同学不理解 我们一般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":'@ctitle'
}],
});
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>
}
}
]
})
