1：安裝Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。可以搜尋Node.js的官網下載，安裝完成後，開啟命令提示符cmd.exe,輸入node -v ,可以看到安裝的Node.js的版本。
在命令提示符終端輸入：node -v檢視Node.js的版本

npm是Node.js的包管理工具（package manager），是全球最大的開源庫生態系統。npm在Node.js安裝的時候順帶裝好了。
npm的是使用場景：
允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。
允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。 允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。
在命令提示符或者終端輸入：npm -v，同樣看到安裝的版本。

2：安裝vue-cli

Vue-cli是Vue的腳手架工具，用 vue-cli 可以快速建立 vue 專案。相當於可以快速生成一個Vue專案的模板，不同一個一個地去建立各種配置檔案，用起來很方便。
在命令提示符終端輸入：
npm install -g vue-cli

3：vue-cli構建vue專案

新建一個資料夾，可以在資料夾中用快捷鍵Shift+滑鼠右鍵，點選在此處開啟命令視窗（W），就不用再用cd進入該目錄。
在命令提示符終端輸入：
vue init webpack-simple first-project

webpack-simple是專案模板的名稱，first-project是生成的專案名稱。要求輸入專案名，專案描述，作者等可以直接回車跳過。 執行之後生成了一個名為first-project的資料夾，目錄結構如下圖所示：

其中webpack.config.js內容

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',//唯一入口檔案

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',//打包後的檔案存放的地方
    filename: 'build.js'////打包後輸出檔案的檔名
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
 

上述檔案很總要，表名了原檔案的位置是在當前目錄下的/src/main.js，以及打包後的檔案存放的資料夾及位置。以及圖片轉化，ES6轉化，壓縮方面相關的配置。

4：安裝專案依賴

在first-project的資料夾中用快捷鍵 Shift+滑鼠右鍵，點選在此處開啟命令視窗（W），進入專案目錄。
在命令提示符終端輸入：
npm install
安裝完成後，目錄下會產生一個node_modules資料夾。

5：啟動專案

在命令提示符終端輸入：
npm run dev
npm run dev命令後並不會在dist目錄下生成build.js檔案，開發環境下build.js是在執行記憶體中的。
瀏覽器自動開啟，可以看到下圖，埠預設是8080

6：釋出專案

在命令提示符終端輸入：
npm run build
會生成釋出時的build.js，並且是經過壓縮的。生成的檔案：