在页面引入vue-router.js文件,开始配置路由

<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>

var App=Vue.extend();          //1. 准备一个根组件(总的组件)

var Home=Vue.extend({        //2. 为Home News组件定义模版准备

template:'<h3>我是主页</h3>'

});

var News=Vue.extend({

template:'<h3>我是新闻</h3>'

});

var router=new VueRouter();   //3. 准备路由,实例化一个路由

//4. 关联

router.map({                //使用router.map将模版进行关联

'home':{                    //设置跳转名称'home

component:Home       //绑定到定义好的模版

},

'news':{

component:News

}

});

router.start(App,'#box');  //5. router.start启动路由,绑定总组件到指定元素

router.redirect({  '/' : '/home'  });         //6. router.redirect默认跳转

</script>

路由的嵌套:在关联路由的模版内使用  subRoutes

<template id="home">     //父级路由的模版

<h3>我是主页</h3>

<div>                 //内部嵌套路由

<a v-link="{path:'/home/login'}">登录</a> //注意子路由的路径

<a v-link="{path:'/home/reg'}">注册</a>

</div>

<div>

<router-view></router-view>

</div>

</template>
router.map({     //4. 关联路由

'home':{

component:Home,

subRoutes:{     //在模版内部使用subRoutes定义子路由模版

'login':{

component:{

template:'<strong>我是登录信息</strong>'

}

},

'reg':{

component:{

template:'<strong>我是注册信息</strong>'

}

}

}

},

'news':{

component:News

}

});

路由链接后面带参数获取:$route.params

<a v-link="{path:'/news/detail/001'}">新闻001</a>

<a v-link="{path:'/news/detail/002'}">新闻002</a>   //跳转链接后面带参数
'news':{

component:News,

subRoutes:{

'/detail/:id':{     //在定义的路由跳转名称后面加:名称

component:Detail

}

}

}

以下方法返回的都是一个JSON对象,需要过滤转化

{{$route.params | json}}          //获取当前路由链接地址后的参数

{{$route.path}}                // 获取当前路由链接的路径

{{$route.query | json}}           //获取当前路由链接?后面的数据

Vue-loader的使用:

vue文件内容介绍:    放置的是vue组件代码

<template> html文本  </template>

<style>   css文本 </style>

<script>   js文本 (平时代码、ES6) </script>

Vue-loader简单的目录结构:

index.html         主页面

main.js            入口文件,为webpack打包准备

App.vue         vue文件组件,官方推荐命名法,第一个字母大写

package.json     工程文件(放置项目依赖、名称、配置)

webpack.config.js webpack配置文件

ES6语法: 模块化开发思想

导出模块:  export default {}

引入模块:    import 自定义模块名 from 地址

npm init --yes   该指令可生成package.json文件

--save-dev  :  将下载的文件写入配置文件中的"devDependencies"

--save:       将下载的文件写入配置文件中的"dependencies"

使用Vue-loader的准备工作:

1、下载webpack:   出现node_modules文件

npm install webpack --save-dev    不带服务器的版本

npm install webpack-dev-server --save-dev    带服务器的版本

在package.json中的“scripts”对象中,配置好运行打开监听端口指令,--port 8082为自定义端口,默认为8080端口

  "scripts": {

    "dev": "webpack-dev-server --inline --hot --port 8082"

  },

在命令行打开文件目录,输入npm run dev

在浏览器打开http://localhost:8082/   即可访问

2、下载vue-loader :  node_modules文件内出现vue-loader文件

vue-loader可以将App.vue等文件编译成正常文件

npm install vue-loader@8.5.4 --save-dev     使用8.5.4 版本

3、下载解析vue文件内部HTML、CSS、JS所需要的模块

vue-html-loader                解析HTML部分

css-loader、vue-style-loader    解析style部分

vue-hot-reload-api@1.3.2       解析JS部分,使用1.3.2 版本

cnpm install vue-html-loader  css-loader  vue-style-loader vue-hot-reload-api@1.3.2  --save-dev  一次性下载所有loader

4、下载babel-loader 以及需要的各个babel插件

babel-loader   可以把ES6语法编译成ES5语法的模块

babel-loader

babel-core

babel-plugin-transform-runtime

babel-preset-es2015

babel-runtime

npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

5、下载vue@1.0.28

npm install vue@1.0.28 --save

模块化开发,加入路由:配合vue-loader使用

1、下载vue-router@0.7.13模块

npm install vue-router@0.7.13 --save-dev

2、在入口文件里引入vue-router并使用

import VueRouter from 'vue-router'

Vue.use(VueRouter);

3、在入口文件中配置路由

var router=new VueRouter();

router.map({

路由规则

})

router.start(App,'#app');

注意事项:

使用了路由后,原本index.html文件中的<app></app>改变

变成<div id="app"></div>,

App.vue文件中的模版需要一个 <div id="app"></div>作为父元素包裹

关于项目的打包上线:

在package.json文件文件增加"build":"webpack -p"

