一、webpack安装。

当然，在这之前，你得先安装好node.js。

1、npm安装webpack。

npm install -g webpack //全局安装

npm install -g webpack-dev-server //安装调试工具

2、创建项目

mkdir projectName //创建项目文件夹

cd projuectName //进入该文件目录下

npm init //在目录下创建package.json文件，一直回车即可，也可输入你想要修改的内容

之后在目标文件中可以看到 package.json文件。

二、安装项目依赖

这里我们可以直接在package.json文件中添加相应的依赖，然后命令运行npm install。也可以使用命令npm install fileName --save-dev，来进行相关的依赖文件安装，安装成功后，我们可以在目录中检查：

下面是我的一个package.json文件：

"devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chai": "^3.5.0",
    "chalk": "^1.1.3",
    "chromedriver": "^2.21.2",
    "connect-history-api-fallback": "^1.1.0",
    "cross-spawn": "^4.0.2",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-config-standard": "^6.1.0",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-plugin-promise": "^2.0.1",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "inject-loader": "^2.0.1",
    "isparta-loader": "^2.0.0",
    "json-loader": "^0.5.4",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^1.7.0",
    "lolex": "^1.4.0",
    "mocha": "^3.1.0",
    "nightwatch": "^0.9.8",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "phantomjs-prebuilt": "^2.1.3",
    "selenium-server": "2.53.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.4",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.4.0",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  }

三、配置webpack.config.js，手动创建配置。

var path = require('path');
module.exports = {
  entry: ['./src/main.js'],     //项目入口文件的路径，可以有多个文件
  output: {     //定义webpack输出的文件，这里设置了文件输出在dist文件夹下面的build.js
    path: './dist',
    publicPath:'./dist/',
    filename: 'build.js'
  },
  //配置自动刷新,如果打开会使浏览器刷新而不是热替换
  /*devServer: {
    historyApiFallback: true,
    hot: false,
    inline: true,
    grogress: true
  },*/
  module: {
    loaders: [
      //转化ES6语法
      {
        test: /\.js$/,          //这里是匹配文件的正则
        loader: 'babel',        //这里是指定调用loader去处理对应文件类型
        exclude: /node_modules/
      },
      //解析.vue文件
      {
        test:/\.vue$/,
        loader:'vue'
      },
      //图片转化，小于8K自动转化为base64的编码
      {
        test: /\.(png|jpg|gif)$/,
        loader:'url-loader?limit=8192'
      }
    ]
  },
  vue:{
    loaders:{
      js:'babel' //loader来这里吧。
    }
  },
  resolve: {
        // require时省略的扩展名，如：require('app') 不需要app.js
        extensions: ['', '.js', '.vue'],
        // 配置简写，路径可以省略文件类型
        alias: {
            filter: path.join(__dirname, './src/filters'),
            components: path.join(__dirname, './src/components')
        }
    }    
}

四、使用vue。

安装vue-cli

npm install -g vue-cli //全局安装vue-cli
vue init webpack projectName //生成项目名为projectName的模板，这里的项目名projectName //项目名称
cd projectName //进入项目文件
npm install //初始化安装依赖

安装后会生成如下图的目录：

初始化依赖完成后，命令运行：npm run dev。

上述完成后，我们就完成vue的项目就已经生产完成，当我们运行localhost:8080就能看见如下图的vue官方logo：

前端小坑，第一次知乎发文，分享一点入坑vue的学习过程，希望能帮助初入坑的童鞋，也希望获得更多的交流和指正。