H5项目搭建

2019独角兽企业重金招聘Python工程师标准>>>

git部分看的视频自己练习一下 webpack部分大家晚上多花点时间配一下 webpack-前端自动化构建工具--模块打包工具

1.webpack的安装 全局和本地安装webpack npm i webpack -g npm i webpack 测试是否安装成功 webpack --help

2.webpack源码解读(重点理解)

3.webpack的工具 [1]ES6编译工具 babel ES6 -->> ES2015 (1)npm i babel-core babel-loader babel-preset-es2015 -D (2)loader配置 (3)加预设 webpack配置文件 webpack.config.js [2]webpack server (模块热替换和自动刷新) 安装 --> npm i webpack-dev-server -g npm i webpack-dev-server webpack-dev-server --port 8000 --contentBase '' ->服务器配置 css编译 npm i css-loader -D //打包css 将打包好的js文件里的css代码提取出来 npmi style-loader -D //让css在html中生效 将提取出来的css代码变成style标签，放入头部 scss编译 npm i sass-loader -D (依托node-sass) （ npm i node-sass@4.0.0 -D）2017、7、8 npm i sass-loader -D先安装node-sass 再下载sass-loader注意版本号 css抽离 npm i extract-text-webpack-plugin -D npm i html-webpack-plugin -D >>html解析 webpack版本号控制 压缩代码 启动服务自动打开浏览器 npm i open-browser-webpack-plugin -D

 npm i react -S
 npm i react-dom -S

代码压缩： var webpack = require('webpack') plugins:[

                     // 2: 根据模板自动生成html
                    new HtmlWebpackPlugin({
                                template:'./src/index.html',
                                filename:'index.html'          
                    }),
                     
                     // 1: 抽离CSS样式到文件
                    new ExtractTextPlugin({
                                filename:'app.css',
                                allChunks:true
                    }),
                    // 3: 压缩代码
   new webpack.optimize.UglifyJsPlugin({
     compress: {
       warnings: false
     },
     output: {
       comments: false
     }
                  })
        ],

如果用到jsx语法形如：ReactDOM.render(<RootComponent/>,document.getElementById('root'))

需要编译jsx $ npm i jsx-loader -D config一下：

我们之前这里用babel 它可以编译jsx还可以编译别的 功能强大

启动服务：

npm i webpack-dev-server -g

在全局和本地都装一次

webpack也要装两次（本地还有全局）

在服务里不一定要配置服务也能启动server 查看配置信息 启动服务，，这样

在浏览器上输入：localhost：7000就可以打开服务

可以自动打开浏览器，并监测代码的改变

不用配置服务就可以打开页面：

在package.json里配build参数代替webpack-dev-server

这样就可以执行npm run build 执行服务

编译css(需要两个loader) 或者利用淘宝镜像

在app.js里把app.css当模块引入，但是并不能解析会出现下面的错误

来解决这个问题

将编译好的css放到html页面

注意顺序，重后向前

它依托于nodescss

原因是：在app.css里用scss的代码。所以应该把它改为app.scss 在app.js 引入app.scss模块 没有node-sass 解决办法： npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

3.抽离 ： plugin 插件

引入插件

配置插件

extractTextplugin （）里面必须是一个对象

执行抽离插件：

external组件分离：

meta:vp 加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> iview

awesome 也是基于vue写的插件

饿了吗的mint-ui

我们这里用yo框架 http://yo.doyoe.com/doc网址

locader:专门负责加载文件，解析文件; .jsx .js .css .scss plugin:是用来实现一个独立的功能的

插入子组件时，不仅要进行组件的引入还要记得 import Vue from 'vue' import Header from './Header' import Nav from './Nav' Vue.component('Header',Header)//注册全局组件 Vue.component('Nav',Nav)

vue路由表的配置：http://www.jb51.net/article/118993.htm atom 不能同时粘贴很多文件

转载于:https://my.oschina.net/u/3608045/blog/1634764