最近使用了vue来做SPA应用,记一波学习笔记。

使用vue+webpack实现前端模块化。

vuejs——轻量、学习成本低、双向绑定、无dom的操作、组件的形式编写

推荐官方文档

vue.js官方文档:http://cn.vuejs.org/guide/overview.html

github上webpack地址:https://github.com/webpack/webpack

组件化

提升开发速度,提高效率。

为了图方便,直接在github拉了整个webpack项目。

地址:https://github.com/vuejs-templates/webpack

文件结构目录

让项目跑起来先:RESDME.md里面都有

安装依赖:npm install

启动项目:npm run dev

编译:npm run build

若没有dev-server则用npm start启动,启动完成后cmd窗口会显示端口,例如: http://localhost:8989,前面localhost可换成自己的内网ip,例如:192.168.30.235:8989

未完待续

vue+webpack实践的更多相关文章

  1. Vue + webpack 项目实践

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  2. nodejs, vue, webpack 项目实践

    vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...

  3. [vue]webpack&vue组件工程化实践

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  4. webpack + vue最佳实践

    webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...

  5. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  6. Vue + Webpack + Vue-loader 1

    Vue + Webpack + Vue-loader 原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue ...

  7. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  8. 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

    如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...

  9. vue学习:vue+webpack的快速使用指南(新手向)

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

随机推荐

  1. 面向云的.net core开发框架

    目录结构 1 为什么搭建面向云的.Net core云开发框架 2 主要设计思路 3 项目解决方案 4 基础设施层 4.1反射工具 4.2多级可换源的配置(上) 42多级可换源的配置(下) 4.3可配置 ...

  2. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  3. delphi连接sql存储过程

    针对返回结果为参数的 一. 先建立自己的存储过程 ALTER PROCEDURE [dbo].[REName] ) AS BEGIN select ROW_NUMBER() over(order by ...

  4. View and Data API Tips: Constrain Viewer Within a div Container

    By Daniel Du When working with View and Data API, you probably want to contain viewer into a <div ...

  5. npm更新到最新版本的方法

    打开命令行工具 npm -v 查看是否是最新版本 如果不是 运行npm i npm g 升级 打开C:\Users\用户名用户目录找到node_modules 文件夹下的npm文件夹,复制一份 打开n ...

  6. react native初步常见问题

    首先按照资料一步步搭建环境运行,然后成功了,很激动,可是,安卓就是没这么容易成功,还是太年轻了 could not get batchedbridge, make sure your bundle i ...

  7. Laravel大型项目系列教程(一)

    Laravel大型项目系列教程(一) 一.课程概述 1.课程介绍 本教程将使用Laravel完成一个多用户的博客系统,大概会包含如下内容: 路由管理. 用户管理,如用户注册.修改信息.锁定用户等. 文 ...

  8. 让代码更简单——自定义toBean实现

    经过历时三天的鏖战,终于将阶段性项目——新闻发布系统做完了.在编码过程中,发现了很多冗余代码,统一流程,却需要不断重复编码——将用户输入实例化为对象的过程. 例: Person.set("i ...

  9. Java 根据经纬度计算两点之间的距离

    package xxx.driver.business.utils; /** * <p>Represents a point on the surface of a sphere. (Th ...

  10. TNS-12535: TNS:operation timed out案例解析

    一数据库突然连接不上,在自己电脑上使用SQL Developer也连接不上.立即使用SecureCRT连接上了这台服务器,从下面几个方面检查. 1:检查了数据库的状态是否正常 $ sqlplus / ...