第6章:vue-router,vue-cli和单文件组件

  四,vue-router路由

  1.简介

  使用Vue.js开发SPA(Single Page Application)单页面应用

  根据不同url地址,显示不同的内容,但显示在同一个页面中,称为单页面应用

  参考官网:https://router.vuejs.org/zh/

  下载

  使用cnpm下载

cnpm install vue-router@2.7.0 -S

  下载后的js文件在当前目录下

node_modules/vue-router/dist

  2.基本用法

  html

<div id='itany'>
        <div>
            <!-- 使用router-link组件来定义导航,to属性指定链接url  -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/home">主页</router-link>
			<router-link to="/news">新闻</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由的内容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>

  JavaScripts

<script>
        // 1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var News={
            template:'<h3>我是新闻</h3>'
        }
        // 2.配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
        ]
        // 3.创建路由实例
        const router=new VueRouter({
            // routes //简写相当于routes:routes
            routes,
            // mode:'history'
        });
        // 4.创建跟实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router  // 注入路由
        });
    </script>

  完整代码如下day03/09.html

  注意:引入vue.js需要在vue-router.js之前,否则控制台报错,原因不明

Unknown custom element: <router-link>

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由基本用法</title>
    <style>
        .router-link-active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link组件来定义导航,to属性指定链接url  -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/home">主页</router-link>
			<router-link to="/news">新闻</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由的内容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>
    <script>
        // 1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var News={
            template:'<h3>我是新闻</h3>'
        }
        // 2.配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
        ]
        // 3.创建路由实例
        const router=new VueRouter({
            // routes //简写相当于routes:routes
            routes,
            // mode:'history'
        });
        // 4.创建跟实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router  // 注入路由
        });
    </script>
</body>
</html>

  页面显示,点击主页显示我是主页,新闻显示我是新闻

第6章:vue-router,vue-cli和单文件组件

 

 

   注意到点击链接会自动加#,如果不想看到这个#修改路由实例模式mode默认为hash修改为history

 const router=new VueRouter({
            // routes //简写相当于routes:routes
            routes,
            mode:'history'
        });

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

 

   点击主页或者新闻也是有默认样式的,可以通过控制台查看到  

第6章:vue-router,vue-cli和单文件组件

 

 

   修改样式,在<head>标签内增加以下代码

<style>
        .router-link-active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
</style>

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

 

   如果觉得这个样式名称太复杂也可以修改样式名

 // 3.创建路由实例
        const router=new VueRouter({
            // routes //简写相当于routes:routes
            routes,
            // mode:'history'
            linkActiveClass:'active' //更新活动链接的class类名
 });

  同时样式定义的时候也修改对应的名称

<style>
        /* .router-link-active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        } */
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>

  默认打开页面是不显示主页或者新闻的需要点击才显示,可以通过路由重定向,例如打开首页显示Home或者在没有找到路由的情况下跳转至Home

  修改配置路由代码

 // 2.配置路由
    const routes=[
        {path:'/home',component:Home},
        {path:'/news',component:News},
       {path:'*',redirect:'/home'} //重定向
     ]

  页面显示,默认显示Home,如果随意写一个没有的路由也会跳到Home

第6章:vue-router,vue-cli和单文件组件

  3.路由嵌套和参数的传递

   路由嵌套:路由对应的链接下还有链接

  把上面设置的路由新闻处改成用户,用户下面又有两个链接分别为用户登录和用户注册

  day03/10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由嵌套和参数的传递</title>
    <style>
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <!-- <script src='js/vue.js'></script> -->
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link组件来定义导航,to属性指定链接url  -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/home">主页</router-link>
			<router-link to="/user">用户</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由的内容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>
    <template id='user'>
        <div>
            <h3>用户信息</h3>
            <ul>
                <li><router-link to="/user/login">用户登录</router-link></li>
                <li><router-link to="/user/regist">用户注册</router-link></li>
            </ul>
             <!-- 路由匹配到的组件将渲染在这里,需要设置否则不渲染,点击无显示 -->
            <router-view></router-view>
        </div>
    </template>
    <script>
        // 1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>用户登录...</h4>'
        }
        var Regist={
            template:'<h4>用户注册...</h4>'
        }
        // 2.配置路由
        const routes=[
            {
                path:'/home',
                component:Home
            },
            
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component: Login
                    },
                    {
                        path:'regist',
                        component: Regist
                    },
                ]
            },
            {
                path:'*',
                redirect:'/home'
            } //重定向
        ]
            // 3.创建路由实例
            const router=new VueRouter({
                // routes //简写相当于routes:routes
                routes,
                // mode:'history'
                linkActiveClass:'active' //更新活动链接的class类名
            });
        // 4.创建跟实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router  // 注入路由
        });
    </script>
