vue模塊化、webpack

今日目標

1.能夠了解模塊化的相關(guān)規(guī)范
2.了解webpack
3.了解使用Vue單文件組件
4.能夠搭建Vue腳手架
5.掌握Element-UI的使用

1.模塊化的分類

A.瀏覽器端的模塊化

    1).AMD(Asynchronous Module Definition,異步模塊定義)
    代表產(chǎn)品為：Require.js
    2).CMD(Common Module Definition,通用模塊定義)
    代表產(chǎn)品為：Sea.js

B.服務(wù)器端的模塊化

    服務(wù)器端的模塊化規(guī)范是使用CommonJS規(guī)范：
    1).使用require引入其他模塊或者包
    2).使用exports或者module.exports導(dǎo)出模塊成員
    3).一個文件就是一個模塊安聘，都擁有獨立的作用域

C.ES6模塊化

    ES6模塊化規(guī)范中定義：
        1).每一個js文件都是獨立的模塊
        2).導(dǎo)入模塊成員使用import關(guān)鍵字
        3).暴露模塊成員使用export關(guān)鍵字

小結(jié)：推薦使用ES6模塊化，因為AMD害晦，CMD局限使用與瀏覽器端骆膝，而CommonJS在服務(wù)器端使用。
ES6模塊化是瀏覽器端和服務(wù)器端通用的規(guī)范.

2.在NodeJS中安裝babel

A.安裝babel

打開終端嚼摩，輸入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安裝完畢之后钦讳，再次輸入命令安裝：npm install --save @babel/polyfill

B.創(chuàng)建babel.config.js

在項目目錄中創(chuàng)建babel.config.js文件。
編輯js文件中的代碼如下：
    const presets = [
        ["@babel/env",{
            targets:{
                edge:"17",
                firefox:"60",
                chrome:"67",
                safari:"11.1"
            }
        }]
    ]
    //暴露
    module.exports = { presets }

C.創(chuàng)建index.js文件

在項目目錄中創(chuàng)建index.js文件作為入口文件
在index.js中輸入需要執(zhí)行的js代碼枕面，例如：
    console.log("ok");

D.使用npx執(zhí)行文件

打開終端愿卒，輸入命令：npx babel-node ./index.js

3.設(shè)置默認導(dǎo)入/導(dǎo)出

A.默認導(dǎo)出

export default {
    成員A,
    成員B,
    .......
},如下：
let num = 100;
export default{
    num
}

B.默認導(dǎo)入

import 接收名稱 from "模塊標識符"，如下：
import test from "./test.js"

注意：在一個模塊中潮秘，只允許使用export default向外默認暴露一次成員琼开，千萬不要寫多個export default。
如果在一個模塊中沒有向外暴露成員枕荞，其他模塊引入該模塊時將會得到一個空對象

4.設(shè)置按需導(dǎo)入/導(dǎo)出

A.按需導(dǎo)出

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

B.按需導(dǎo)入

import { num,fn as printFn ,myName } from "./test.js"
//同時導(dǎo)入默認導(dǎo)出的成員以及按需導(dǎo)入的成員
import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一個模塊中既可以按需導(dǎo)入也可以默認導(dǎo)入柜候，一個模塊中既可以按需導(dǎo)出也可以默認導(dǎo)出

5.直接導(dǎo)入并執(zhí)行代碼

import "./test2.js";

6.webpack的概念

webpack是一個流行的前端項目構(gòu)建工具搞动，可以解決目前web開發(fā)的困境。
webpack提供了模塊化支持改橘，代碼壓縮混淆滋尉，解決js兼容問題，性能優(yōu)化等特性飞主，提高了開發(fā)效率和項目的可維護性

7.webpack的基本使用

A.創(chuàng)建項目目錄并初始化

創(chuàng)建項目狮惜，并打開項目所在目錄的終端，輸入命令：
    npm init -y

B.創(chuàng)建首頁及js文件

在項目目錄中創(chuàng)建index.html頁面碌识，并初始化頁面結(jié)構(gòu)：在頁面中擺放一個ul碾篡，ul里面放置幾個li
在項目目錄中創(chuàng)建js文件夾，并在文件夾中創(chuàng)建index.js文件

C.安裝jQuery

打開項目目錄終端筏餐，輸入命令:
npm install jQuery -S

D.導(dǎo)入jQuery

打開index.js文件开泽，編寫代碼導(dǎo)入jQuery并實現(xiàn)功能：
import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:even").css("background","pink");
})

