H5項目搭建

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）201七、七、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 不能同時粘貼不少文件