webpack管理Vue项目--组件和路由引入

来源：互联网发布：淘宝联盟能贷款吗编辑：程序博客网时间：2024/06/06 02:53

简单的vue项目组件的嵌入、路由的设置及其接口调用基本可以搞定了。

组建引入

项目创建就不再多说，直接vue-cli创建就好

创建一个组建vue文件 myComponent.vue

<template>    <div id="component">        myComponent    </div></template><script>    export default{           }</script><style></style>

创建好之后，在要引入的地方引入，比如在App.vue中引用

<template>  <div id="app">    <img src="./assets/logo.png">    <h1>{{ msg }}</h1>    <my-component></my-component>  </div></template><script>  import myComponent from "./components/myComponent.vue";export default {  name: 'app',  data () {    return {      msg: 'Welcome to Your Vue.js App'    }  },  components:{ myComponent }}</script>

注意的一点是在template中引用的时候不能用驼峰名

npm run dev

显示出了“myComponent”表示引入已经成功

vue-router路由引入

先安装vue-router

npm install vue-router --save

安装成功后创建路由配置js文件、路由的分支组件compontent1、compontent2

router.js文件中引入vue vue-router及其路由组件

import Vue from "vue";import Router from "vue-router";import View1 from "./views/view1.vue";import View2 from "./views/view2.vue";Vue.use(Router)export default new Router({    linkActiveClass:"active",    routes:[        {            path: "/view1",            component: View1        },        {            path: "/view2",            component: View2        },        {            path: "/*",            component: View1        }    ]})

然后在main.js中引入router.js vue中引入路由

import Vue from 'vue';import App from './App.vue';import router from "./router";new Vue({  el: '#app',  router,  render: h => h(App)});

再到App.vue中引入路由组件

<router-link to="/component1">123</router-link>  // 路由连接<router-link to="/component2">345</router-link><router-view></router-view>  // 渲染窗口

点击路由链接已经可以进行视图切换了

阅读全文

0 0