• 大纲:
  1. 属性
  2. 事件
  3. 循环
  4. 指令
  5. 交互
  6. 过滤器
  7. 模板
  8. 计算属性
  9. 自定义过滤器和指令
  10. 组件(父子组件之间的通讯)
  11. 路由和多层路由以及占位槽slot等其他
  12. 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的使用及安装:
  1. 工程文件简单的目录结构

  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学习之旅的更多相关文章

  1. vue学习之旅:入门

    首先利用脚手架vue cli搭建vue环境 引入 vue <script src="https://unpkg.com/vue/dist/vue.js"></sc ...

  2. Vue学习之旅:todomvc的学习练习

    一.前奏 1.todomvc官网地址:http://todomvc.com/ 查阅文档和下载插件都可以到这个官网上找. 2.上GitHub上搜索下载有人做的现成的本地模板:进入GitHub搜索todo ...

  3. WCF学习之旅—第三个示例之四(三十)

           上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九)   ...

  4. Hadoop学习之旅二:HDFS

    本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...

  5. WCF学习之旅—第三个示例之二(二十八)

    上接WCF学习之旅—第三个示例之一(二十七) 五.在项目BookMgr.Model创建实体类数据 第一步,安装Entity Framework 1)  使用NuGet下载最新版的Entity Fram ...

  6. WCF学习之旅—第三个示例之三(二十九)

    上接WCF学习之旅—第三个示例之一(二十七) WCF学习之旅—第三个示例之二(二十八) 在上一篇文章中我们创建了实体对象与接口协定,在这一篇文章中我们来学习如何创建WCF的服务端代码.具体步骤见下面. ...

  7. WCF学习之旅—WCF服务部署到IIS7.5(九)

    上接   WCF学习之旅—WCF寄宿前的准备(八) 四.WCF服务部署到IIS7.5 我们把WCF寄宿在IIS之上,在IIS中宿主一个服务的主要优点是在发生客户端请求时宿主进程会被自动启动,并且你可以 ...

  8. WCF学习之旅—WCF服务部署到应用程序(十)

    上接  WCF学习之旅—WCF寄宿前的准备(八) WCF学习之旅—WCF服务部署到IIS7.5(九) 五.控制台应用程序宿主 (1) 在解决方案下新建控制台输出项目 ConsoleHosting.如下 ...

  9. WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一)

    上接    WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) 七 WCF服务的Windows 服务程序寄宿 这种方式的服务寄宿,和IIS一样有一个一样 ...

随机推荐

  1. 在本地调试移动设备上的页面——神器weinre介绍

    平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具.但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有dev ...

  2. SQL Server群集如何在线检测

    SQL Server群集知识介绍 Windows群集安装 基于iSCSI的SQL Server 2012群集测试 前言 群集的检测是调用dll资源,例如对于共享存储,ip,网络名称与DTC 这类Win ...

  3. 关于unity如何制作mmo

    昨天去看了下unity的成都openday,还是有很多收获的,之前我对于这类的活动始终提不起来兴趣,不过看来日后还是要多参加下类似的活动长长见识. 公司打算开发3d mmo手游,昨天好玩123恰好也分 ...

  4. Java EE 经验

    环境配置 GlassFish Error 1 Exception while loading the app : CDI deployment failure:Error loading class ...

  5. EXTJS中grid的数据特殊显示,不同窗口的数据传递

    //EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...

  6. git知识点整理

  7. django rest framework 再撸体验

    曾经了解过. 放在一边,嫌麻烦. 如今身为leader,站在团队沟通的角度看看,还不错. 有几个优点: 1. api一览表 2. api web预览界面(类似.net的webservice预览界面), ...

  8. EndNote(三)之中文引文导入方式

    上一篇文章讲了Web of Science,PubMed的引文如何导入到EndNote中.这次,写一下常用的中文文献查找网站的引文如何导入EndNote. 本人常用的中文文献查找网站,主要是知网(CN ...

  9. Unity 编译错误记录

    1. 相关代码: NetworkView.RPC ("ReceiveMessage", RPCMode.All, message); 编译输出: Assets/cs/ClientC ...

  10. android分页请求,重复数据如何处理

    1.如图 如图上的ks031数据,在数据请求时,第一次请求20条数据,再次加载下一页20条数据时,后台的数据处理导致ks031排序到了第2页,出现加载重复现象, 这种情况则是怎么处理? 有谁明白,求指 ...