vue学习之旅
- 大纲:
- 属性
- 事件
- 循环
- 指令
- 交互
- 过滤器
- 模板
- 计算属性
- 自定义过滤器和指令
- 组件(父子组件之间的通讯)
- 路由和多层路由以及占位槽slot等其他
- vue-loader和模块加载(webpack)等工程化问题
- vue的包管理器--bower:
安装:npm install bower -g 验证:bower --version
bower install 包名
bower uninstall 包名
bower info 包名 查看版本信息
eg:bower install vue#1.0.28 安装指定得版本号的vue.js文件
bower install vue-router#0.7.13 安装指定版本号的vue-router.js文件
- vue-loader配合webpack的使用及安装:
- 工程文件简单的目录结构
index.html
main.js 入口文件
App.vue vue文件,官方推荐命名法
package.json 工程文件(项目依赖,名称,配置)
npm init --yes 生成
webpack.config.js webpack配置文件
ps: es6模块化开发 导出模块:export default {} 引入模块:import 模块名 from 地址
2.webpack的准备工作
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-laoder@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2
babel-loader bable-core babel-plugin-tranform-runtime babel-preset-es2015 babel-runtime(为了es6,又不用脚手架,故手配)
ps:.vue文件没有颜色的插件下载https://github.com/vuejs/vue-syntax-highlight
- vue-loader+vue-router
路由配合vue-loader使用:
1.下载vue-router模块 cnpm install vue-router@0.7.13
2.import VueRouter from 'vue-router' //很显然这个是在入口引入main.js
3.Vue.use(VueRouter); //vue-router基于vue使用,所以必须这样
4.配置路由
const router = new VueRouter();
router.map({
。。。路由规则
});
5.开启路由!!每次总忘 router.start(App,'一个容器,如#app');
注意:不用路由时 index.html -> <app></app>
用路由 index.html -> <div id="app"></div>
App.vue -> 需要一个<div id="app"></div>根元素
- 路由嵌套
import Login from './components/login.vue'
subRoutes:{
'login':{
component:Login
}
}
其实路由嵌套跟单层路由一样的,只是多了引入模块的环节,加上subRoutes的运用,道理一样的。重要的是把握配置路由文件要单独抛出来便于维护也很解耦,针对性专一。
- 利用webpack的构建和上线
1.在package.json的script中加入:“build”:"webpack -p"
-p的意思是打包压缩。
2.然后就不需要用npm run dev了,只要npm run build就行了。
npm run bulid的本质就是运行了webpack -p;
3.然后在index.html中右键,open in browser就可以访问了
eg: https://github.com/itbainianmei/vue-loader-vue-router
由于配置过程中,全程带了--save-dev,所以每个人拿到项目运行时,只要npm install或者 cnpm install就行了。
vue学习之旅的更多相关文章
- vue学习之旅:入门
首先利用脚手架vue cli搭建vue环境 引入 vue <script src="https://unpkg.com/vue/dist/vue.js"></sc ...
- Vue学习之旅:todomvc的学习练习
一.前奏 1.todomvc官网地址:http://todomvc.com/ 查阅文档和下载插件都可以到这个官网上找. 2.上GitHub上搜索下载有人做的现成的本地模板:进入GitHub搜索todo ...
- WCF学习之旅—第三个示例之四(三十)
上接WCF学习之旅—第三个示例之一(二十七) WCF学习之旅—第三个示例之二(二十八) WCF学习之旅—第三个示例之三(二十九) ...
- Hadoop学习之旅二:HDFS
本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...
- WCF学习之旅—第三个示例之二(二十八)
上接WCF学习之旅—第三个示例之一(二十七) 五.在项目BookMgr.Model创建实体类数据 第一步,安装Entity Framework 1) 使用NuGet下载最新版的Entity Fram ...
- WCF学习之旅—第三个示例之三(二十九)
上接WCF学习之旅—第三个示例之一(二十七) WCF学习之旅—第三个示例之二(二十八) 在上一篇文章中我们创建了实体对象与接口协定,在这一篇文章中我们来学习如何创建WCF的服务端代码.具体步骤见下面. ...
- WCF学习之旅—WCF服务部署到IIS7.5(九)
上接 WCF学习之旅—WCF寄宿前的准备(八) 四.WCF服务部署到IIS7.5 我们把WCF寄宿在IIS之上,在IIS中宿主一个服务的主要优点是在发生客户端请求时宿主进程会被自动启动,并且你可以 ...
- WCF学习之旅—WCF服务部署到应用程序(十)
上接 WCF学习之旅—WCF寄宿前的准备(八) WCF学习之旅—WCF服务部署到IIS7.5(九) 五.控制台应用程序宿主 (1) 在解决方案下新建控制台输出项目 ConsoleHosting.如下 ...
- WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一)
上接 WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) 七 WCF服务的Windows 服务程序寄宿 这种方式的服务寄宿,和IIS一样有一个一样 ...
随机推荐
- 浅谈Android样式开发之布局优化
引言 今天我们来谈一下Android中布局优化常用的一些手段.官方给出了3种优化方案,分别是</include>.</viewstub>.</merge>标签,下面 ...
- Android中AIDL的理解与使用(二)——跨应用绑定Service并通信
跨应用绑定Service并通信: 1.(StartServiceFromAnotherApp)AIDL文件中新增接口: void setData(String data); AppService文件中 ...
- html 杂记
<link rel="******" href=“****.css” type=“text/css” media=“screen” />css样式外部链接 加个斜杠 ...
- __run_timers() -- 处理全部超时定时器
__run_timers() -- 处理全部超时定时器 run_timer_softirq() --> __run_timers() /usr/src/linux-/kernel/timer.c ...
- apache和tomcat有什么不同,为什么要整合apache 和tomcat
1. Apache是web服务器,Tomcat是应用(java)服务器,它只是一个servlet容器,是Apache的扩展.2. Apache和Tomcat都可以做为独立的web服务器来运行,但是Ap ...
- protobuf编译出错的解决方案(iOS,OSX)
protobuf 最近使用protobuf,变编译工具时遇上一点问题.现在附上解决方案 编译过程 完全参照 https://github.com/alexeyxo/protobuf-objc 编译出错 ...
- jvm--1.class文件结构
1.字节码(1)bytecode是构成平台无关性的基石 (2)当jvm发展到1.7-1.8的时候,jvm设计者通过,JSR-292,基本可以让其他语言运行在jvm上面. 如,Clojure , Gro ...
- 分布式的Id生成器
项目中需要一个分布式的Id生成器,twitter的Snowflake中这个既简单又高效,网上找的Java版本 package com.cqfc.id; import org.slf4j.Logger; ...
- crontab详解
搜索 纠正错误 添加实例 crontab 提交和管理用户的需要周期性执行的任务 补充说明 crontab命令 被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成 ...
- Qt - 错误总结 - QObject::connect: Cannot queue arguments of type 'PVCI_CAN_OBJ' (Make sure 'PVCI_CAN_OBJ' is registered using qRegisterMetaType().)
背景:一个线程通过signal-slot发送PVCI_CAN_OBJ类型的值到主线程中, 错误提示: QObject::connect: Cannot queue arguments of type ...