注意：此時項目運行會有錯誤，因為import $ from "jquery";這句代碼屬于ES6的新語法代碼魁瞪，在瀏覽器中可能會存在兼容性問題
所以我們需要webpack來幫助我們解決這個問題穆律。

E.安裝webpack

1).打開項目目錄終端，輸入命令:
npm install webpack webpack-cli -D
2).然后在項目根目錄中导俘，創(chuàng)建一個 webpack.config.js 的配置文件用來配置webpack
在 webpack.config.js 文件中編寫代碼進行webpack配置峦耘，如下：
module.exports = {
    mode:"development"http://可以設(shè)置為development(開發(fā)模式)，production(發(fā)布模式)
}
補充：mode設(shè)置的是項目的編譯模式旅薄。
如果設(shè)置為development則表示項目處于開發(fā)階段辅髓，不會進行壓縮和混淆，打包速度會快一些
如果設(shè)置為production則表示項目處于上線發(fā)布階段少梁，會進行壓縮和混淆洛口，打包速度會慢一些
3).修改項目中的package.json文件添加運行腳本dev，如下：
"scripts":{
    "dev":"webpack"
}
注意：scripts節(jié)點下的腳本凯沪，可以通過 npm run 運行第焰，如：
運行終端命令：npm run dev
將會啟動webpack進行項目打包
4).運行dev命令進行項目打包，并在頁面中引入項目打包生成的js文件
打開項目目錄終端妨马，輸入命令:
npm run dev
等待webpack打包完畢之后樟遣，找到默認的dist路徑中生成的main.js文件，將其引入到html頁面中身笤。
瀏覽頁面查看效果。

8.設(shè)置webpack的打包入口/出口

在webpack 4.x中葵陵，默認會將src/index.js 作為默認的打包入口js文件
                 默認會將dist/main.js 作為默認的打包輸出js文件
如果不想使用默認的入口/出口js文件液荸，我們可以通過改變 webpack.config.js 來設(shè)置入口/出口的js文件，如下：
const path = require("path");
module.exports = {
    mode:"development",
    //設(shè)置入口文件路徑
    entry: path.join(__dirname,"./src/xx.js"),
    //設(shè)置出口文件
    output:{
        //設(shè)置路徑
        path:path.join(__dirname,"./dist"),
        //設(shè)置文件名
        filename:"res.js"
    }
}

9.設(shè)置webpack的自動打包

默認情況下脱篙，我們更改入口js文件的代碼娇钱，需要重新運行命令打包webpack伤柄，才能生成出口的js文件
那么每次都要重新執(zhí)行命令打包，這是一個非常繁瑣的事情文搂，那么适刀，自動打包可以解決這樣繁瑣的操作。
實現(xiàn)自動打包功能的步驟如下：
    A.安裝自動打包功能的包:webpack-dev-server
        npm install webpack-dev-server -D
    B.修改package.json中的dev指令如下：
        "scripts":{
            "dev":"webpack-dev-server"
        }
    C.將引入的js文件路徑更改為：<script src="/bundle.js"></script>
    D.運行npm run dev煤蹭，進行打包
    E.打開網(wǎng)址查看效果：http://localhost:8080

注意：webpack-dev-server自動打包的輸出文件笔喉，默認放到了服務(wù)器的根目錄中.

補充：
在自動打包完畢之后，默認打開服務(wù)器網(wǎng)頁硝皂，實現(xiàn)方式就是打開package.json文件常挚，修改dev命令：
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

10.配置html-webpack-plugin

使用html-webpack-plugin 可以生成一個預(yù)覽頁面。
因為當我們訪問默認的 http://localhost:8080/的時候稽物，看到的是一些文件和文件夾奄毡，想要查看我們的頁面
還需要點擊文件夾點擊文件才能查看，那么我們希望默認就能看到一個頁面贝或，而不是看到文件夾或者目錄吼过。
實現(xiàn)默認預(yù)覽頁面功能的步驟如下：
    A.安裝默認預(yù)覽功能的包:html-webpack-plugin
        npm install html-webpack-plugin -D
    B.修改webpack.config.js文件，如下：
        //導(dǎo)入包
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        //創(chuàng)建對象
        const htmlPlugin = new HtmlWebpackPlugin({
            //設(shè)置生成預(yù)覽頁面的模板文件
            template:"./src/index.html",
            //設(shè)置生成的預(yù)覽頁面名稱
            filename:"index.html"
        })
    C.繼續(xù)修改webpack.config.js文件咪奖，添加plugins信息：
        module.exports = {
            ......
            plugins:[ htmlPlugin ]
        }

11.webpack中的加載器

