关于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 ...
随机推荐
- C++中double类型的数字如何保留三位小数点详解
我们知道C语言中,如果要求输出结果保留三位小数,我们可以使用pritf()函数轻松的解决.但是C++的输出运算符<<并没有直接实现这个功能,怎么办呢?之前在找答案的过程中各路大神给出了千姿 ...
- volatile关键字的特性总结
当一个变量定义为volatile后,它将具备两个特性: 1.保证此变量对所有线程的可见性,所谓"可见性",,是指当一个线程修改了这个变量的值,新值对于其他线程来说是可以立即得知的. ...
- 浅谈MVC MVP MVVM
复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用. 它本身很容易理解,但是要讲清楚,它与衍生的 MVP ...
- Pyqt4的对话框 -- 预定义对话框
QinputDialog提供了一种获取用户单值数据的简介形式. 它接受的数据有字符串.数字.列表中的一项数据 # QInputDialog 输入对话框 # 本示例包含一个按钮和一个行编辑部件.单击按钮 ...
- 【SSD,FIO,SAS选择的一些小结】SSD,FIO,SAS选择的一些小结
最近重新摊上了数据库,公司核心数据库天天 IO爆满,在研究用SAS 16*RAID10 ,还是RAID10 SSD*6, 还是FIO:no.1 principle, no raid-5 for dat ...
- 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主 ...
- js 数组的常用方法
pop,push,reverse,shift,sort,splice,unshift 会改变原数组 join,concat,indexOf,lastIndexOf,slice,toString 不会改 ...
- 分析uboot中 make xxx_config过程
make xxx_config实质上就是调用了 首先看MKCONFIG: [注意]SRCTREE=源文件下的目录 之后的语句: @$(MKCONFIG) $(@:_config=) arm arm92 ...
- 了解adb的基本原理
ADB就是Android调试桥的意思,很形象.但不知道是windows本身的原因还是windows乱七八糟软件太多,用USB调试手机时,经常连不上ADB,或者就出现offline,导致费时费力,焦头烂 ...
- Zabbix实战-简易教程--宏变量(Macro)
一.概述 Zabbix支持许多在多种情况下使用的宏.宏是一个变量,由如下特殊语法标识:MACRO 有效地使用宏可以节省时间,并使Zabbix变地更加高效. 在一个的典型用途中,宏可以用于模板中.因此, ...