Vue-CLI 项目中相关操作
程序员文章站
2022-03-21 21:30:25
0830总结 Vue CLI 项目中相关操作 一.前台路由的基本工作流程 目录结构 App.vue:根组件 Nav.vue:小组件 PageFirst.vue:页面组件 PageSecond.vue:页面组件 router.js:路由配置 二.配置全局样式文件 目录结构 global.css mai ......
0830总结
vue-cli 项目中相关操作
一.前台路由的基本工作流程
目录结构
|vue-proj | |src | | |components | | | |nav.vue | | |views | | | |pagefirst.vue | | | |pagesecond.vue | | |app.vue | | |router.js
app.vue:根组件
<template> <div id="app"> <!--根组件只需要书写router-view--> <!--router-view就是vue-router插件路由占位标签--> <router-view></router-view> </div> </template>
nav.vue:小组件
<template> <div class="nav"> <!--router-link就是vue-router插件路由页面转跳的标签,页面加载后会被解析为a标签--> <!--router-link不同于a标签,路由转跳之后更换组件,不会发送页面转跳,用to属性设置转跳路径--> <router-link to="/page-first">first</router-link> <router-link :to="{name: 'page-second'}">second</router-link> <router-link to="/course">课程</router-link> <!-- to后跟路由路径 | :to后可以用name设置路由别名 --> </div> </template> <script> export default { name: "nav" } </script> <style scoped> .nav { height: 100px; background-color: rgba(0, 0, 0, 0.4); } .nav a { margin: 0 20px; font: normal 20px/100px '微软雅黑'; } .nav a:hover { color: red; } </style>
pagefirst.vue:页面组件
<template> <div class="page-first"> <nav></nav> <h1>page-first</h1> </div> </template> <script> // 使用 import nav from '@/components/nav' export default { name: "pagefirst", components: { nav } } </script> <style scoped> .page-first { width: 100%; height: 800px; background: orange; } h1 { text-align: center; } </style>
pagesecond.vue:页面组件
<template> <div class="page-second"> <nav></nav> <h1 @click="printtitle">{{ title }}</h1> <input type="text" v-model="title"> </div> </template> <script> import nav from '@/components/nav' export default { name: "pagesecond", data() { return { title: 'page-second' } }, methods: { printtitle() { console.log(this.title) } }, components: { nav }, } </script> <style scoped> .page-second { width: 100%; height: 800px; background: pink; } h1 { text-align: center; } </style>
router.js:路由配置
import vue from 'vue' import router from 'vue-router' import pagefirst from './views/pagefirst' import pagesecond from './views/pagesecond' vue.use(router); export default new router({ mode: 'history', // 组件更换模拟页面转跳形成浏览器历史记录 base: process.env.base_url, routes: [ // 路由就是 url路径 与 vue组件 的映射关系 // 映射出的组件会替换 根组件 中的 router-view 标签 // 通过 router-link 标签完成 url路径 的切换 { path: '/page-first', name: 'page-first', component: pagefirst }, { path: '/page-second', name: 'page-second', component: pagesecond }, ] })
二.配置全局样式文件
目录结构
|vue-proj | |src | | |assets | | | |css | | | | |global.css | | |main.js
global.css
html, body, h1, ul { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; color: black; } /* router-link标签激活状态拥有的类名 */ .router-link-exact-active.router-link-active { color: greenyellow; border-bottom: 2px solid greenyellow; }
main.js
// 新增内容 // 配置全局css import '@/assets/css/global.css'
三.组件生命周期钩子
概念
一个组件从创建到销毁,整个过程中的特殊的时间节点回调的方法,称之为生命周期钩子 如:一个组件创建成功就会回调 created方法,内部数据要更新和更新完毕分别调用 beforeupdate方法与updated方法
案例
<template> <div class="page-second"> <nav></nav> <h1 @click="printtitle">{{ title }}</h1> <input type="text" v-model="title"> </div> </template> <script> import nav from '@/components/nav' export default { name: "pagesecond", data() { return { title: 'page-second' } }, methods: { printtitle() { console.log(this.title) } }, components: { nav }, beforecreate() { console.log('开始创建组件'); console.log(this.title); console.log(this.printtitle); this.title = '呵呵'; }, created() { // 重点 console.log('组件创建成功'); console.log(this.title); console.log(this.printtitle); // 请求后台数据,完成数据的更新 this.title = '嘿嘿'; }, beforemount() { console.log('组件开始渲染'); }, mounted() { console.log('组件渲染成功'); this.title = '嘻嘻'; }, beforeupdate() { console.log('数据开始更新'); }, updated() { console.log('数据更新完毕'); }, activated() { console.log('组件激活'); }, deactivated() { console.log('组件停用'); }, destroyed() { console.log('组件销毁成功'); } } </script> <style scoped> .page-second { width: 100%; height: 800px; background: pink; } h1 { text-align: center; } </style>
四.路由重定向
router.js
import vue from 'vue' import router from 'vue-router' import pagefirst from './views/pagefirst' import pagesecond from './views/pagesecond' import course from './views/course' vue.use(router); export default new router({ mode: 'history', base: process.env.base_url, routes: [ { path: '/page-first', name: 'page-first', component: pagefirst }, { // 重定向路由的两种方式 path: '/page/first', // redirect: {'name': 'page-first'}, redirect: '/page-first' }, ] })
五.页面组件小组件综合案例
目录结构
|vue-proj | |src | | |components 小组件 | | | |coursecard.vue | | |views 页面组件 | | | |course.vue | | |router.js
coursecard.vue
<template> <div class="course-card"> <div class="left" :style="{background: card.bgcolor}"></div> <div class="right">{{ card.title }}</div> </div> </template> <script> export default { name: "coursecard", props: ['card'] } </script> <style scoped> .course-card { margin: 10px 0 10px; } .course-card div { float: left; } .course-card:after { content: ''; display: block; clear: both; } .left { width: 50%; height: 120px; background-color: blue; } .right { width: 50%; height: 120px; background-color: tan; font: bold 30px/120px 'stsong'; text-align: center; } </style>
coursecard.vue
<template> <div class="course"> <nav></nav> <h1>课程主页</h1> <coursecard :card="card" v-for="card in card_list" :key="card"></coursecard> </div> </template> <script> import nav from '@/components/nav' import coursecard from '@/components/coursecard' export default { name: "course", data() { return { card_list: [] } }, components: { nav, coursecard }, created() { let cards = [ { id: 1, bgcolor: 'red', title: 'python基础' }, { id: 3, bgcolor: 'blue', title: 'django入土' }, { id: 8, bgcolor: 'yellow', title: 'mysql删库高级' }, ]; this.card_list = cards; } } </script> <style scoped> h1 { text-align: center; background-color: brown; } </style>
router.js
import vue from 'vue' import router from 'vue-router' import pagefirst from './views/pagefirst' import pagesecond from './views/pagesecond' import course from './views/course' vue.use(router); export default new router({ mode: 'history', base: process.env.base_url, routes: [ { path: '/page-first', name: 'page-first', component: pagefirst }, { path: '/page/first', // redirect: {'name': 'page-first'}, redirect: '/page-first' }, { path: '/page-second', name: 'page-second', component: pagesecond }, { path: '/course', name: 'course', component: course }, ] })