关于Vue的路由、脚手架笔记
在页面引入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
npm install vue@1.0.28 --save
模块化开发,加入路由:配合vue-loader使用
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的路由、脚手架笔记的更多相关文章
- vue.js路由学习笔记二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue.js路由学习笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?
环境: 有2个业务接口需要转发到82的服务器上: ../user/getCode.do ../user/doLogin.do 现象: 使用上述的 ...
- vue简单路由(一)
在项目中,将vue的单页面应用程序改为了多页面应用程序,因此在某些场景下,需要频繁的切换两个页面,因此考虑使用路由,这样会减少服务器请求. 使用vue-cli(vue脚手架)快速搭建一个项目的模板(w ...
- Vue基础知识学习笔记
一.环境搭建1.安装nodejs ((https://nodejs.org/en/)2.安装脚手架 npm install --global vue-cli /cnmp install --globa ...
- vue搭建vue-cli脚手架项目
一.Node.js 1.介绍 Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js是一个基于Ch ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
随机推荐
- Android 内存暴减的秘密?!
作者:杨超,腾讯移动客户端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest 导读 在我这样减少了26.5M Java内存! 一文中内存优化一期已经告一段落, ...
- 基于Dubbo的http自动测试工具分享
公司是采用微服务来做模块化的,各个模块之间采用dubbo通信.好处就不用提了,省略了之前模块间复杂的http访问.不过也遇到一些问题: PS: Github的代码示例还在整理中... 测试需要配合写消 ...
- CSS 去掉inline-block间隙的几种方法
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...
- 前端学习_02_vps、web服务器、域名申请
vps申请 国内比较好用的服务器:阿里云,青云:在国内申请ip比较方便,但是必须要备案域名,否则马上就会被封禁掉. 话说我也有点自己的思路想做个网站,服务器还真的是个问题. 小型的网站只需要ECS服务 ...
- [Android游戏开发]八款开源 Android 游戏引擎 (巨好的资源)
初学Android游戏开发的朋友,往往会显得有些无所适从,他们常常不知道该从何处入手,每当遇到自己无法解决的难题时,又往往会一边羡慕于 iPhone下有诸如Cocos2d-iphone之类的免费游戏引 ...
- 01-Java基础及面向对象
JAVA基础知识 Java 是SUN(Stanford University Network,斯坦福大学网络公司)1995年推出的一门面向 Internet 的高级编程语言. Java 虚拟机(JVM ...
- Mysql使用小tips
一..常用函数 1.IFNULL(expr1,expr2) 如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值, ...
- python3之正则表达式
1.正则表达式基础 正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不然str自带方法,但功能十分强大. 正则表达式的大致匹配流程:依次拿出表达式和文本中的字 ...
- 三十分钟学会AWK
摘要: 本文大部分内容翻译自我开始学习AWK时看到的一篇英文文章 AWK Tutorial ,觉得对AWK入门非常有帮助,所以对其进行了粗略的翻译,并对其中部分内容进行了删减或者补充,希望能为对AWK ...
- 数据结构-堆 C与C++的实现
堆,是一种完全二叉树.而且在这颗树中,父节点必然大于(对于小顶堆为小于)子节点. 关于树的概念不了解可以看这里:http://www.cnblogs.com/HongYi-Liang/p/723144 ...