脚手架构建项目

修改npm源为淘宝源

npm config set registry "https://registry.npm.taobao.org"

vue脚手架

1. npm install -g vue-cli
2. vue list
3. vue init webpack name
4. cd name
5. npm install
6. npm run dev

React+Webpack+ES6环境搭建

1. npm install -g webpack 全局安装webpack
2. npm init 自定义建立package.json
   npm init -yes 能够建立默认的package.json
3. npm install webpack --save-dev 项目内安装webpack
4. npm install react react-dom --save-dev 安装react
5. npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev
   安装babel插件

6. webpack.config.js配置
   ```
   var path = require('path');
   var webpack = require('webpack');
   module.exports = {
   entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
   output: {
   path: path.resolve(__dirname, './build'),
   filename: 'bundle.js'
   },
   devServer: {
   inline: true,
   port: 8181
   },
   module: {
   loaders: [
   {
   test: /.js?$/,
   exclude: /(node_modules|bower_components)/,
   loader: 'babel',
   query: {
   presets: ['es2015', 'react']
   }

   }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]

   };
   ```
7. npm install webpack-dev-server --save-dev

8. 在package.json文件中为scripts添加
   "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }

react脚手架

1. npm install -g yo 安装yo
2. yo --version 是否安装成功
3. npm install -g generator-reactpackage
4. 建立项目 新建项目文件夹 yo reactpackage
5. npm run dev //项目开发过程使用，启动服务，实时刷新
   npm run build //开发完成以后打包文件（js、css分开打包）

generator-react-webpack

1. npm install -g yo
2. npm install -g generator-react-webpack
3. 新建项目文件夹 "cd进去" yo react-webpack