vue 组件全局封装_vue 封装组件的基本操作

/**1.封装组件 局部 封装**/

// 1.创建组件构造器对象

const cpnC = Vue.extend({

template: `

})；

//2.注册组件

Vue.component('my-cpn',cpnC);

2.全局封装

const app2 = new Vue({

el: '#app2',

components: {

// cpn使用组件时的标签名

mycpn: cpnC

}

})

语法糖的方式：

/****2 vuecli 封装组件****/

APP.vue 文件

我是APP组件

首页

关于

用户

档案

import HomeNews from "./components/HomeNews";

import Home from "./components/Home";

export default {

name: 'App',

components: {Home, HomeNews},

data() {

return {

userId: 'zhangsan',

imgURL: 'http://www.baidu.com/logo.png'

}

},

methods: {

homeClick() {

// 通过代码的方式修改路由 vue-router

// push => pushState

// this.$router.push('/home')

this.$router.replace('/home')

console.log('homeClick');

},

aboutClick() {

// this.$router.push('/about')

this.$router.replace('/about')

console.log('aboutClick');

},

userClick() {

this.$router.push('/user/' + this.userId)

},

profileClick() {

this.$router.push({

path: '/profile',

query: {

name: 'kobe',

age: 19,

height: 1.87

}

})

}

}

}

/*.router-link-active {*/

/*color: #f00;*/

/*}*/

.active {

color: #f00;

}

main.js

import Vue from 'vue'

import App from './App'

import router from './router'

import axios from 'axios'

Vue.prototype.$axios = axios

axios.defaults.baseURL = 'serveies'

Vue.config.productionTip = false

// prototype.name = "coderwhy"

new Vue({

el: '#app',

router,

render: h => h(App)

})

// axios.post('http://httpbin.org/', {

// firstName: 'Fred',

// lastName: 'Flintstone'

// })

// .then(function (response) {

// console.log(response);

// })

// .catch(function (error) {

// console.log(error);

// });

axios.get('/http://httpbin.org/', {

params: {

ID: 12345

}

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

router / index.js

// 配置路由相关的信息

import VueRouter from 'vue-router'

import Vue from 'vue'

// import Home from '../components/Home'

// import About from '../components/About'

// import User from '../components/User'

const Home = () => import('../components/Home')

const HomeNews = () => import('../components/HomeNews')

const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')

const User = () => import('../components/User')

const Profile = () => import('../components/Profile')

// 1.通过Vue.use(插件), 安装插件

Vue.use(VueRouter)

// 2.创建VueRouter对象

const routes = [

{

path: '',

// redirect重定向

redirect: '/home'

},

{

path: '/home',

component: Home,

meta: {

title: '首页'

},

children: [

// {

// path: '',

// redirect: 'news'

// },

{

path: 'news',

component: HomeNews

},

{

path: 'message',

component: HomeMessage

}

]

},

{

path: '/about',

component: About,

meta: {

title: '关于'

},

beforeEnter: (to, from, next) => {

console.log('about beforeEnter');

next()

}

},

{

path: '/user/:id',

component: User,

meta: {

title: '用户'

},

},

{

path: '/profile',

component: Profile,

meta: {

title: '档案'

}

}

]

const router = new VueRouter({

// 配置路由和组件之间的应用关系

routes,

mode: 'history',

linkActiveClass: 'active'

})

// 前置守卫(guard)

router.beforeEach((to, from, next) => {

// 从from跳转到to

document.title = to.matched[0].meta.title

// console.log(to);

// console.log('++++');

next()

})

// 后置钩子(hook)

router.afterEach((to, from) => {

// console.log('----');

})

// 3.将router对象传入到Vue实例

export default router

components/home.vue

我是首页

我是首页内容, 哈哈哈

新闻

消息

{{message}}

export default {

name: "Home",

data() {

return {

message: '你好啊',

path: '/home/news'

}

},

created() {

console.log('home created');

},

destroyed() {

console.log('home destroyed');

},

// 这两个函数, 只有该组件被保持了状态使用了keep-alive时, 才是有效的

activated() {

this.$router.push(this.path);

console.log('activated');

},

deactivated() {

console.log('deactivated');

},

beforeRouteLeave (to, from, next) {

console.log(this.$route.path);

this.path = this.$route.path;

next()

}

}

可以引入公共样式

@import "./assets/css/base.css";