</body>
</html>

  解析:在设置路由下新加关键字children对应嵌套的路由,写法是一致的

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

 

   上面写法是把标签<router-link>写入到标签<li>内,也可以直接写<router-link>标签通过关键字tag来指定包含的标签类型为<li>,以下为简化写法,效果是一样的

                <!-- <li><router-link to="/user/login">用户登录</router-link></li>
                <li><router-link to="/user/regist">用户注册</router-link></li> -->
                <router-link to="/user/login" tag='li'>用户登录</router-link>
                <router-link to="/user/regist" tag='li'>用户注册</router-link>

  传递参数的两种形式

  a.查询字符串:login?name=tom&pwd=123

    {{$route.query}}

  b.rest风格url:regist/alice/456

    {{$route.params}}

  传递参数获取示例,修改代码,演示两种传递参数及如何获取传递的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由嵌套和参数的传递</title>
    <style>
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <!-- <script src='js/vue.js'></script> -->
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link组件来定义导航,to属性指定链接url  -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/home">主页</router-link>
			<router-link to="/user">用户</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由的内容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>
    <template id='user'>
        <div>
            <h3>用户信息</h3>
            <ul>
                <!-- <li><router-link to="/user/login">用户登录</router-link></li>
                <li><router-link to="/user/regist">用户注册</router-link></li> -->
                <router-link to="/user/login?name=tom&pwd=123" tag='li'>用户登录</router-link>
                <router-link to="/user/regist/alice/456" tag='li'>用户注册</router-link>
            </ul>
             <!-- 路由匹配到的组件将渲染在这里,需要设置否则不渲染,点击无显示 -->
            <router-view></router-view>
        </div>
    </template>
    <script>
        // 1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>用户登录...获取参数:{{$route.query}}</h4>'
        }
        var Regist={
            template:'<h4>用户注册...获取参数: {{$route.params}}</h4>'
        }
        // 2.配置路由
        const routes=[
            {
                path:'/home',
                component:Home
            },
            
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component: Login
                    },
                    {
                        path:'regist/:username/:password',
                        component: Regist
                    },
                ]
            },
            {
                path:'*',
                redirect:'/home'
            } //重定向
        ]
            // 3.创建路由实例
            const router=new VueRouter({
                // routes //简写相当于routes:routes
                routes,
                // mode:'history'
                linkActiveClass:'active' //更新活动链接的class类名
            });
        // 4.创建跟实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router  // 注入路由
        });
    </script>
</body>
</html>

  解析

第6章:vue-router,vue-cli和单文件组件

 

 

 第6章:vue-router,vue-cli和单文件组件

 

 

   注意:使用方式1直接传递即可,使用方式2为了不让浏览器认为传递的参数是路由需要定义,传递参数的方式,如下

第6章:vue-router,vue-cli和单文件组件

 

 

   页面显示

