vue-4项目实战

创建项目

下载最新版本HBuilder

src下App.Vue文件< template>html代码 < script>js代码 < style>样式

main.js文件

vue 路由 项目里的url，vue有专门的组件

项目结构

1.创建router/index.js设置

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../page/index/index.vue'//导入模块

Vue.use(Router)

export default new Router({
	//每个数组配置的值都是一个路由
  routes: [
    {
      path: '/',
      name: 'Index',//路由名称
      component: Index//展示的模块
    }
  ]
})

2.在App.vue文件中引入router-view

3.main.js中添加routrer

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

测试：启动终端会报npm install --save vue-router 再另一个终端进行下载 重新启动即可 访问localhost:8080
作用有些类似于maven

细分html代码，通过组件

1.page/index目录下创建componet目录创建header.vue文件

2.index.vue进行引用

主页向副业传递参数

index

传输一个集合