webpack配置文件(webpack.base.conf.js):

module.exports = { entry: { app: './src/main.js' }, ...... }
App.vue

<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'app', components: { } } </script>
main.js

1 import babelpolyfill from 'babel-polyfill' 2 import Vue from 'vue' 3 import App from './App' 4 import ElementUI from 'element-ui' 5 import 'element-ui/lib/theme-default/index.css' 6 import VueRouter from 'vue-router' 7 import store from './vuex/store' 8 import Vuex from 'vuex' 9 import NProgress from 'nprogress' 10 import 'nprogress/nprogress.css' 11 import routes from './routes' 12 import Mock from './mock' 13 //Mock.bootstrap(); //会影响http请求 14 import 'font-awesome/css/font-awesome.min.css' 15 16 Vue.use(ElementUI) 17 Vue.use(VueRouter) 18 Vue.use(Vuex) 19 20 NProgress.configure({ showSpinner: false }); 21 22 const router = new VueRouter({ 23 routes 24 }) 25 26 /* 27 router.beforeEach((to, from, next) => { 28 //NProgress.start(); 29 if (to.path == '/login') { 30 sessionStorage.removeItem('user'); 31 } 32 let user = JSON.parse(sessionStorage.getItem('user')); 33 if (!user && to.path != '/login') { 34 next({ path: '/login' }) 35 } else { 36 next() 37 } 38 }) 39 */ 40 //router.afterEach(transition => { 41 //NProgress.done(); 42 //}); 43 44 new Vue({ 45 //el: '#app', 46 //template: '<App/>', 47 router, 48 store, 49 //components: { App } 50 render: h => h(App) 51 }).$mount('#app')
$mount()手动挂载
当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;
假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。例如:
<div id="app">
{{a}}
</div>
<button onclick="test()">挂载</button>
<script>
var obj = {a: 1}
var vm = new Vue({
data: obj
})
function test() {
vm.$mount("#app");
}
初始,显示的是{{a}}
当点击按钮后,变成了1
参考http://blog.csdn.net/qq20004604/article/details/52303754