很多Vue的初学者想尝试这个框架时,都被webpack过于复杂的配置所吓倒,导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用webpack打包一个Vue Hello World应用的所有步骤详细记录下来,供Vue的初学者参考。

  1. 安装nodejs和npm,这两个就不用说了,网上很多教程。

  2. 本地随便新建一个文件夹,进入后运行命令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。

  1. 在项目文件夹根目录下创建一个名为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应用的开发和配置都结束了,是不是很简单?

我们可以来测试了。

  1. 直接在命令行里敲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应用开发步骤的更多相关文章

  1. 基于Vue的WebApp项目开发(三)

    实现根组件通用的头部和底部样式 明白由webpack搭建起来的Vue项目的执行流程,那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可 <!--以后项目的根组件--> < ...

  2. 【06】Vue 之 组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  3. 循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

    在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般 ...

  4. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  5. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  6. 循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理>中介绍了用户管理模块的内容,包括用户列表的展示,各种查看.编辑.新增对话框的界面处理和后台数据处 ...

  7. 循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理

    在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...

  8. 循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制

    在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...

  9. 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

随机推荐

  1. Git使用总结(一):简介与基本操作

    一:简介 GIT是一个开源的分布式的版本控制系统,是由Linus 为了管理Linux内核开发而开发的一个开源的版本控制软件.相比SVN,它采用分布式版本库方式. 二:工作区,暂存区和版本库 左侧为工作 ...

  2. idea中运行maven安装jar包到本地仓库跳过test

  3. Nginx通关攻略

    Nginx是什么 没有听过Nginx?不要紧,一定听过它的"同行"Apache吧!Nginx同Apache一样都是一种WEB服务器.基于REST架构风格,以统一资源描述符(Unif ...

  4. Razor 将C#对象转换成Javascript对象, json还原被转码的字符 &quot·· HTML转义符

    Razor 将C#对象转换成Javascript对象 在Razor中使用Json字符串,特殊字符被自动转义(如:\"->") @{ var jsonStr = Html.Ra ...

  5. [android] 两种异步方式

    使用AsyncTask开启子线程获取服务器数据,更新界面UI /** * 异步任务 * * @author taoshihan * */ public class HttpAsyncTask exte ...

  6. Java基础(十)数据结构

    一.数据结构 1.数据结构的定义 数据结构是计算机存储,组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合.通常情况下,精心选择的数据结构可以带来更高的运行或存储效率.数据结构 ...

  7. vim lua对齐indent无效

    查了半天,打开命令 :filetype一看是关闭的 filetype detection:ON  plugin:ON  indent:OFF 在vimrc里打开 filetype indent on ...

  8. String.replace使用技巧

    relace replace() 方法返回一个由替换值替换一些或所有匹配的模式后的新字符串.模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数. 使用字符串 ...

  9. JavaScript常用类

    JS常用类 一.Number 1.常用数字 整数:10 小数:3.14 科学计数法:1e5 | 1e-5 正负无穷:Infinity | -Infinity 2.常用进制 二进制:0b1010 八进制 ...

  10. sql中replace的用法

    update 表名 set 字段名=REPLACE (字段名,'原来的值','要修改的值') 如:将tbl_user表的user_name字段中的大写的A替换成小写的a update tbl_stud ...