vue笔记

vue笔记

webpack

相当于maven，将一个个程序打包，需要用的时候导入

vue-route路由

后端将重定向和转发的操作交给了vue-route路由来做

导入导出

• import导入

导入app组件和vue组件一样

import Vue from 'vue'
import App from './App'

• export 导出

export default {
  name: 'App',
  components: {
    HelloWorld
  }

自定义组件

• 新建一个vue
• 导入导出
• scoped作用域为当前页面

index.js

每个文件下都有一个index.js，不一定是主页面，可能是主配置

router配置顺序

• 新建router文件，新建index.js主配置
• 导入依赖

import Vue from 'vue'
import VueRouter from 'vue-router'

import compent from '../components/compent'
import main from '../components/main'

• 安装路由

  • 配置路由

  • //配置router并导出
    export default new VueRouter({
      //配置路由
      routes:[
        {
          //路由路径
          path:'/conpent',
          //配置名字
          name:'conpent',
          //路由跳转组件
          components:'compent'
        }
      ]
    
    
    })
    

• 使用路由

  • 在main.js中导入自定义的路由：

    import router from './router'
    

  • 使用路由

  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })
  

  • 在App.vue中使用路由