在使用webpack构建的Vue项目中使用模板对象？

• 在webpack.config.js中添加resolve属性：
• [AppleScript] 纯文本查看 复制代码

  resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }

• ES6中语法使用总结
  • 使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export
  • 使用 import ** from ** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块
  • 使用箭头函数：(a, b)=> { return a-b; }
    
    
  在vue组件页面中，集成vue-router路由模块
  vue-router官网
  • 导入路由模块：
  • [AppleScript] 纯文本查看 复制代码

    import VueRouter from 'vue-router'

  • 安装路由模块：
  • [AppleScript] 纯文本查看 复制代码

    Vue.use(VueRouter);

  • 导入需要展示的组件:
  • [AppleScript] 纯文本查看 复制代码

    import login from './components/account/login.vue'
    
    import register from './components/account/register.vue'
    

  • 创建路由对象:
  • [AppleScript] 纯文本查看 复制代码

    var router = new VueRouter({
    
      routes: [
    
        { path: '/', redirect: '/login' },
    
        { path: '/login', component: login },
    
        { path: '/register', component: register }
    
      ]
    
    });
    

  • 将路由对象，挂载到 Vue 实例上:
  • [AppleScript] 纯文本查看 复制代码

    var vm = new Vue({
    
      el: '#app',
    
      // render: c => { return c(App) }
    
      render(c) {
    
        return c(App);
    
      },
    
      router // 将路由对象，挂载到 Vue 实例上
    
    });

  • 改造App.vue组件，在 template 中，添加router-link和router-view：
  • [AppleScript] 纯文本查看 复制代码

     <router-link to="/login">登录</router-link>
    
        <router-link to="/register">注册</router-link>
    
    
    
        <router-view></router-view>

    
    
  
  

楼主 这个帖子很棒噢！


重庆的小伙伴福音来啦
前端与移动开发学科强势入驻传智播客·黑马程序员重庆中心           

     大前端时代，助你成为IT行业紧缺人才！
     开班时间：2019年8月13日
     首期班特惠：基础班免费，首期就业班减免1000元 ！！  ！