通過loader打包非js模塊：默認情況下盗忱，webpack只能打包js文件，如果想要打包非js文件赡艰，需要調(diào)用loader加載器才能打包
    loader加載器包含：
        1).less-loader
        2).sass-loader
        3).url-loader:打包處理css中與url路徑有關(guān)的文件
        4).babel-loader:處理高級js語法的加載器
        5).postcss-loader
        6).css-loader,style-loader

注意：指定多個loader時的順序是固定的售淡，而調(diào)用loader的順序是從后向前進行調(diào)用

A.安裝style-loader,css-loader來處理樣式文件
    1).安裝包
        npm install style-loader css-loader -D
    2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設(shè)置需要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調(diào)用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }
B.安裝less,less-loader處理less文件
    1).安裝包
        npm install less-loader less -D
    2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設(shè)置需要匹配的文件類型慷垮，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調(diào)用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }
C.安裝sass-loader,node-sass處理less文件
    1).安裝包
        npm install sass-loader node-sass -D
    2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設(shè)置需要匹配的文件類型揖闸，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調(diào)用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

    補充：安裝sass-loader失敗時，大部分情況是因為網(wǎng)絡(luò)原因料身，詳情參考：
    https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

D.安裝post-css自動添加css的兼容性前綴（-ie-,-webkit-）
1).安裝包
    npm install postcss-loader autoprefixer -D
2).在項目根目錄創(chuàng)建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
3).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設(shè)置需要匹配的文件類型汤纸，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調(diào)用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

E.打包樣式表中的圖片以及字體文件
在樣式表css中有時候會設(shè)置背景圖片和設(shè)置字體文件，一樣需要loader進行處理
使用url-loader和file-loader來處理打包圖片文件以及字體文件
1).安裝包
    npm install url-loader file-loader -D
2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設(shè)置需要匹配的文件類型芹血，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調(diào)用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設(shè)置字節(jié)數(shù)贮泞，只有小于limit值的圖片，才會轉(zhuǎn)換
                //為base64圖片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

F.打包js文件中的高級語法：在編寫js的時候幔烛，有時候我們會使用高版本的js語法
有可能這些高版本的語法不被兼容啃擦，我們需要將之打包為兼容性的js代碼
我們需要安裝babel系列的包
A.安裝babel轉(zhuǎn)換器
    npm install babel-loader @babel/core @babel/runtime -D
B.安裝babel語法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在項目根目錄創(chuàng)建并配置babel.config.js文件
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設(shè)置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調(diào)用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設(shè)置字節(jié)數(shù)饿悬，只有小于limit值的圖片令蛉，才會轉(zhuǎn)換
                //為base64圖片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude為排除項，意思是不要處理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

12.Vue單文件組件

傳統(tǒng)Vue組件的缺陷：
全局定義的組件不能重名，字符串模板缺乏語法高亮珠叔，不支持css(當html和js組件化時蝎宇，css沒有參與其中)
沒有構(gòu)建步驟限制，只能使用H5和ES5祷安，不能使用預(yù)處理器（babel）
解決方案：
使用Vue單文件組件姥芥，每個單文件組件的后綴名都是.vue
每一個Vue單文件組件都由三部分組成
1).template組件組成的模板區(qū)域
2).script組成的業(yè)務(wù)邏輯區(qū)域
3).style樣式區(qū)域

代碼如下：

<template>

    組件代碼區(qū)域

</template>

<script>

    js代碼區(qū)域

</script>

<style scoped>

    樣式代碼區(qū)域

</style>

補充：安裝Vetur插件可以使得.vue文件中的代碼高亮

配置.vue文件的加載器
A.安裝vue組件的加載器
npm install vue-loader vue-template-compiler -D
B.配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
......
plugins:[ htmlPlugin, vuePlugin ],
module : {
rules:[
...//其他規(guī)則
{
test:/.vue$/,
loader:"vue-loader",

            }
        ]
    }
}

13.在webpack中使用vue

上一節(jié)我們安裝處理了vue單文件組件的加載器，想要讓vue單文件組件能夠使用汇鞭，我們必須要安裝vue
并使用vue來引用vue單文件組件凉唐。
A.安裝Vue
npm install vue -S
B.在index.js中引入vue：import Vue from "vue"
C.創(chuàng)建Vue實例對象并指定el，最后使用render函數(shù)渲染單文件組件
const vm = new Vue({
el:"#first",
render:h=>h(app)
})

14.使用webpack打包發(fā)布項目

在項目上線之前虱咧，我們需要將整個項目打包并發(fā)布熊榛。
A.配置package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p"
}
B.在項目打包之前，可以將dist目錄刪除腕巡，生成全新的dist目錄

