在页面引入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. Android 内存暴减的秘密?!

    作者:杨超,腾讯移动客户端开发 工程师  商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest 导读 在我这样减少了26.5M Java内存! 一文中内存优化一期已经告一段落, ...

  2. 基于Dubbo的http自动测试工具分享

    公司是采用微服务来做模块化的,各个模块之间采用dubbo通信.好处就不用提了,省略了之前模块间复杂的http访问.不过也遇到一些问题: PS: Github的代码示例还在整理中... 测试需要配合写消 ...

  3. CSS 去掉inline-block间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

  4. 前端学习_02_vps、web服务器、域名申请

    vps申请 国内比较好用的服务器:阿里云,青云:在国内申请ip比较方便,但是必须要备案域名,否则马上就会被封禁掉. 话说我也有点自己的思路想做个网站,服务器还真的是个问题. 小型的网站只需要ECS服务 ...

  5. [Android游戏开发]八款开源 Android 游戏引擎 (巨好的资源)

    初学Android游戏开发的朋友,往往会显得有些无所适从,他们常常不知道该从何处入手,每当遇到自己无法解决的难题时,又往往会一边羡慕于 iPhone下有诸如Cocos2d-iphone之类的免费游戏引 ...

  6. 01-Java基础及面向对象

    JAVA基础知识 Java 是SUN(Stanford University Network,斯坦福大学网络公司)1995年推出的一门面向 Internet 的高级编程语言. Java 虚拟机(JVM ...

  7. Mysql使用小tips

    一..常用函数 1.IFNULL(expr1,expr2)          如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值, ...

  8. python3之正则表达式

    1.正则表达式基础 正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不然str自带方法,但功能十分强大. 正则表达式的大致匹配流程:依次拿出表达式和文本中的字 ...

  9. 三十分钟学会AWK

    摘要: 本文大部分内容翻译自我开始学习AWK时看到的一篇英文文章 AWK Tutorial ,觉得对AWK入门非常有帮助,所以对其进行了粗略的翻译,并对其中部分内容进行了删减或者补充,希望能为对AWK ...

  10. 数据结构-堆 C与C++的实现

    堆,是一种完全二叉树.而且在这颗树中,父节点必然大于(对于小顶堆为小于)子节点. 关于树的概念不了解可以看这里:http://www.cnblogs.com/HongYi-Liang/p/723144 ...