第一个vue+webpack模块化之使用路由

最新推荐文章于 2022-10-19 16:01:40 发布

eling-

最新推荐文章于 2022-10-19 16:01:40 发布

阅读量552

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2.0

本文链接：https://blog.youkuaiyun.com/second_boy/article/details/88704131

本文详细介绍了如何在Vue项目中进行模块化开发，特别是在结合Webpack的情况下，通过步骤逐一讲解了如何配置和使用路由，以及如何进行axios的模块化集成，包括项目的生成、模块安装、路由引入、项目运行和打包上线。同时，还涉及到了自定义组件监听原生事件的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、vue模块化开发之使用路由

1. 生成项目

命令：vue init webpack-simple vue-cli-model

2. 进入项目目录后，安装项目需要的模块

命令：cnpm install

3. 引入路由router

3.1 先安装vue-router
    命令：cnpm install vue-router -S

3.2 操作步骤
    1). 在main.js内引入vue-router
        import VueRouter from 'vue-router' //  引入vue-router模块

    2). 使用路由，vue.use()方法：
        Vue.use(VueRouter)

    3). 在App.vue中加上路由跳转和渲染
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>

        <keep-alive>        
            <router-view></router-view>     // 路由内容展示区
        </keep-alive>

    4). 分别创建Home.vue和News.vue模版，内容如下
        Home:
        <template>
            <div id="Home">
                <h3>我是主页</h3>
            </div>
        </template>

        New