一、 环境准备

1 安装Node.js  最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/    我使用的是  v6.3.1 Current 版本。Node.js已经集成了包管理器NPM

下载安装包,安装完成后,打开一个命令窗口,可以输入如下命令查看安装版本。

2  安装 webpack

命令:  npm install webpack -g

官方安装教程:http://webpack.github.io/docs/installation.html

webpack 快速开始教程:http://webpack.github.io/docs/tutorials/getting-started/

3 安装Vue 官方提供的脚手架 vue-cli     (在命令行工具里,执行如下命令)

命令:  npm install -g vue-cli

4 初始化应用 (每次新建项目时,从此命令开始,最好转到要新建项目的位置)

命令:vue init webpack vue.web          这个命令执行时,会在当前路径下创建vue.web 的一个目录,所有资源文件都会放在改目录下

cd vue.web  // 进入项目目录
npm install // 安装依赖包 
npm run dev // 启动服务
初始化完成后,打开浏览器,默认执行 127.0.0.1:8080  就可以访问了
(我本地8080 端口被占用了,所以就改为了8081,在config 目录下有一个index.js 文件,打开编辑port 值,改为你想要的。 改完后,重新 执行
命令: npm run dev   重启服务。
二、 开发Vue 单页应用
1  安装路由 
命令: npm install vue-router
 
三、发布系统
1 发布命令:
  npm run build
 
 

使用Vue构建单页应用一的更多相关文章

  1. 使用 Vuex + Vue.js 构建单页应用

    鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...

  2. 使用 Vuex + Vue.js 构建单页应用【新篇】

    使用 Vuex + Vue.js 构建单页应用[新篇] 在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部 ...

  3. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  4. vue2.0 构建单页应用最佳实战

    vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...

  5. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  6. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  7. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  8. vue+vuex构建单页应用

    基本 构建工具: webpack 语言: ES6 分号:行首分号规则(行尾不加分好, [ , ( , / , + , - 开头时在行首加分号) 配套设施: webpack 全家桶, vue 全家桶 项 ...

  9. 新手vue构建单页面应用实例

    本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请 ...

随机推荐

  1. SPDY和HTTP

    SPDY 是什么 ? SPDY 是 Google 开发的基于传输控制协议 (TCP) 的应用层协议.SPDY 协议旨在通过压缩.多路复用和优先级来缩短网页的加载时间和提高安全性.(SPDY 是 Spe ...

  2. Hibernate 函数 ,子查询 和原生SQL查询

    一. 函数 聚合函数:count(),avg(),sum(),min(),max() 例:(1)查询Dept表中的所有的记录条数. String hql=" select count(*) ...

  3. iview中关于table组件内放入Input会失去焦点

    table里面的数据是一个数组,父组件传入的.子组件是截图的内容.当每个input框数据发生变化时,把数据传给父组件.在父组件做表单的提交. github内已经提到过这个问题(https://gith ...

  4. js event事件对象概括

    事件是用户或者浏览器自身执行的动作,而响应某个事件的函数就叫做事件处理程序或者叫事件侦听器. 定义事件处理程序可以大致分为以下三种: 一.html事件处理程序 元素支持的每种事件都可以用一个与之对应的 ...

  5. js String字符串对象常见方法总结

    String对象常用来保存文本形式的数据. 其转化方法有二种: String(s) new String(s) String对象方法有: charAt() charCodeAt() concat() ...

  6. Android Timer和TimerTask

    以下内容根据 The JavaTM Tutorial 和相关API doc翻译整理,以供日后参考: 1.概览 Timer是一种定时器工具,用来在一个后台线程计划执行指定任务.它可以计划执行一个任务一次 ...

  7. CSS布局之传统方法

    传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...

  8. 仿照jQuery进行一些简单的框架封装(欢迎指教~)

    (function(window,undefined){ var arr = [], push = arr.push, slice = arr.slice; //首先要做的就是封装一个parseHtm ...

  9. php遍历数组赋值

    <?php $arr=array( array("num"=>100,"name"=>"Liuxy","scor ...

  10. PHP开发必用的mysql那么你知道Mysql中MyISAM和InnoDB的区别吗?

    构成上的区别: 每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型. .frm文件存储表定义. 数据文件的扩展名为.MYD (MYData). 索引文件的扩展名 ...