命令行执行  npm run build

关于vue-cli 脚手架:帮助你搭好基本的项目结构

提供了多种模版:

simple 最简单的模版,只具备基本的语法

webpack 集合多种功能,如Eslint 检查代码规范,单元测试

webpack-simple     没有代码检查

基本使用流程:

1. npm install vue-cli -g            安装 vue命令环境

如何验证安装ok?        vue --version       教程使用2.4.0

2. 生成项目模板

vue init <模板名> 本地文件夹名称

例如:vue init simple#1.0  simple-test

vue init webpack#1.0 webpack-test

vue init webpack-simple #1.0 webpack-simple-test

端口号 config/index.js里面修改

3. 进入到生成目录里面   cd xxx

4. 按照依赖项 npm install

5. npm run dev

如何在脚手架里面使用less

1、安装需要使用到的less模块和less-loader模块

并在wenpack.config.js里面配置

命令行:npm i install less less-loader --save-dev

配置: { test: /\.less$/, loader: 'less'}

2、在<style></style>标签中加入 lang=”less”

lang=”less”  表示声明语言

scoped     表示局部的,里面的样式只有当前文件可以使用

如何在脚手架里面使用scss

安装node-sass ,sass-loader,vue-style-loader,css-loader

lang=“scss”

npm install vue-cli -g

vue init webpack-simple #1.0 webpack-simple-test

npm install vue-router --save

cd vue-test

npm install

npm run dev.

关于Vue的路由、脚手架笔记的更多相关文章

  1. vue.js路由学习笔记二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. vue.js路由学习笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?

    环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的 ...

  4. vue简单路由(一)

    在项目中,将vue的单页面应用程序改为了多页面应用程序,因此在某些场景下,需要频繁的切换两个页面,因此考虑使用路由,这样会减少服务器请求. 使用vue-cli(vue脚手架)快速搭建一个项目的模板(w ...

  5. Vue基础知识学习笔记

    一.环境搭建1.安装nodejs ((https://nodejs.org/en/)2.安装脚手架 npm install --global vue-cli /cnmp install --globa ...

  6. vue搭建vue-cli脚手架项目

    一.Node.js 1.介绍 Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js是一个基于Ch ...

  7. vue(5)—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  8. vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失

    vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...

  9. vue的路由映射问题

    遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...

  10. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

随机推荐

  1. C++中double类型的数字如何保留三位小数点详解

    我们知道C语言中,如果要求输出结果保留三位小数,我们可以使用pritf()函数轻松的解决.但是C++的输出运算符<<并没有直接实现这个功能,怎么办呢?之前在找答案的过程中各路大神给出了千姿 ...

  2. volatile关键字的特性总结

    当一个变量定义为volatile后,它将具备两个特性: 1.保证此变量对所有线程的可见性,所谓"可见性",,是指当一个线程修改了这个变量的值,新值对于其他线程来说是可以立即得知的. ...

  3. 浅谈MVC MVP MVVM

    复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用. 它本身很容易理解,但是要讲清楚,它与衍生的 MVP ...

  4. Pyqt4的对话框 -- 预定义对话框

    QinputDialog提供了一种获取用户单值数据的简介形式. 它接受的数据有字符串.数字.列表中的一项数据 # QInputDialog 输入对话框 # 本示例包含一个按钮和一个行编辑部件.单击按钮 ...

  5. 【SSD,FIO,SAS选择的一些小结】SSD,FIO,SAS选择的一些小结

    最近重新摊上了数据库,公司核心数据库天天 IO爆满,在研究用SAS 16*RAID10 ,还是RAID10 SSD*6, 还是FIO:no.1 principle, no raid-5 for dat ...

  6. Redis随笔(四)Centos7 搭redis3.2.9集群-3主3从的6个节点服务

    1.虚拟机环境 使用的Linux环境已经版本: Centos 7   64位系统 主机ip: 192.168.56.180 192.168.56.181 192.168.56.182 每台服务器是1主 ...

  7. js 数组的常用方法

    pop,push,reverse,shift,sort,splice,unshift 会改变原数组 join,concat,indexOf,lastIndexOf,slice,toString 不会改 ...

  8. 分析uboot中 make xxx_config过程

    make xxx_config实质上就是调用了 首先看MKCONFIG: [注意]SRCTREE=源文件下的目录 之后的语句: @$(MKCONFIG) $(@:_config=) arm arm92 ...

  9. 了解adb的基本原理

    ADB就是Android调试桥的意思,很形象.但不知道是windows本身的原因还是windows乱七八糟软件太多,用USB调试手机时,经常连不上ADB,或者就出现offline,导致费时费力,焦头烂 ...

  10. Zabbix实战-简易教程--宏变量(Macro)

    一.概述 Zabbix支持许多在多种情况下使用的宏.宏是一个变量,由如下特殊语法标识:MACRO 有效地使用宏可以节省时间,并使Zabbix变地更加高效. 在一个的典型用途中,宏可以用于模板中.因此, ...