专栏首页Jerry的SAP技术分享最详细的Vue Hello World应用开发步骤
原创

最详细的Vue Hello World应用开发步骤

很多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 <name>,也就是把下列命令粘贴到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的原创文章,请关注公众号"汪子熙":

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 最详细的Vue Hello World应用开发步骤

    很多Vue的初学者想尝试这个框架时,都被webpack过于复杂的配置所吓倒,导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用we...

    Jerry Wang
  • webpack-dev-server启动后,localhost:8080返回index.html的原理

    webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到...

    Jerry Wang
  • Webpack 10分钟入门

    可以说现在但凡开发Single page application,webpack是一个不可或缺的工具。

    Jerry Wang
  • 最详细的Vue Hello World应用开发步骤

    很多Vue的初学者想尝试这个框架时,都被webpack过于复杂的配置所吓倒,导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用we...

    Jerry Wang
  • Vue-cli教程

    一、安装vue-cli 安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v  ...

    用户1212940
  • vue-cli 搭建

    安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和...

    小蔚
  • Vue打包优化之code spliting

    如果我们对所有的代码进行合理的拆分,将首屏和非首屏的代码进行剥离,将业务代码和基础库代码进行拆分,在需要某段代码的时候再加载它,下次若再需要用则从缓存中读取.....

    QQ音乐前端团队
  • vue项目搭建及基本配置

    准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。

    流眸
  • Vue 中使用 jQuery

    编译报错:$ is undefined or no-undef '$' is not defined, 假设你已经使用vue-cli搭建好了开发的脚手架,接下...

    似水的流年
  • Tomcat开启SSL 8443端口的方法

    TOMCAT_HOME:/usr/local/tomcat7,安装方法参考:windows和linux 下将tomcat注册为服务

    云知识Online

扫码关注云+社区

领取腾讯云代金券