vue学习（四） vue-loader vue-router vue-cli

最新推荐文章于 2025-07-09 09:21:45 发布

原创最新推荐文章于 2025-07-09 09:21:45 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-loader #vue-router #vue-cli #vue

vue学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用vue-router进行路由配置，包括路由的引入、v-link的使用和路由嵌套。接着讲解了vue-loader的作用，它是编译.vue文件的关键。最后，阐述了vue-cli的安装与使用，包括不同项目模板的创建及其差异，如simple、webpack和webpack-simple，并提到了版本选择的灵活性。

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

vue-router

SPA: SinglePageApplication
     单页面应用程序
vue在实现单页面应用程序，要借助他的路由，即vue-router

下载vue-router，在页面中引入相关的模块

具体使用代码过程：

首先引入vue和vue-router
在html里写相关的链接，这里链接还是通过a标签来定义，但是通过 v-link来绑定链接的地址
再通过router-view ，把相关的内容呈现在router-view里
js部分，一共分为五步，定义根组件、准备路由对应的组件、准备路由、关联、开启

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue 和 vue-router-->
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新闻</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>
        </div>  
    </div>

    <script>
        //1. 准备一个根组件
        var App=Vue.extend();

        //2. Home News组件都准备
        var Home=Vue.extend({
            template:'<h3>我是主页</h3>'
        });

        var News=Vue.extend({
            template:'<h3>我是新闻</h3>'
        });

        //3. 准备路由
        var router=new VueRouter();

        //4. 关联
        router.map({
            'home':{
                component:Home
            },
            'news':{
                component:News
            }
        });

        //5. 启动路由
        router.start(App,'#box');

        //6.跳转:（这一步是配置路由）
        router.redirect({
            ‘/’:'/home' // 默认是在home
        });
    </script>
</body>
</html>

路由嵌套：通过subRoutes，在路由里面嵌套，进而实现。
PS: 有三个路由相关的参数（开发中，可以根据这是三个数来做相关操作）
$route.params (当前的参数)
$route.path(当前的路径)
$route.query (数据信息)

这里写图片描述

    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新闻</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>
        </div>  
    </div>

    <template id="home">
        <h3>我是主页</h3>
        <div>
            <a v-link="{path:'/home/login/zns'}">登录</a>
            <a v-link="{path:'/home/reg/strive'}">注册</a>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </template>
    <template id="news">
        <h3>我是新闻</h3>
        <div>
            <a v-link="{path:'/news/detail/001?a=1&b=2'}">新闻001</a>
            <a v-link="{path:'/news/detail/002'}">新闻002</a>
        </div>
        <router-view></router-view>
    </template>
    <template id="detail">
        {{$route.params | json}}
        <br>
        {{$route.path}}
        <br>
        {{$route.query | json}}
    </template>
    <script>
        //1. 准备一个根组件
        var App=Vue.extend();

        //2. Home News组件都准备
        var Home=Vue.extend({
            template:'#home'
        });

        var News=Vue.extend({
            template:'#news'
        });

        var Detail=Vue.extend({
            template:'#detail'
        });

        //3. 准备路由
        var router=new VueRouter();

        //4. 关联
        router.map({
            'home':{
                component:Home,
                subRoutes:{
                    'login/:name':{
                        component:{
                            template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
                        }
                    },
                    'reg':{
                        component:{
                            template:'<strong>我是注册信息</strong>'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes:{
                    '/detail/:id':{
                        component:Detail
                    }
                }
            }
        });

        //5. 启动路由
        router.start(App,'#box');

        //6. 跳转
        router.redirect({
            '/':'home'
        });
    </script>

vue-loader

PS：编译 .vue文件，需要的就是vue-loader

.vue文件的组成

        <template>
            html
        </template>

        <style>
            css
        </style>

        <script>
            js  （平时代码、ES6）  babel-loader
        </script>

类似与 css-loader style-loader html-loader ……

vue-loader是基于webpack。我在搭建webpack的环境中，遇到了各种坑，这里就不和大家分享具体的搭建过程了，不去误导大家了。
当然vue提供了vue-cli来工大家搭建vue的开发环境。主要分享下用vue-cli搭建的过程了。

vue-cli 使用

全局安装vue命令环境
npm install vue-cli -g
检查安装成功？ vue –version
生成项目模板
vue init <用哪个模板> 本地文件名（即自己要建立的文件夹）
进入到生成的项目里
cd xxx
npm install （下载所需要的模块儿）
npm run dev
跑起来

关于vue-cli集成的项目模板，这里说三个

simple
通过 vue init simple vue-simple-demo
init之后的文件夹中，只有一个index.html
webpack
通过 vue init webpack vue-webpack-demo
init之后的文件夹目录

后续通过 npm install 来下载所需要的模块
webpack-simple
vue init webpack-simple vue-webpack-demo
init之后的文件夹目录

后续通过 npm install 来下载所需要的模块

webpack 和 webpack-simple的区别；只有两点区别，webpack比webpack-simple要多两点功能。
1. Eslint 检查代码规范（对细节要求的很细，必须按照他所要求的规范来开发。）
2. 单元测试

ps：在vue init 的过程中，可以选择vue的版本号，eg vue init webpack#1.0 webpack-demo，则选择的就是1.0版本的vue

小结

在整理vue-loader 和 vue-router 的过程中，会遇到很多坑，有时候都快进行不下去了，试了好多次的代码，就是no-useing。大家在做的过程中要有点耐心。这篇博客整理的不算是太精细，希望看过后能有所指导。