使用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请 ...
随机推荐
- 5、springboot之修改端口号
在resources中加入application.properties文件,里面加入 servier.port = 端口号 访问的时候,就用localhost:端口号 完事
- Python-并发编程(协程)
今天说说协程 一.引子 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两 ...
- 软件项目技术点(7)——在canvas上绘制自定义图形
AxeSlide软件项目梳理 canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...
- 初学者需要IPython 与 Jupyter Notebook 吗?
ipython 是 jupyter notebook的前身并拥有ipython的全部功能 jupyter拥有 cell, markdown 整合的功能, 能同时运行代码, 而且是多组的 ...
- UNIX/Linux系统管理技术手册(2)----bash脚本编程
1. 一个简单的例子: $ vim readname.sh #file:readname.sh#!/bin/bash echo -n "Enter your name: " rea ...
- springboot 使用webflux响应式开发教程(二)
本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...
- Android DB类,支持MDB,SQLITE,SQLSERVER,支持查询、事务,对象直接插入和更新操作等
直做数据库,最近花了点时间把自己常用的东西封装在一起. DBHelper using System; using System.Collections.Generic; using System.Te ...
- 【Python】猜数小游戏(文件操作)
人生苦短,我用Python 关键词 1.多用户 2.字典记录所有成绩 3.每次游戏轮数&总游戏次数&平均每次游戏需要多少轮 字典Dictionary.列表List.元组Tuple差异化 ...
- Ganglia安装
一.rrdtool安装 1.1 安装依赖包 由于rrdtool依赖的包比较多,而且包之间也存在依赖,故使用yum安装由于服务器无法联网,故使用iso文件创建本地yum源,方法见下: (1)创建iso存 ...
- 1.初次运行git前的配置
在系统上安装了 Git后,你会想要做几件事来定制你的 Git 环境. 每台计算机上只需要配置一次,程序升级时会保留配置信息. 你可以在任何时候再次通过运行命令来修改它们. Git 自带一个 git c ...
