最详细的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 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
随机推荐
- [Visual studio code 常见问题解决] ——中文乱码、
中文乱码问题解决 描述:刚开始安装VScode要打开含中文的文件,都会出现乱码,这时只要点击右下方的“UTF-8”改成“GB2312”即可.但每次都改是很麻烦的,所以要使得VScode默认支持GB23 ...
- win7(64)+vs2010+opencv2.3.1配置问题：应用程序无法正常启动0xc000007b
根据:毛星云(浅墨)的[OpenCV入门教程之一] 安装OpenCV:OpenCV 3.0.OpenCV 2.4.8.OpenCV 2.4.9 +VS 开发环境配置 文章链接:http://blog. ...
- 有标号的DAG计数 III
Description 给定一正整数n,对n个点有标号的有向无环图进行计数,这里加一个限制:此图必须是弱连通图.输出答案 mod 10007 的结果. Solution 弱连通图即把边变成无向之后成为 ...
- sublime text 3 PHP 所需插件
1. PHP代码语法验证插件:SublimeLinter 2.Bracket Highlighter 用于匹配括号,引号和html标签.对于很长的代码很有用.安装好之后,不需要设置插件会自动生效 3. ...
- fabu dao fenleizhong
IsAggregated IsAggregatedIsAggregated IsAggregatedIsAggregated IsAggregatedIsAggregated IsAggregated ...
- Javascript基础系列之（五）条件语句（逻辑操作符）
javascript和其它语言一样,逻辑运算主要包括 与运算&& ,或运算 II 和非运算 ! 与运算(&&)是指两个条件都为true时,整个表达式为true,或运算 ...
- sql server用户密码批量MD5加密
nodejs自带加密模块md5加密: var crypto = require('crypto'); function cryptoMD5(content){ var md5 = crypto.cre ...
- 二分查找——Python实现
一.排序思想 二分(折半)查找思想请参见:https://www.cnblogs.com/luomeng/p/10585291.html 二.python实现 def binarySearchDemo ...
- js 两个小括号 ()() 的用法
实现一个函数fn, 使fn(1)(2)的结果为两个参数的和,刚开始没反应过来,其实细细一想第二个括号就是函数再调用的问题,废话不多说,代码奉上: var fn = function(n) { func ...
- CSS性能优化新属性：will-change
---恢复内容开始--- will-change属性通过告诉浏览器什么属性.什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率. 这个属性可以有4个值: auto: 实 ...