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一样有一个一样 ...
随机推荐
- 关于编写性能高效的javascript事件的技术
如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍,轰动了整个web开发技术界,让神秘的web前端优化问题成为了 ...
- Eclipse 中文的设置
步骤如下:一.下载:在Eclipse官网下载相应版本的中文包. 二.中文包安装:1.解压中文语言包中的两个文件夹至Eclipse文件夹的dropins文件夹中.(目录不要放错)2.安装:方法一:使用命 ...
- shell test用法
1)判断表达式 if test (表达式为真) if test !表达式为假 test 表达式1 –a 表达式2 两个表达式都为真 test 表达式1 –o 表达式 ...
- Linux文件类型
1.windows系统和Linux系统的区别 windows通过问价扩展名来区分文件类型,例如*.txt是一个文本文件, linux系统文件的扩展名和文件类型没有关系 为了容易区分文件类型,linux ...
- 使用mysqlslap对mysql进行压测,观察Azure虚拟机cpu使用率
一直想做这个测试,原因很简单,很多人一直比较怀疑Azure的虚拟机性能,说相同的配置凭啥比阿里的虚拟机贵那么多,其实,我自己以前也怀疑过,但是接触Azure的几个月,确实发现Azure的虚拟机性能真的 ...
- web 安全杂谈
以前写过一篇关于session.cookie的博文,都是简单的介绍.不过session和cookie和网络安全可有着密切的关系. 今天主要从这几个方面总结下最近学到的东西: 1. session 两种 ...
- 安装Axure7.0,完整教程,有验证码和汉化包
以下内容由Axure中文网 » Axure7.0中文汉化语言包下载 axure汉化包 改编,特此声明 1.下载安装包 官方下载页面: http://www.axure.com/download 官网直 ...
- 《C程序设计语言》- 字符输入和输出
书籍介绍: 本书是机械工业出版社的第2版·新版,作者两位,其中一位是C语言之父Dennis Ritchie,另一位是Brian Kernighan,也是一位牛人. 本书的目的是帮助读者学习如何用C语言 ...
- 天河微信小程序入门:阿里云tomcat免费配置https
天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我 ...
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...