脚手架构建项目

修改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脚手架

npm install -g create-react-app
create-react-app react-cli-demo

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