15.Vue腳手架

Vue腳手架可以快速生成Vue項目基礎(chǔ)的架構(gòu)玄坦。
A.安裝3.x版本的Vue腳手架：
npm install -g @vue/cli
B.基于3.x版本的腳手架創(chuàng)建Vue項目：
1).使用命令創(chuàng)建Vue項目
命令：vue create my-project
選擇Manually select features(選擇特性以創(chuàng)建項目)
勾選特性可以用空格進行勾選。
是否選用歷史模式的路由：n
ESLint選擇：ESLint + Standard config
何時進行ESLint語法校驗：Lint on save
babel绘沉，postcss等配置文件如何放置：In dedicated config files(單獨使用文件進行配置)
是否保存為模板：n
使用哪個工具安裝包：npm
2).基于ui界面創(chuàng)建Vue項目
命令：vue ui
在自動打開的創(chuàng)建項目網(wǎng)頁中配置項目信息煎楣。
3).基于2.x的舊模板，創(chuàng)建Vue項目
npm install -g @vue/cli-init
vue init webpack my-project

C.分析Vue腳手架生成的項目結(jié)構(gòu)
node_modules:依賴包目錄
public：靜態(tài)資源目錄
src：源碼目錄
src/assets:資源目錄
src/components：組件目錄
src/views:視圖組件目錄
src/App.vue:根組件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:

16.Vue腳手架的自定義配置

A.通過 package.json 進行配置 [不推薦使用]
    "vue":{
        "devServer":{
            "port":"9990",
            "open":true
        }
    }
B.通過單獨的配置文件進行配置车伞，創(chuàng)建vue.config.js
    module.exports = {
        devServer:{
            port:8888,
            open:true
        }
    }

17.Element-UI的基本使用

Element-UI:一套基于2.0的桌面端組件庫
官網(wǎng)地址：http://element-cn.eleme.io/#/zh-CN
A.安裝：
npm install element-ui -S
B.導(dǎo)入使用：
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末择懂，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子另玖，更是在濱河造成了極大的恐慌困曙，老刑警劉巖，帶你破解...
    沈念sama閱讀 217,542評論 6贊 504
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件谦去，死亡現(xiàn)場離奇詭異慷丽，居然都是意外死亡，警方通過查閱死者的電腦和手機鳄哭，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門要糊，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人妆丘，你說我怎么就攤上這事锄俄。” “怎么了勺拣？”我有些...
    開封第一講書人閱讀 163,912評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵奶赠，是天一觀的道長。 經(jīng)常有香客問我药有，道長车柠，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,449評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮竹祷，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘羊苟。我一直安慰自己塑陵，他們只是感情好，可當我...
    茶點故事閱讀 67,500評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布蜡励。 她就那樣靜靜地躺著令花，像睡著了一般。 火紅的嫁衣襯著肌膚如雪凉倚。 梳的紋絲不亂的頭發(fā)上兼都，一...
    開封第一講書人閱讀 51,370評論 1贊 302
  • 城市分裂傳說
    那天，我揣著相機與錄音稽寒，去河邊找鬼扮碧。 笑死，一個胖子當著我的面吹牛杏糙，可吹牛的內(nèi)容都是我干的慎王。 我是一名探鬼主播，決...
    沈念sama閱讀 40,193評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼宏侍，長吁一口氣：“原來是場噩夢啊……” “哼赖淤！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起谅河，我...
    開封第一講書人閱讀 39,074評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤咱旱，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后绷耍，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吐限，經(jīng)...
    沈念sama閱讀 45,505評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3贊 335
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年锨天，在試婚紗的時候發(fā)現(xiàn)自己被綠了毯盈。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,841評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡病袄，死狀恐怖搂赋，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情益缠，我是刑警寧澤脑奠，帶...
    沈念sama閱讀 35,569評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站幅慌，受9級特大地震影響宋欺，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一齿诞、第九天 我趴在偏房一處隱蔽的房頂上張望酸休。 院中可真熱鬧，春花似錦祷杈、人聲如沸斑司。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0贊 22
  • 一樁弒父案但汞，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽宿刮。三九已至，卻和暖如春私蕾，著一層夾襖步出監(jiān)牢的瞬間僵缺，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工踩叭， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留磕潮，地道東北人。 一個月前我還...
    沈念sama閱讀 47,962評論 2贊 370
  • 代替公主和親
    正文 我出身青樓懊纳，卻偏偏與公主長得像揉抵，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子嗤疯，可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2贊 354