第6章:vue-router,vue-cli和单文件组件

 

 

 第6章:vue-router,vue-cli和单文件组件

 

 

   4.路由实例的方法

  router.push()添加路由,功能上与<route-link>相同

  router.replace()替换路由,不产生历史记录

  示例 day03/10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由嵌套和参数的传递</title>
    <style>
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <!-- <script src='js/vue.js'></script> -->
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link组件来定义导航,to属性指定链接url  -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/home">主页</router-link>
			<router-link to="/user">用户</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由的内容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
        <button @click='push'>添加路由</button>
        <button @click='replace'>替换路由</button>
    </div>
    <template id='user'>
        <div>
            <h3>用户信息</h3>
            <ul>
                <!-- <li><router-link to="/user/login">用户登录</router-link></li>
                <li><router-link to="/user/regist">用户注册</router-link></li> -->
                <router-link to="/user/login?name=tom&pwd=123" tag='li'>用户登录</router-link>
                <router-link to="/user/regist/alice/456" tag='li'>用户注册</router-link>
            </ul>
             <!-- 路由匹配到的组件将渲染在这里,需要设置否则不渲染,点击无显示 -->
             <div>
                <router-view></router-view>
             </div>
            <hr>
            
        </div>
    </template>
    <script>
        // 1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>用户登录...获取参数:{{$route.query}}</h4>'
        }
        var Regist={
            template:'<h4>用户注册...获取参数: {{$route.params}}</h4>'
        }
        // 2.配置路由
        const routes=[
            {
                path:'/home',
                component:Home
            },
            
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component: Login
                    },
                    {
                        path:'regist/:username/:password',
                        component: Regist
                    },
                ]
            },
            {
                path:'*',
                redirect:'/home'
            } //重定向
        ]
            // 3.创建路由实例
            const router=new VueRouter({
                // routes //简写相当于routes:routes
                routes,
                // mode:'history'
                linkActiveClass:'active' //更新活动链接的class类名
            });
        // 4.创建跟实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router,  // 注入路由
            methods:{
                push(){
                    router.push({path:'home'}); // 添加路由,切换路由
                },
                replace(){
                    router.replace({path:'user'}); // 替换路由,没有历史记录
                },
            }
        });
    </script>
</body>
</html>

  解析

  增加两个按钮分别调用添加路由和替换路由的方法

第6章:vue-router,vue-cli和单文件组件

 

 

   方法如下,分别把路由指向home和user

第6章:vue-router,vue-cli和单文件组件

 

 

   页面显示

第6章:vue-router,vue-cli和单文件组件

 

 

 第6章:vue-router,vue-cli和单文件组件

 

 

   两者的区别在于替换路由是没有历史记录的即替换路由的上一页

第6章:vue-router,vue-cli和单文件组件

 

 

 

  5.路由结合动画

  利用之前学的animate.css可以给路由结合动画,只需要给<router-view></router-view>标签套在<transition>标签内即可

  day03/10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/animate.css">
    <title>路由嵌套和参数的传递</title>
    <style>
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <!-- <script src='js/vue.js'></script> -->
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link组件来定义导航,to属性指定链接url  -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/home">主页</router-link>
			<router-link to="/user">用户</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由的内容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                <router-view></router-view>
            </transition>   
        </div>
        <button @click='push'>添加路由</button>
        <button @click='replace'>替换路由</button>
    </div>
    <template id='user'>
        <div>
            <h3>用户信息</h3>
            <ul>
                <!-- <li><router-link to="/user/login">用户登录</router-link></li>
                <li><router-link to="/user/regist">用户注册</router-link></li> -->
                <router-link to="/user/login?name=tom&pwd=123" tag='li'>用户登录</router-link>
                <router-link to="/user/regist/alice/456" tag='li'>用户注册</router-link>
            </ul>
             <!-- 路由匹配到的组件将渲染在这里,需要设置否则不渲染,点击无显示 -->
             <div>
               
                    <router-view></router-view>
               
             </div>
            <hr>
            
        </div>
    </template>
    <script>
        // 1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>用户登录...获取参数:{{$route.query}}</h4>'
        }
        var Regist={
            template:'<h4>用户注册...获取参数: {{$route.params}}</h4>'
        }
        // 2.配置路由
        const routes=[
            {
                path:'/home',
                component:Home
            },
            
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component: Login
                    },
                    {
                        path:'regist/:username/:password',
                        component: Regist
                    },
                ]
            },
            {
                path:'*',
                redirect:'/home'
            } //重定向
        ]
            // 3.创建路由实例
            const router=new VueRouter({
                // routes //简写相当于routes:routes
                routes,
                // mode:'history'
                linkActiveClass:'active' //更新活动链接的class类名
            });
        // 4.创建跟实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router,  // 注入路由
            methods:{
                push(){
                    router.push({path:'home'}); // 添加路由,切换路由
                },
                replace(){
                    router.replace({path:'user'}); // 替换路由,没有历史记录
                },
            }
        });
    </script>
</body>
</html>

  解析

