1,理解vuecil工程目录
1.src 资源文件夹 写代码
2.router 路由配置文件
3.store 存储
4.view 视图
5.src里面的main 全局配置文件 用之前要导入(类似java)
5.App 根组件
6.package.json 记录安装过程 包含安装包,安装版本,启动项目指令
2,知道vue的根组件和组件的关系(根组件中嵌套组件)
3.知道路由如何配置
//路由配置文件
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import About2View from '../views/About2View.vue'
const routes = [
//Home
{
path: '/',
name: 'home',
component: HomeView
},
//About2
//自己添加的
{
path: '/about2',
name: 'about2',
component: () => import('../views/About2View.vue')
},
//About
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
HomeView
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
AboutView
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<script>
export default{
}
</script>
About2View
<template lang="">
<div>
这里是About2View页面
</div>
</template>
<script>
export default {
}
</script>
<style lang="">
</style>