最详细的Vue Hello World应用开发步骤
很多Vue的初学者想尝试这个框架时，都被webpack过于复杂的配置所吓倒，导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用webpack打包一个Vue Hello World应用的所有步骤详细记录下来，供Vue的初学者参考。
安装nodejs和npm，这两个就不用说了，网上很多教程。
本地随便新建一个文件夹，进入后运行命令npm init, 一路next下去，自动生成package.json。
运行命令npm install –save-dev webpack-dev-server，安装一个轻量级的服务器，该服务器用于vue应用开发完毕后的本地测试。
重复执行命令npm install –save-dev ，也就是把下列命令粘贴到cmd里进行执行：
npm install –save-dev css-loader
npm install –save-dev vue-template-compiler
npm install –save-dev webpack
npm install –save-dev vue-loader
npm install –save-devvue-router
参数-save-dev的效果是让这些安装的module出现在package.json的devDependencies区域内，如下图红色区域所示：
这些都是开发时依赖。我们再用下列命令安装运行时依赖：
npm install –save vue vuex
然后再在package.json里手动加入如下这一段内容：
目的是开发完毕后，使用命令npm run dev可以启动webpack-dev-server，运行我们的vue应用，并带上参数--inline --hot。
- 在项目文件夹根目录下创建一个名为src的文件夹，文件夹里新建一个文件index.vue，把如下内容拷贝进去：
<style>
h2{
color: red;
}
</style>
<template>
<h2>Jerry: Hello, World!</h2>
</template>
<script>
module.exports = {
data: function(){
return {};
}
}
</script>
再回到根目录下，新建一个文件main.js:
import Vue from 'vue';
import AppJerry from './src/index.vue'
new Vue({
el: "#demo",
components: {
app: AppJerry
}
});
这段代码首先将我们在src文件夹的index.vue里实现的应用导出，存储到变量AppJerry里，再将这个应用安装到html页面id为demo的div标签里。安装是通过创建Vue实例并将div元素的id传入构造函数里进行的。当然，我们还没创建html文件，所以马上创建一个名为index.html的文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="demo">
<app></app>
</div>
<script src="dist/build.js"></script>
</body>
</html>
我们注意到这个index.html里引用了一个dist/build.js的文件，这个文件用来干嘛的？
这里就不得不提webpack在现代前端开发技术中起的重要作用了。WebPack可以看做是模块打包机：它做的事情是，分析我们的前端项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，比如Scss，TypeScript等，并将其打包为合适的格式以供浏览器使用。具体到我们这个例子，就是说webpack把我们src文件夹下的index.vue打包转换成浏览器能识别的js文件，webpack的输出就是dist文件夹下的build.js文件。
为了让webpack清楚地知道它要完成什么样的任务，我们通过创建一个配置文件webpack.config.js来完成webpack任务指定。
这个配置文件的内容：
var path = require('path');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpg|eot|svg|ttf|woff)/,
loader: 'url?limit=40000'
}
]
}
}
里面定义了webpack执行任务的入口是main.js文件，任务输出的文件夹是项目文件夹里的dist目录，输出文件是build.js, webpack扫描的文件通过vue-loader指定，特征是以.vue结尾的文件。
到目前为止，这个基于Vue的hello world应用的开发和配置都结束了，是不是很简单？
我们可以来测试了。
- 直接在命令行里敲webpack命令，就会自动执行打包操作，并在控制台上看到build.js文件成功生成的消息：
这个打包后的文件尺寸很大，有323KB，包含了vue.js本身的内容和我们index.vue里的转换后的内容。下图高亮区域就是我们index.vue里的实现被webpack处理后生成对应的JavaScript代码。
使用npm run dev启动webpack-dev-server，看到提示说在localhost:8080上可以访问我们的应用了。
浏览器里访问，看到Hello World的输出，说明我们成功地走完了一个基于webpack的Vue应用开发流程。
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
uto-orient/strip%7CimageView2/2/w/1240)
最详细的Vue Hello World应用开发步骤的更多相关文章
- 基于Vue的WebApp项目开发（三）
实现根组件通用的头部和底部样式 明白由webpack搭建起来的Vue项目的执行流程,那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可 <!--以后项目的根组件--> < ...
- 【06】Vue 之 组件化开发
组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
- 循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用
在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般 ...
- 循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- 循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
- 循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理>中介绍了用户管理模块的内容,包括用户列表的展示,各种查看.编辑.新增对话框的界面处理和后台数据处 ...
- 循序渐进VUE+Element 前端应用开发(17）--- 菜单资源管理
在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...
- 循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制
在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...
- 循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码
VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
随机推荐
- EF 连接到 Azure-SQL
using Autofac; using Autofac.Integration.Mvc; using System; using System.Collections.Generic; using ...
- python风味之list创建
单重for循环 >>> [x * x for x in xrange(10)] [0, 1, 4, 9, 16, 25, 36, 49, 64, 81] 单重for循环+if条件 & ...
- Java ee 之 html/css样式复习
内容: 1,html/css样式 2,模拟简书注册登陆页面 *重点: 1,width:auto;height:auto; 2,background-image:url(Q5.png);left top ...
- 深入理解JavaScript系列（结局篇）
介绍 最近几个月忙得实在是不可开交,终于把<深入理解JavaScript系列>的最后两篇“补全”了,所谓的全是不准确的,因为很多内容都没有写呢,比如高性能.Ajax安全.DOM详解.Jav ...
- canvas绘制经典星空连线效果
来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...
- api下载文件
net /// <summary> ///字符流下载方法 /// </summary> /// <param name="fileName">下 ...
- easyui导出当前datagrid数据（Word）
JS代码可参考http://www.cnblogs.com/mu1516633121/p/7753423.html 同样是winform架构下应用到Aspose.Words来读写Word文档 其中Se ...
- RabbitMQ - 介绍
RabbitMQ是个健壮.易用.开源.支持多种操作系统和语言的message broker. 当然,一切的前提是机器里面正在运行着rabbitmq-server. 点击下面的图片下载: rabbitM ...
- git flow强制重新初始化
Gitflow工作流定义了一个围绕项目发布的严格分支模型. git flow初始化命令: git flow init 关于各个分支的命名一路回车就可以了,如果不小心修改了默认的分支命名,后来又觉得不爽 ...
- redis(8)集群简介
一.集群 互联网每天都会产生大量的数据,单实例已经不能满足需求.但是如果依赖于硬件成本的提升,那就不是所有人能够负担的起的. 集群这个时候出现,一定程度上解决了这个问题.它通过互联网,将多个单实例连接 ...