vue学习(四) vue-loader vue-router vue-cli

vue-router

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

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

具体使用代码过程:

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    
    <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:'

我是主页

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

我是新闻

'
}); //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 (数据信息)

vue学习(四) vue-loader vue-router vue-cli_第1张图片

    <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'}">新闻001a>
            <a v-link="{path:'/news/detail/002'}">新闻002a>
        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:'我是登录信息 {{$route.params | json}}</strong>'
                        }
                    },
                    'reg':{
                        component:{
                            template:'我是注册信息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之后的文件夹目录
    vue学习(四) vue-loader vue-router vue-cli_第2张图片
    后续通过 npm install 来下载所需要的模块

  • webpack-simple
    vue init webpack-simple vue-webpack-demo
    init之后的文件夹目录
    vue学习(四) vue-loader vue-router vue-cli_第3张图片
    后续通过 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。大家在做的过程中要有点耐心。这篇博客整理的不算是太精细,希望看过后能有所指导。

你可能感兴趣的:(vue学习)