第6章:vue-router,vue-cli和单文件组件

 

 

   添加动态进入出去动画

  五,单文件组件

  1. .vue文件

  .vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html,css,js

  .vue文件由三部分组成<template> <style><script>

<template>
    html
</template>

  

<style>
    css
</style>

  

<script>
    js
</script>

  2.vue-loader 

  浏览器本身并不认识.vue结尾的文件,所以必须对.vue文件加载和解析,此时需要vue-loader

  类似的loader还有许多,如:html-loader  ,css-loader,style-loader,babel-loader等

  需要注意的是vue-loader是基于webpack的

  3.webpack

  webpack是一个前端资源模块化加载器和打包工具,它能够把各种资源都作为模块来使用和处理

  实际上,webpack是通过不同的loader将这些资源加载后进行打包,然后输出打包后的文件

  简单来说,webpack就是一个模块加载器,所有的资源都可以作为模块来加载,最后打包输出。

  webpack官网:https://webpack.github.io/

  webpack版本:v1.x  v2.x

  webpack有一个核心配置文件:webpack.config.js,必须放在项目的根目录下

  4.示例,步骤

  4.1 创建项目,目录结构如下:

  webpack-demo

|­index.html
|­main.js 入口文件
|­App.vue vue文件
|­package.json 工程文件
|­webpack.config.js webpack配置文件
|­.babelrc Babel配置文件

  其他文件手动创建,­package.json可以通过目录创建初始文件

cnpm init --yes

  

  4.2编写App.vue

  每个部分都有一个简单的内容

<template>
	<div id="itany">
		<h1>welcome to itany</h1>
	
	</div>
</template>

<script>

	console.log(111);

</script>

<style>
	body{
		background-color:#ccc;
	}
</style>
  4.3安装相关模块
cnpm install vue -S

  -S为生产依赖,-D为开发依赖

cnpm init --yes
cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler webpack-cli

  注意:复制粘贴安装可能会出现字符编码问题无法安装,可以手动输入安装,安装后会更新package.json文件

  以下代码初始化package.json文件

cnpm init --yes

  运行完毕以后package.json文件

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server  --hot --port 8800 --host 0.0.0.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.3.4"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.5.2",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.0.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^2.5.0"
  }
}

  修改了默认的scripts语句,下面语句的意思是环境dev启动本机的8800端口 允许所有主机访问,注意需要--host 0.0.0.0否则只能是本机访问

 "dev": "webpack-dev-server  --hot --port 8800 --host 0.0.0.0"

  

  如果安装失败可以使用以下方法重新安装

rm -rf node_modules
rm -rf package-lock.json
npm cache clear --force
npm install
  4.5编写main.js

  main.js

/**
 * 使用ES6语法引入模板
 */
import Vue from 'vue'
import App from './App.vue'

new Vue({
        el:'#app',
        render:function(h){ //使用render函数渲染组件
                return h(App);
        }
});

  解析

import Vue from 'vue'

  会从当前目录node_modules 查找模块

  4.5 编写webpack.config.js

  webpack.config.js

module.exports={
        //配置入口文件
        entry:'./main.js',
        //配置入口文件输出位置
        output:{
                path:__dirname, //项目根路径
                filename:'build.js'
        },
        //配置模块加载器
        module:{
                rules:[
                        {
                                test:/\.vue$/, //所有以.vue结尾的文件都由vue-loader加载
                                loader:'vue-loader'
                        },
                        {
                                test:/\.js$/, //所有以.js结尾的文件都由babel-loader加载,除了node_modules以外
                                loader:'babel-loader',
                                exclude:/node_modules/
                        }
                ]
        }
}
  4.6 编写.babelrc

  .babelrc

{
        "presets":[
                ["env",{"module":false}]
        ]
}
~
  4.7 编写package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server  --hot --port 8800 --host 0.0.0.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.3.4"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.5.2",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.0.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^2.5.0"
  }
}
  4.8 运行测试
 cnpm run dev

  实际就相当于执行以下命令

webpack-dev-server  --hot --port 8800 --host 0.0.0.0

  启动8800端口

第6章:vue-router,vue-cli和单文件组件

 

   页面访问

第6章:vue-router,vue-cli和单文件组件

 

   修改App.vue可以实现热加载,例如修改以下内容

第6章:vue-router,vue-cli和单文件组件

 

   不需要重启,页面显示

