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

时间 2019-11-10

标签详细 vue hello world 应用开发步骤繁體版

原文原文链接

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

安装nodejs和npm，这两个就不用说了，网上不少教程。css
本地随便新建一个文件夹，进入后运行命令npm init, 一路next下去，自动生成package.json。html

运行命令npm install –save-dev webpack-dev-server，安装一个轻量级的服务器，该服务器用于vue应用开发完毕后的本地测试。前端

重复执行命令npm install –save-dev <name>，也就是把下列命令粘贴到cmd里进行执行：vue

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区域内，以下图红色区域所示：java

这些都是开发时依赖。咱们再用下列命令安装运行时依赖：node

npm install –save vue vuex

而后再在package.json里手动加入以下这一段内容：webpack

目的是开发完毕后，使用命令npm run dev能够启动webpack-dev-server，运行咱们的vue应用，并带上参数--inline --hot。web

在项目文件夹根目录下建立一个名为src的文件夹，文件夹里新建一个文件index.vue，把以下内容拷贝进去：

<style>
h2{
color: red;
}
</style>
<template>
<h2>Jerry: Hello, World!</h2>
</template>
<script>
module.exports = {
data: function(){
return {};
}
}
</script>

再回到根目录下，新建一个文件main.js:vue-router

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)