一、$mount()手动挂载
当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。
new Vue({
router,
render: h => h(App)
}).$mount("#app");
`
`new Vue({
el: '#app',
router,
render: h => h(App)
});解释： render: x => x(App)
这里的render: x =>x(App)是es6的写法
转换过来就是：暂且可理解为是渲染App组件
render:(function(x){
return x(App);
});二、mock数据
如果后端接口尚未开发完成，前端开发一般使用mock数据。
注意：新版的vue-cli 自动搭建的build 文件里没有dev-server.js 和 dev-client.js ，因此我们要在webpack.dev.conf.js 里配置
配置如下：
（1）复制data.json 到该项目下
（2）找到bulid目录下 webpack.dev.conf.js 找到 const portfinder = require('portfinder')，在其下添加mock 数据
// 添加mock 数据
const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件
var seller=appData.seller;
var goods=appData.goods;
var ratings=appData.ratings;
var apiRoutes = express.Router()
app.use('/api', apiRoutes)（3）接着找到 devServer 里的 watchOptions，其后紧跟
watchOptions: {
poll: config.dev.poll,
},
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})//接口返回json数据，上面配置的数据appData就赋值给data请求后调用
}),
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
}（4）设置保存后 npm run dev 运行 访问http://localhost:8080/api/seller 就可接收到 该路由对应的json 数据
三、关于路由 vue-router
* 直接定义路由
（1）首先定义路由
// 定义路由组件
const goods = { template: '<p>我是对应的goods下面的内容</p>' };
const seller = { template: '<p>我是对应的seller下面的内容</p>' };（2）创建路由实例
// 创建路由实例
var router = new VueRouter({
routes:[
// 路由重定向即设置默认路由
{path:'/',redirect:'/goods',component:goods},
{path:'/goods',component:goods},
{path:'/seller',component:seller}
]
});路由实例方法:
router.push({path:'goods'}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:'goods'}) //替换路由，不会往历史记录里面添加
// router.go('goods')（3）创建vue 实例
// 创建 vue 实例
const app=new Vue({
el:"#app", // 挂载元素
router
})（4）DOM 渲染
<body>
<div id="app">
<div class="nav">
<router-link to='/goods'>good</router-link>
<router-link to='/seller'>seller</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</body>注意：
查看效果时，发现动态的给当前路由 添加le一个router-link-active的类名,所以如果需要设置当前路由样式（比如：高亮）就可以直接在style里设置了* （main.js）引入路由组件
（1）引入路由文件
import goods from './components/goods/goods'
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'（2）创建路由实例 定义路由组件
const router = new VueRouter({
routes: [{
path: '/',
component: goods
},{
path: '/goods',
component: goods
}, {
path: '/ratings',
component: ratings
}, {
path: '/seller',
component: seller
}]，
linkActiveClass: 'active' // 将 router-link-active 改为 active（方便样式操作）
})（3）创建vue实例并挂载
new Vue({
el:"#app",
router,
template: '<App/>',
components: {
App
}
})四、axios 请求数据
（1）安装 axios
npm install axios（2）引入axios组件
import axios from 'axios'（3）axios 请求数据（在此之前创建一个接受数据的对sellerobj）
export default {
// 获取数据 准备 返回一个对象，后台获取数据后 赋予 该对象
data (){
return {
sellerobj:{}
}
},
created (){ // 创建之前 请求数据
axios.get('static/data.json').then((result) => {
console.log(result) // 控制台检查 数据存储在 result.data 里
this.sellerobj = result.data.seller // 将数据存到sellerobj里
})
}
}原文发布时间为：2018年01月19日
原文作者：前端喵
本文来源：开源中国 如需转载请联系原作者