第6章:vue-router,vue-cli和单文件组件

 

   修改使点击tom修改name属性

<template>
        <div id="itany">
                <h1>welcome</h1>
                <h2 @click="change">{{name}}</h2>

        <!--    <User></User> -->
        </div>
</template>

<script>

        //导入模块
        // import User from './components/User.vue'

        // console.log(111);
        export default {
                data(){
                        return {
                                name:'tom'
                        }
                },
                methods:{
                        change(){
                                this.name='汤姆';
                        }
                },
                //components:{
                //      User
                // }
         }
</script>

<style>
        body{
                background-color:#ccc;
        }
</style>

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

 第6章:vue-router,vue-cli和单文件组件

 

   开发组件展示一个用户的信息

 cat components/User.vue
<template>
        <div class="user">
                <h2>用户列表</h2>
                <ul>
                        <li v-for="value in users">{{value}}</li>
                </ul>
        </div>
</template>

<script>
        export default {
                data(){
                        return {
                                users:['tom','jack','mike','alice']
                        }
                }
        }
</script>

<style scoped> /* scoped表示该样式只在当前组件中有效 */
        h2{
                color:red;
        }

  修改App.vue

# cat App.vue
<template>
        <div id="itany">
                <h1>welcome</h1>
                <h2 @click="change">{{name}}</h2>

        <User></User>
        </div>
</template>

<script>

        //导入模块
        import User from './components/User.vue'

        // console.log(111);
        export default {
                data(){
                        return {
                                name:'tom'
                        }
                },
                methods:{
                        change(){
                                this.name='汤姆';
                        }
                },
                components:{
                        User
                 }
         }
</script>

<style>
        body{
                background-color:#ccc;
        }
</style>

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

   六,vue-cli脚手架

  1.简介

  vue-cli是一个vue脚手架,可以快速搭建项目结构

  vue-cli本身集成了多种项目模板:

simple 很少使用简单
webpack 包含ESLint代码规范的检查unit单元测试
webpack-simple 没有代码规范检查和单元测试
browserify 使用的也比较多
browserify­-simple

  2.示例

  2.1 安装vue­cli,配置vue命令环境

  全局安装

cnpm install vue-cli -g

  查看版本

D:\vue.js\code\day03\webpack-demo>vue --version
2.9.6

  列出可用的模板

第6章:vue-router,vue-cli和单文件组件

 

   2.2 初始化项目,生成项目模板
语法:vue init 模板名 项目名

  

D:\vue.js\code\day03>vue init webpack-simple vue-cli-demo
  2.3 进入生成的项目目录,安装模块包
cd vue-cli-demo
cnpm install
cnpm run dev

第6章:vue-router,vue-cli和单文件组件

 

   在windows下自动打开浏览器

第6章:vue-router,vue-cli和单文件组件

 

  生产中将项目打包

cnpm run build // 将项目打包输出dist目录,项目上线的话要讲dist目录拷贝到服务器上

  

    3. 使用webpack模板

vue init webpack vue-­cli-­demo2

  ESLint是用来统一代码规范和风格的工具,如缩进、空格、符号等,要求比较严格

  eslint规则官网:https://eslint.org/

cnpm install
cnpm run dev 
cnpm run build

  访问首页是一样的

  

  模块化开发

  初始化

  在新建的day04运行

D:\vue.js\code\day04>vue init webpack-simple vue-cli-demo
  1.vue-router模块化

  安装vue-router,生产依赖

cnpm install vue-router -S
  2.编辑main.js 

  引用vue-router

  src/main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

// 使用vue-router
Vue.use(VueRouter);


new Vue({
  el: '#app',
  render: h => h(App)
})

  修改App.vue

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to itany'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

  运行 

cd vue-cli-demo
cnpm install
cnpm run dev

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

   

  继续编辑App.vue增加主页和新闻链接

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </h3>
    <div> 
      <keep-alive>
        <!-- 渲染显示 -->
        <router-view> </router-view>
      </keep-alive>
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to itany'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

  在目录src下新建文件夹components新增Home.vue和News.vue

  Home.vue

<template>
    <div id="home">
        <h3>这是主页</h3>
    </div>
</template>

  News.vue

