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

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

本地随便新建一个文件夹，进入后运行命令npm init, 一路next下去，自动生成package.json。

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

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

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

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文件成功生成的消息：