webpack · vue · 看云

[TOC] # Webpack ## 1. 在網頁中會引用哪些常見的靜態資源？ * JS * .js .jsx .coffee .ts（TypeScript 類 C# 語言） * CSS * .css .less .sass .scss * Images * .jpg .png .gif .bmp .svg * 字體文件（Fonts） * .svg .ttf .eot .woff .wof * 模板文件 * .ejs .jade .vue【這是在webpack中定義組件的方式，推薦這么用】 ## 2. 網頁中引入的靜態資源多了以后有什么問題？？？ 1. 網頁加載速度慢，因為我們要發起很多的二次請求； 2. 要處理錯綜復雜的依賴關系 ## 3. 如何解決上述兩個問題 1. 合并、壓縮、精靈圖、圖片的Base64編碼 2. 可以使用之前學過的requireJS、也可以使用webpack可以解決各個包之間的復雜依賴關系； ## 4. 什么是webpack? webpack 是前端的一個項目構建工具，它是基于 Node.js 開發出來的一個前端工具； ## 5. 如何完美實現上述的2種解決方案 1. 使用Gulp，是基于 task 任務的； 2. 使用Webpack，是基于整個項目進行構建的； * 借助于webpack這個前端自動化構建工具，可以完美實現資源的合并、打包、壓縮、混淆等諸多功能。 * 根據官網的圖片介紹webpack打包的過程 * [webpack官網](http://webpack.github.io/) ## 6. webpack安裝的兩種方式 1. 運行`npm i webpack -g`全局安裝webpack，這樣就能在全局使用webpack的命令 2. 在項目根目錄中運行`npm i webpack --save-dev`安裝到項目依賴中 ## 初步使用webpack打包構建列表隔行變色案例 1. 運行`npm init`初始化項目，使用npm管理項目中的依賴包 2. 創建項目基本的目錄結構 3. 使用`cnpm i jquery --save`安裝jquery類庫 4. 創建`main.js`并書寫各行變色的代碼邏輯： ~~~ // 導入jquery類庫 ? import $ from 'jquery' ? ? // 設置偶數行背景色，索引從0開始，0是偶數 ? $('#list li:even').css('backgroundColor','lightblue'); ? // 設置奇數行背景色 ? $('#list li:odd').css('backgroundColor','pink'); ~~~ 5. 直接在頁面上引用`main.js`會報錯，因為瀏覽器不認識`import`這種高級的JS語法，需要使用webpack進行處理，webpack默認會把這種高級的語法轉換為低級的瀏覽器能識別的語法； 6. 運行`webpack 入口文件路徑輸出文件路徑`對`main.js`進行處理： ~~~ webpack src/js/main.js dist/bundle.js ~~~ ## 7. 使用webpack的配置文件簡化打包時候的命令 1. 在項目根目錄中創建`webpack.config.js` 2. 由于運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在`webpack.config.js`中配置這兩個路徑： ~~~ ? // 導入處理路徑的模塊 ? var path = require('path'); ? ? // 導出一個配置對象，將來webpack在啟動的時候，會默認來查找webpack.config.js，并讀取這個文件中導出的配置對象，來進行打包處理 ? module.exports = { ? ? ? entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件 ? ? ? output: { // 配置輸出選項 ? ? ? ? ? path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑 ? ? ? ? ? filename: 'bundle.js' // 配置輸出的文件名 ? ? ? } ? } ~~~ ## 實現webpack的實時打包構建 1. 由于每次重新修改代碼之后，都需要手動運行webpack打包的命令，比較麻煩，所以使用`webpack-dev-server`來實現代碼實時打包編譯，當修改代碼之后，會自動進行打包構建。 2. 運行`cnpm i webpack-dev-server --save-dev`安裝到開發依賴 3. 安裝完成之后，在命令行直接運行`webpack-dev-server`來進行打包，發現報錯，此時需要借助于`package.json`文件中的指令，來進行運行`webpack-dev-server`命令，在`scripts`節點下新增`"dev": "webpack-dev-server"`指令，發現可以進行實時打包，但是dist目錄下并沒有生成`bundle.js`文件，這是因為`webpack-dev-server`將打包好的文件放在了內存中 * 把`bundle.js`放在內存中的好處是：由于需要實時打包編譯，所以放在內存中速度會非常快 * 這個時候訪問webpack-dev-server啟動的`http://localhost:8080/`網站，發現是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，此時引用不到bundle.js文件，需要修改index.html中script的src屬性為:`<script src="../bundle.js"></script>` * 為了能在訪問`http://localhost:8080/`的時候直接訪問到index首頁，可以使用`--contentBase src`指令來修改dev指令，指定啟動的根目錄： ~~~ "dev": "webpack-dev-server --contentBase src" ~~~ 同時修改index頁面中script的src屬性為`<script src="bundle.js"></script>` ## 使用`html-webpack-plugin`插件配置啟動頁面由于使用`--contentBase`指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性，所以推薦大家使用`html-webpack-plugin`插件配置啟動頁面. 1. 運行`cnpm i html-webpack-plugin --save-dev`安裝到開發依賴 2. 修改`webpack.config.js`配置文件如下： ~~~ ? // 導入處理路徑的模塊 ? var path = require('path'); ? // 導入自動生成HTMl文件的插件 ? var htmlWebpackPlugin = require('html-webpack-plugin'); ? ? module.exports = { ? ? ? entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件 ? ? ? output: { // 配置輸出選項 ? ? ? ? ? path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑 ? ? ? ? ? filename: 'bundle.js' // 配置輸出的文件名 ? ? ? }, ? ? ? plugins:[ // 添加plugins節點配置插件 ? ? ? ? ? new htmlWebpackPlugin({ ? ? ? ? ? ? ? template:path.resolve(__dirname, 'src/index.html'),//模板路徑 ? ? ? ? ? ? ? filename:'index.html'//自動生成的HTML文件的名稱 ? ? ? ? ? }) ? ? ? ] ? } ~~~ 3. 修改`package.json`中`script`節點中的dev指令如下： ~~~ "dev": "webpack-dev-server" ~~~ 4. 將index.html中script標簽注釋掉，因為`html-webpack-plugin`插件會自動把bundle.js注入到index.html頁面中！ ## 實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號 **注意：熱更新在JS中表現的不明顯，可以從一會兒要講到的CSS身上進行介紹說明！** ### 方式1： * 修改`package.json`的script節點如下，其中`--open`表示自動打開瀏覽器，`--port 4321`表示打開的端口號為4321，`--hot`表示啟用瀏覽器熱更新： ~~~ "dev": "webpack-dev-server --hot --port 4321 --open" ~~~ ### 方式2： 1. 修改`webpack.config.js`文件，新增`devServer`節點如下： ~~~ devServer:{ ? ? ? hot:true, ? ? ? open:true, ? ? ? port:4321 ? } ~~~ 2. 在頭部引入`webpack`模塊： ~~~ var webpack = require('webpack'); ~~~ 3. 在`plugins`節點下新增： ~~~ new webpack.HotModuleReplacementPlugin() ~~~ ## 使用webpack打包css文件 1. 運行`cnpm i style-loader css-loader --save-dev` 2. 修改`webpack.config.js`這個配置文件： ~~~ module: { // 用來配置第三方loader模塊的 ? ? ? rules: [ // 文件的匹配規則 ? ? ? ? ? { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規則 ? ? ? ] ? } ~~~ 3. 注意：`use`表示使用哪些模塊來處理`test`所匹配到的文件；`use`中相關loader模塊的調用順序是從后向前調用的； ## 使用webpack打包less文件 1. 運行`cnpm i less-loader less -D` 2. 修改`webpack.config.js`這個配置文件： ~~~ { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, ~~~ ## 使用webpack打包sass文件 1. 運行`cnpm i sass-loader node-sass --save-dev` 2. 在`webpack.config.js`中添加處理sass文件的loader模塊： ~~~ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ~~~ ## 使用webpack處理css中的路徑 1. 運行`cnpm i url-loader file-loader --save-dev` 2. 在`webpack.config.js`中添加處理url路徑的loader模塊： ~~~ { test: /\.(png|jpg|gif)$/, use: 'url-loader' } ~~~ 3. 可以通過`limit`指定進行base64編碼的圖片大小；只有小于指定字節（byte）的圖片才會進行base64編碼： ~~~ { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' }, ~~~ ## 使用babel處理高級JS語法 1. 運行`cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev`安裝babel的相關loader包 2. 運行`cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev`安裝babel轉換的語法 3. 在`webpack.config.js`中添加相關loader模塊，其中需要注意的是，一定要把`node_modules`文件夾添加到排除項： ~~~ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } ~~~ 4. 在項目根目錄中添加`.babelrc`文件，并修改這個配置文件如下： ~~~ { ? "presets":["es2015", "stage-0"], ? "plugins":["transform-runtime"] } ~~~ 5. **注意：語法插件`babel-preset-es2015`可以更新為`babel-preset-env`，它包含了所有的ES相關的語法；** # Vue.js - day6 ## 注意：有時候使用`npm i node-sass -D`裝不上，這時候，就必須使用 `cnpm i node-sass -D` ## 在普通頁面中使用render函數渲染組件 ## 在webpack中配置.vue組件頁面的解析 1. 運行`cnpm i vue -S`將vue安裝為運行依賴； 2. 運行`cnpm i vue-loader vue-template-compiler -D`將解析轉換vue的包安裝為開發依賴； 3. 運行`cnpm i style-loader css-loader -D`將解析轉換CSS的包安裝為開發依賴，因為.vue文件中會寫CSS樣式； 4. 在`webpack.config.js`中，添加如下`module`規則： ~~~ ? module: { ? ? rules: [ ? ? ? { test: /\.css$/, use: ['style-loader', 'css-loader'] }, ? ? ? { test: /\.vue$/, use: 'vue-loader' } ? ? ] ? } ? ~~~ 5. 創建`App.js`組件頁面： ~~~ ? ? <template> ? ? ?  ? ? ? <div> ? ? ? ? <h1>這是APP組件 - {{msg}}</h1> ? ? ? ? <h3>我是h3</h3> ? ? ? </div> ? ? </template> ? ? ? ? <script> ? ? // 注意：在 .vue 的組件中，通過 script 標簽來定義組件的行為，需要使用 ES6 中提供的 export default 方式，導出一個vue實例對象 ? ? export default { ? ? ? data() { ? ? ? ? return { ? ? ? ? ? msg: 'OK' ? ? ? ? } ? ? ? } ? ? } ? ? </script> ? ? ? ? <style scoped> ? ? h1 { ? ? ? color: red; ? ? } ? ? </style> ? ~~~ 6. 創建`main.js`入口文件： ~~~ ? ? // 導入 Vue 組件 ? ? import Vue from 'vue' ? ? ? ? // 導入 App組件 ? ? import App from './components/App.vue' ? ? ? ? // 創建一個 Vue 實例，使用 render 函數，渲染指定的組件 ? ? var vm = new Vue({ ? ? ? el: '#app', ? ? ? render: c => c(App) ? ? }); ? ~~~ ## 在使用webpack構建的Vue項目中使用模板對象？ 1. 在`webpack.config.js`中添加`resolve`屬性： ~~~ resolve: { ? alias: { ? ? 'vue$': 'vue/dist/vue.esm.js' ? } } ~~~ ## ES6中語法使用總結 1. 使用 `export default` 和 `export` 導出模塊中的成員; 對應ES5中的 `module.exports` 和 `export` 2. 使用 `import ** from **` 和 `import '路徑'` 還有 `import {a, b} from '模塊標識'` 導入其他模塊 3. 使用箭頭函數：`(a, b)=> { return a-b; }` ## 在vue組件頁面中，集成vue-router路由模塊 [vue-router官網](https://router.vuejs.org/) 1. 導入路由模塊： ~~~ ? import VueRouter from 'vue-router' ? ~~~ 2. 安裝路由模塊： ~~~ ? Vue.use(VueRouter); ? ~~~ 3. 導入需要展示的組件: ~~~ ? import login from './components/account/login.vue' ? import register from './components/account/register.vue' ? ~~~ 4. 創建路由對象: ~~~ ? var router = new VueRouter({ ? routes: [ ? ? { path: '/', redirect: '/login' }, ? ? { path: '/login', component: login }, ? ? { path: '/register', component: register } ? ] ? }); ? ~~~ 5. 將路由對象，掛載到 Vue 實例上: ~~~ ? var vm = new Vue({ ? el: '#app', ? // render: c => { return c(App) } ? render(c) { ? ? return c(App); ? }, ? router // 將路由對象，掛載到 Vue 實例上 ? }); ? ~~~ 6. 改造App.vue組件，在 template 中，添加`router-link`和`router-view`： ~~~ ? ? <router-link to="/login">登錄</router-link> ? ? <router-link to="/register">注冊</router-link> ? ? ? ? <router-view></router-view> ? ~~~ ## 組件中的css作用域問題 ## 抽離路由為單獨的模塊 ## 使用餓了么的 MintUI 組件 [Github 倉儲地址](https://github.com/ElemeFE/mint-ui) [Mint-UI官方文檔](http://mint-ui.github.io/#!/zh-cn) 1. 導入所有MintUI組件： ~~~ ? import MintUI from 'mint-ui' ? ~~~ 2. 導入樣式表： ~~~ ? import 'mint-ui/lib/style.css' ? ~~~ 3. 在 vue 中使用 MintUI： ~~~ ? Vue.use(MintUI) ? ~~~ 4. 使用的例子： ~~~ ? <mt-button type="primary" size="large">primary</mt-button> ? ~~~ ## 使用 MUI 組件 [官網首頁](http://dev.dcloud.net.cn/mui/) [文檔地址](http://dev.dcloud.net.cn/mui/ui/) 1. 導入 MUI 的樣式表： ~~~ ? import '../lib/mui/css/mui.min.css' ? ~~~ 2. 在`webpack.config.js`中添加新的loader規則： ~~~ ? { test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' } ? ~~~ 3. 根據官方提供的文檔和example，嘗試使用相關的組件 ## 將項目源碼托管到oschina中 1. 點擊頭像 -> 修改資料 -> SSH公鑰 [如何生成SSH公鑰](http://git.mydoc.io/?t=154712) 2. 創建自己的空倉儲，使用 `git config --global user.name "用戶名"` 和 `git config --global user.email ***@**.com` 來全局配置提交時用戶的名稱和郵箱 3. 使用 `git init` 在本地初始化項目 4. 使用 `touch README.md` 和 `touch .gitignore` 來創建項目的說明文件和忽略文件； 5. 使用 `git add .` 將所有文件托管到 git 中 6. 使用 `git commit -m "init project"` 將項目進行本地提交 7. 使用 `git remote add origin 倉儲地址`將本地項目和遠程倉儲連接，并使用origin最為遠程倉儲的別名 8. 使用 `git push -u origin master` 將本地代碼push到倉儲中 ## App.vue 組件的基本設置 1. 頭部的固定導航欄使用 `Mint-UI` 的 `Header` 組件； 2. 底部的頁簽使用 `mui` 的 `tabbar`; 3. 購物車的圖標，使用 `icons-extra` 中的 `mui-icon-extra mui-icon-extra-cart`，同時，應該把其依賴的字體圖標文件 `mui-icons-extra.ttf`，復制到 `fonts` 目錄下！ 4. 將底部的頁簽，改造成 `router-link` 來實現單頁面的切換； 5. Tab Bar 路由激活時候設置高亮的兩種方式： * 全局設置樣式如下： ~~~ ? .router-link-active{ ? ? ? color:#007aff !important; ? ? } ? ~~~ * 或者在 `new VueRouter` 的時候，通過 `linkActiveClass` 來指定高亮的類： ~~~ ? // 創建路由對象 ? ? var router = new VueRouter({ ? ? ? routes: [ ? ? ? ? { path: '/', redirect: '/home' } ? ? ? ], ? ? ? linkActiveClass: 'mui-active' ? ? }); ? ~~~ ## 實現 tabbar 頁簽不同組件頁面的切換 1. 將 tabbar 改造成 `router-link` 形式，并指定每個連接的 `to` 屬性； 2. 在入口文件中導入需要展示的組件，并創建路由對象： ~~~ ? ? // 導入需要展示的組件 ? ? import Home from './components/home/home.vue' ? ? import Member from './components/member/member.vue' ? ? import Shopcar from './components/shopcar/shopcar.vue' ? ? import Search from './components/search/search.vue' ? ? ? ? // 創建路由對象 ? ? var router = new VueRouter({ ? ? ? routes: [ ? ? ? ? { path: '/', redirect: '/home' }, ? ? ? ? { path: '/home', component: Home }, ? ? ? ? { path: '/member', component: Member }, ? ? ? ? { path: '/shopcar', component: Shopcar }, ? ? ? ? { path: '/search', component: Search } ? ? ? ], ? ? ? linkActiveClass: 'mui-active' ? ? }); ? ~~~ ## 使用 mt-swipe 輪播圖組件 1. 假數據： ~~~ ? lunbo: [ ? ? ? ? 'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg', ? ? ? ? 'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg', ? ? ? ? 'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg' ? ? ? ] ? ~~~ 2. 引入輪播圖組件： ~~~ ?  ? ? <div class="home-swipe"> ? ? ? <mt-swipe :auto="4000"> ? ? ? ? <mt-swipe-item v-for="(item, i) in lunbo" :key="i"> ? ? ? ? ? <img :src="item" alt=""> ? ? ? ? </mt-swipe-item> ? ? ? </mt-swipe> ? ? </div> ? </div> ? ~~~ ## 在`.vue`組件中使用`vue-resource`獲取數據 1. 運行`cnpm i vue-resource -S`安裝模塊 2. 導入 vue-resource 組件 ~~~ ? import VueResource from 'vue-resource' ? ~~~ 3. 在vue中使用 vue-resource 組件