使用Vue构建单页应用一
一、 环境准备
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构建单页应用一的更多相关文章
- 使用 Vuex + Vue.js 构建单页应用
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
- 使用 Vuex + Vue.js 构建单页应用【新篇】
使用 Vuex + Vue.js 构建单页应用[新篇] 在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部 ...
- React构建单页应用方法与实例
React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
- 通过Web Api 和 Angular.js 构建单页面的web 程序
通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...
- vue+vuex构建单页应用
基本 构建工具: webpack 语言: ES6 分号:行首分号规则(行尾不加分好, [ , ( , / , + , - 开头时在行首加分号) 配套设施: webpack 全家桶, vue 全家桶 项 ...
- 新手vue构建单页面应用实例
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请 ...
随机推荐
- 获取指定包名下继承或者实现某接口的所有类(扫描文件目录和所有jar)
import java.io.File; import java.io.FileFilter; import java.io.IOException; import java.net.JarURLCo ...
- node.js学习网址
七天学会NodeJS: http://www.open-open.com/lib/view/1392611872538 https://nodejs.org/api/ Node.js v0.10.18 ...
- SQL2008使用with求余额表,流水账方式
1.先准备数据,将要求余额的表数据插入临时表 SELECT Serial, VoucherNum, SubjectNum, SubjectName, Direction, Amount INTO #T ...
- js-TextArea的换行符处理
js-txt文本处理 写自己主页项目时所产生的小问题拿出来给大家分享分享,以此共勉. ---DanlV TextArea的换行符处理 TextArea文本转换为Html:写入数据库时使用 js获取了t ...
- CentOS 7运维管理笔记(7)----Apache 基于端口的虚拟主机配置
如果一台服务器只有一个IP或需要通过不同的端口访问不同的虚拟主机,可以使用基于端口的虚拟主机配置. (1) 在虚拟机的CentOS7服务器上配置 eth0:4 为192.168.1.214: (2) ...
- 如何在 Azure 中的 Linux 经典虚拟机上设置终结点
在 Azure 中使用经典部署模型创建的所有 Linux 虚拟机都可以通过专用网络通道与同一云服务或虚拟网络中的其他虚拟机自动通信. 但是,Internet 或其他虚拟网络中的计算机需要终结点将入站网 ...
- 【Leetcode】【Medium】Remove Duplicates from Sorted Array II
Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...
- 批量检查多个网址是否正常(shell编程)
#!/bin/bash #version 1.1 #by zengj #using checking urls . /etc/init.d/functions checkurl() { wget -o ...
- 在Ubuntu16.04.4上安装docker
在Ubuntu16.04.4上安装docker 一.环境准备 首先我们需要一台Ubuntu16.04 虚拟机或者真机,其次,我们对其进行环境配置. 1.1.移除已经安装过的dock ...
- Intellij idea用快捷键自动生成序列化id
ntellij idea用快捷键自动生成序列化id 类继承了Serializable接口之后,使用alt+enter快捷键自动创建序列化id 进入setting→inspections→seriali ...
