最详细的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 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
随机推荐
- Android开发环境搭建步骤-【Android】
本教程是android开发环境在windows下的安装配置,经本人测试完全正确无误.这个教程是史上最详细的android开发环境搭建教程. 工具/原料 Eclipse 3.7.0.Java Jdk6. ...
- 关于80286——《x86汇编语言：从实模式到保护模式》读书笔记15
一.80286的工作模式 80286首次提出了实模式和保护模式的概念. 实模式:和8086的工作方式相同: 保护模式:提供了存储器管理机制和保护机制,支持多任务. 二.80286的寄存器 (一)通用寄 ...
- java中wait和notify的关系
java中,wait和notify这两个方法是一对,wait方法阻塞当前线程,而notify是唤醒被wait方法阻塞的线程. 首先,需要说明的是,wait和notify方法都是Object的实 ...
- sublime text 3支持GBK编码
1.安装Package Control: 按Ctrl+~打开命令行,然后复制粘贴下面这一行代码,回车确定: import urllib.request,os; pf = 'Package Contro ...
- CentOS下输入输出重定向
nux重定向是指修改原来默认的一些东西,对原来系统命令的默认执行方式进行改变,比如说简单的我不想看到在显示器的输出而是希望输出到某一文件中就可以通过Linux重定向来进行这项工作. Linux默认输入 ...
- [转]用Excel制作甘特图并管理项目
对于比较简单的项目管理,或绘制甘特图,选用电子表格工具——比如价格高也最强大的Excel.开源的OpenOffice.免费的WPS——可能比项目管理软件更方便. 1. XL-Easy Gantt 模板 ...
- php数组操作，js数组操作
俩语言一块儿学老混.整理一下. php: 1.声明: 1)$arr1 = array('key1' => 'value1', 'key2' => 'value2' ...);//关联数组, ...
- Azure 上 Linux 虚拟机 Mac 地址的持久化
有些用户在使用 Azure Linux 虚拟机安装软件时,有些软件的 license 会和当前系统的 mac 地址绑定,那么在 Azure VM 重启,reszie(改变尺寸大小),停止然后再启动的时 ...
- java通过超链接和servlet配置实现服务器文件下载
1.在页面上面我们可以简单的写成: <td align="center""> <a href="<c:url value="/ ...
- RecyclerView IndexOutOfBoundsException 问题
在项目中遇到一个RecyclerView 偶现的奔溃,查看日志,发现是: java.lang.IndexOutOfBoundsException: Index: 39, Size: 39 at jav ...