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一样有一个一样 ...
随机推荐
- 光驱SSD安装Win7+ubuntu系统双系统
准备条件: U盘,32GB,三星品牌 SSD,120GB,三星品牌 win7旗舰版,Ghost系统(安装简单嘛),Ylmf_Ghost_Win7_SP1_x64_2016_1011.iso ubunt ...
- 电子线路 PCB 中大电流 接口 和 布线问题;
问题1:电流 大小 和 PCB 中 布线线宽的 关系,电源和信号 稳定性? 问题2:大电流中 接口问题,如microUSB 充电接口中,2A等 快充时接口 会 发热,如果 接口的 布线 太细和 不妥善 ...
- 关于ubuntu下sublime text 3 的安装和中文配置问题
一.sublime text 3 在ubuntu 16.04下的安装过程 1)首先下载sublime text 3 的tar包 $ wget https://download.sublimetext. ...
- JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)
1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...
- jquery_DOM笔记2
属性操作; addClass() 添加指定的类名.用于切换效果 after() 在元素后面插入 before() 在元素之前插入 append()在元素后面添加 appendTo() 一直在元素尾部添 ...
- BluetoothChat用于蓝牙串口通信的修改方法
本人最近在研究嵌入式的串口通信,任务是要写一个手机端的遥控器用来遥控双轮平衡小车.界面只用了一个小时就写好了,重要的问题是如何与板子所带的SPP-CA蓝牙模块进行通信. SPP-CA模块自带代码,在这 ...
- 带参方法的执行:普通方法的查询,可为空方法的查询。批量处理SQL语句。
普通方法的查询: @Override public List<Map<String, Object>> selectSpentAmount(Integer MAT_TYPE_, ...
- client offset screen 的区别
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...
- 如何灵活运用Linux 进程资源监控和进程限制
导读 每个 Linux 系统管理员都应该知道如何验证硬件.资源和主要进程的完整性和可用性.另外,基于每个用户设置资源限制也是其中一项必备技能. 在这篇文章中,我们会介绍一些能够确保系统硬件和软件正常工 ...
- 码途有道----基于系统观的核心能力构建-by-韩宏老师
原文链接:http://blog.sina.com.cn/s/blog_7d5a09f90102v341.html 有感于同学们在大学中如何学习计算机技术有些感概,将我书(老码识途)中的序言整理了一下 ...