<template>
    <div id="news">
        <h3>这是新闻</h3>
    </div>
</template>

  在src下新增路由配置文件

  router.config.js

import Home from './components/Home.vue'
import News from './components/News.vue'

export default{
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News
        },
    ]
}

  在main.js引入注入路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
// 使用vue-router
Vue.use(VueRouter);

// 创建路由实例
const router=new VueRouter(routerConfig);

new Vue({
  el: '#app',
  render: h => h(App),
  // 注入路由
  router
})

  启动项目

cnpm run dev

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

 第6章:vue-router,vue-cli和单文件组件

 

   打印路由信息以及监视路由的变化,在App.vue增加以下代码

mounted(){
    console.log(this.$route)
  },
  watch:{
    $route:function(newValue,oldValue) {
      console.log('路由发送变化,跳转到:'+newValue.path)
    }
  }

第6章:vue-router,vue-cli和单文件组件

 

   打印路由对象以及监视路由如果发生了变化则打印新路由信息

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

   2. axios模块化

  安装    

cnpm install axios -S

  使用axios的两种方式

    方式1:在每个组件中引入axios

    方式2:在入口文件main.js全局引入并添加到Vue的原型中

  方式1示例

第6章:vue-router,vue-cli和单文件组件

 

   App.vue

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </h3>
    <div> 
      <keep-alive>
        <!-- 渲染显示 -->
        <router-view> </router-view>
      </keep-alive>
    </div>
    <hr>
    <button @click='send'>发送AJAX请求</button>
  </div>
  
</template>

<script>
import axios from 'axios'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to itany'
    }
  },
  mounted(){
    console.log(this.$route)
  },
  watch:{
    $route:function(newValue,oldValue) {
      console.log('路由发送变化,跳转到:'+newValue.path)
    }
  },
  methods:{
    send(){
      axios.get('https://api.github.com/users/tangyang8942')
      .then(resp=>{
        console.log(resp.data);
      }).catch(err=>{
        console.log(err);
      });
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

  页面显示

第6章:vue-router,vue-cli和单文件组件

 

   

 

 

 

  如果需要在Home组件中引用则需要在Home.vue引入这样使用不方便

  使用方式2示例

  修改入口文件main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
import axios from 'axios'
// 使用vue-router
Vue.use(VueRouter);

// 创建路由实例
const router=new VueRouter(routerConfig);

// 加入Vue原型,其他组件可以直接引用
Vue.prototype.$http=axios
new Vue({
  el: '#app',
  render: h => h(App),
  // 注入路由
  router
})

第6章:vue-router,vue-cli和单文件组件

 

   需要使用axios的地方直接使用this.$http使用,修改App.vue

第6章:vue-router,vue-cli和单文件组件

 

   效果是一样的

  3.为自定义组件添加事件

  src/compoents自定义组件 MyButton.vue

<template>
    <button>自定义按钮</button>
</template>

<style>
    button{
        width:100px;
        height: 30px;
        background-color:#ccc;
        color:red;
    }
</style>

  在App.vue引入组件并绑定事件send

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </h3>
    <div> 
      <keep-alive>
        <!-- 渲染显示 -->
        <router-view> </router-view>
      </keep-alive>
    </div>
    <hr>
    <button @click='send'>发送AJAX请求</button>
    <MyButton @click.native='send'></MyButton>
  </div>
  
</template>

<script>
// import axios from 'axios'
import MyButton from './components/MyButton.vue'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to itany'
    }
  },
  mounted(){
    console.log(this.$route)
  },
  watch:{
    $route:function(newValue,oldValue) {
      console.log('路由发送变化,跳转到:'+newValue.path)
    }
  },
  methods:{
    send(){
      this.$http.get('https://api.github.com/users/tangyang8942')
      .then(resp=>{
        console.log(resp.data);
      }).catch(err=>{
        console.log(err);
      });
    }
  },
  components:{
    MyButton
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

  解析

第6章:vue-router,vue-cli和单文件组件

 

   注意自定义需要需要加修饰符native监听组件根元素的原生事件,否则不生效

  点击按钮调用send方法,和上面例子效果是一样的 

  

  

  

上一篇:在小程序开发中使用 npm


下一篇:微信中怎么打开apk文件 微信跳转打开外部浏览器打开apk文件