网站建设背景介绍,开发流程图,网站开发项目的简介,网站制作的流程包括哪些文章目录 单页应用程序#xff1a;SPA- Single Page Application路由的介绍VuePouter的介绍VueRouted 的使用 组件目录存放问题#xff08;组件分类#xff09; 单页应用程序#xff1a;SPA- Single Page Application
单页应用#xff08;SPA#xff09;:所有功能在一个… 文章目录 单页应用程序SPA- Single Page Application路由的介绍VuePouter的介绍VueRouted 的使用 组件目录存放问题组件分类 单页应用程序SPA- Single Page Application
单页应用SPA:所有功能在一个html页面 上实现
优点按需更新性能高开发效率高用户体验好缺点学习成本首屏加载慢不利于SEO应用场景系统类网站/内部网站/文档类网站/移动端站点 路由的介绍
生活中的路由设备和ip的映射关系
VuePouter的介绍 目标认识插件 VuePouter 掌握 VuePouter 的基本使用步骤 作用修改地址栏路径时切换显示匹配的组件 说明Vue官方的一个路由插件是一个第三方包 官网https://v3.router.vuejs.org/zh/ VueRouted 的使用 5个基础步骤固定 ①下载下载VuePouter模块到当前工程 yarn add vue-roter3.6.5 ②引入import VuePouter from ‘vue-router’ ③安装注册Vue.use(VuePouter) ④创建路由对象const router new VuePouter() ⑤注入将路由对象注入到new Vue实例中建立关联 main.js
import Vue from vue
import App from ./App.vue// 5个基础步骤固定
// ①下载下载VuePouter模块到当前工程
// yarn add vue-roter3.6.5
// ②引入
// import VuePouter from vue-router
// ③安装注册
// Vue.use(VuePouter)
// ④创建路由对象
// const router new VuePouter()
// ⑤注入将路由对象注入到new Vue实例中建立关联
import VueRouter from vue-router
Vue.use(VueRouter) //VueRouter插件初始化
const router new VueRouter()Vue.config.productionTip falsenew Vue({render: h h(App),router:router
}).$mount(#app)两个核心步骤 ①创建需要的组件views目录配置路由器规则 Find.vue My.vue friend.vue ②配置导航配置路由出口路由匹配的组件显示的位置 App.vue
templatedivdiv classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a/divdiv classtop!-- 路由出口 → 匹配的组件所展示的位置 --router-view/router-view/div/div
/templatescript
export default {};
/scriptMy.vue
templatedivp我的音乐/pp我的音乐/pp我的音乐/pp我的音乐/pp我的音乐/p/div
/templatescript
export default {name:MyMusic
}
/scriptstyle/styleFind.vue
templatedivp发现音乐/pp发现音乐/pp发现音乐/pp发现音乐/pp发现音乐/p/div
/templatescript
export default {name:FindMusic
}
/scriptstyle/styleFriend.vue
templatedivp发现音乐/pp发现音乐/pp发现音乐/pp发现音乐/pp发现音乐/p/div
/templatescript
export default {name:FindMusic
}
/scriptstyle/styleimport Vue from vue
import App from ./App.vue// 5个基础步骤固定
// ①下载下载VuePouter模块到当前工程
// yarn add vue-roter3.6.5
// ②引入
// import VuePouter from vue-router
// ③安装注册
// Vue.use(VuePouter)
// ④创建路由对象
// const router new VuePouter()
// ⑤注入将路由对象注入到new Vue实例中建立关联//2个核心步骤
//①创建需要的组件views目录配置路由器规则
//②配置导航配置路由出口路由匹配的组件显示的位置
import Find from ./views/Find
import My from ./views/My
import Friend from ./views/Friend
import VueRouter from vue-router
Vue.use(VueRouter) //VueRouter插件初始化
const router new VueRouter({//routes 路由规则们routes:[{path:/find,component:Find},{path:/my,component:My},{path:/friend,component:Friend}]})Vue.config.productionTip falsenew Vue({render: h h(App),router:router
}).$mount(#app)
组件目录存放问题组件分类
组件目录存放问题 注意.vue文件本质无区别 路由相关的组件为什么放在views目录 组件分类 .vue文件分成两类一种是页面组件一种是复用组件 这一整个就是页面组件 这些是复用组件 分类开来更易维护 src/views文件夹 → 页面组件-页面展示-路由配合使用src/components文件夹 → 复用组件-展示数据-常用于复用 总结
