Vue是Angular和React的“优点整合版”一个MVVM框架，Angular的优点：指令系统、双向绑定，React的优点：做组件很快，一切都是组件，Redux的单项数据传递也被借鉴。
官网：http://cn.vuejs.org/

1.首先安装nodeJS并配置其环境变量这里不做说明
2、创建项目文件，然后创建package.json文件

nmp init

3、我们用webpack构建我们的app
webpack的中文文档：https://doc.webpack-china.org/
我们手动创建webpack.config.js文件，并配置如下信息：

const path = require('path');

module.exports = {
	entry: './app/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
		publicPath : 'public'
	}
}

上面这段配置可参考webpack的中文文档，分别配置入口和出口，入口指向的是main.js
publicPath是专门给webpack-dev-server用的，可以帮我们开一个自动刷新的浏览器。
4、安装webpack相关依赖

npm install --save-dev webpack

npm install --save-dev webpack-dev-serve

npm install webpack-cli

4.然后改变package.json文件，创建一个script

{
  "name": "01-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server --content-base ./ --port 8080"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "webpack-cli": "^3.3.11"
  }
}

5、创建一个app/main.js文件和index.html：



在index.html中需要注意的是script引用指向的webpack.config.js文件中虚拟路径publicPath 和filename
6、此时就可以通过

npm run server

开启8080端口

1、首先我们安装babel相关依赖

npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015

2、改变webpack.config.js文件，参考webpack官方中文文档

const path = require('path');

module.exports = {
    /*入口*/
    entry: './app/main.js',
    /*出口*/
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        /*publicPath是专门给webpack-dev-server用的，可以帮我们开一个自动刷新的浏览器*/
        publicPath : 'public'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: [
                    path.resolve(__dirname, "node_modules")
                ],
                loader: "babel-loader",
                options: {
                    presets: ["es2015"]
                }
            }
        ]
    }

}

至此webpack + babel的环境已经配好了

npm install --save vue@1

@1表示1代版本

到目前为止，我们已经配置好了webpack + babel + vue的环境。