Vue我的首次遇見

從0開始，查看了好多文檔級初級教程。

安裝環(huán)境

sudo pacman -S npm
npm install --registry=https://registry.npm.taobao.org -g  vue  vue-cli
# 前段打包工具
npm i -g webpack webpack-cli

由于 npm 安裝速度慢粪般，本教程使用了淘寶的鏡像及其命令 cnpm有决，安裝使用介紹參照：使用淘寶 NPM 鏡像闸拿。

vue-cli

vue-cli就是一個腳手架，步驟很簡單书幕，輸入幾個命令之后就會生成整個項目新荤，里面包括了webpack、ESLint台汇、babel很多配置等等

vue-cli創(chuàng)建項目

vue --help
# 下面命令中就有如何創(chuàng)建一個項目
vue-init --help
# 執(zhí)行創(chuàng)建命令后等待就可以了
vue init webpack vue_1

項目參數(shù)

2019-04-23 10-01-02 的屏幕截圖.png

這里有幾個需要說明一下苛骨，沒說明的直接回車選擇默認(rèn)就好，對項目沒多大影響苟呐，很傻瓜式：

  • “Project name”：**這個是項目名稱痒芝，默認(rèn)是輸入時的那個名稱，想改的話直接輸入修改牵素，也可以直接回車

  • “Install vue-router”:**是否需要vue-router吼野，這里默認(rèn)選擇使用，這樣生成好的項目就會有相關(guān)的路由配置文件

  • “Use ESLint to lint your code”:**是否使用ESLint两波，剛才說了我們這個項目需要使用所以也是直接回車瞳步，默認(rèn)使用，這樣會生成相關(guān)的ESLint配置

  • “Setup unit tests with Karma + Moch?”:** 是否安裝單元測試腰奋。由于我們現(xiàn)在還沒有單元測試单起，所以這里選擇的是”N”，而不是直接回車哦

  • “Setup e2e tests with Nightwatch”：**是否安裝e2e測試劣坊，這里我也同樣選擇的是“N”

這幾個配置選擇yes 或者 no 對于我們項目最大的影響就是嘀倒，如果選擇了yes 則生成的項目會自動有相關(guān)的配置，有一些loader我們就要配套下載。所以如果我們確定不用的話最好不要yes测蘑，要么下一步要下很多沒有用的loader

項目目錄：

1. build 文件夾：

build.js           
logo.png  
vue-loader.conf.js    
webpack.dev.conf.js
check-versions.js  
utils.js  
webpack.base.conf.js  
webpack.prod.conf.js

如上灌危，這個文件夾主要是進(jìn)行webpack的一些配置，就我個人覺得啊~對我們最有用并且可能會使用的就是webpack.base.config.js碳胳、webpack.dev.config.js勇蝙、webpack.prod.config.js三個webpack的配置文件，分別是基本webpack配置挨约、開發(fā)環(huán)境配置味混、生產(chǎn)環(huán)境配置。實際上這些文件里面的內(nèi)容诫惭，一些簡單的配置都已經(jīng)有了翁锡，包括入口文件、插件夕土、loader馆衔、熱更新等都已經(jīng)配置好了。我們要做的只是根據(jù)自己的項目有什么loader需要增加的怨绣，比如生成環(huán)境需要加上UglifyJsPlugin插件等可以自行配置角溃，或者一些插件增加或者不需要的刪除，其實都是和業(yè)務(wù)相關(guān)了梨熙，其他的都可以不需要動开镣。

2. config 文件夾：

4月 23 09:59 dev.env.js
4月 23 09:59 index.js
4月 23 09:59 prod.env.js
4月 23 09:59 test.env.js

這幾個配置文件我覺得最主要的就是index.js 這個文件進(jìn)行配置代理服務(wù)器，這個地方和我們息息相關(guān)咽扇，和后臺聯(lián)調(diào)就是在這里設(shè)置一個地址就可以了邪财。打開index.js 找到“proxyTable“這個屬性，然后在里面加上對應(yīng)的后臺地址即可 ,構(gòu)建生成環(huán)境也在這里配置质欲，例如：

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

3. src文件夾：

4月 23 09:59 assets
4月 23 09:59 components
4月 23 09:59 router
4月 23 09:59 App.vue
4月 23 09:59 main.js

這個文件夾是整個項目最主要以及使用頻率最高的文件夾树埠。

  • “assets”: 共用的樣式、圖片

  • “components”: 業(yè)務(wù)代碼存放的地方嘶伟，里面分成一個個組件存放怎憋，一個頁面是一個組件，一個頁面里面還會包著很多組件

  • “router”: 設(shè)置路由

  • “App.vue”: vue文件入口界面

  • “main.js：對應(yīng)App.vue 創(chuàng)建vue實例九昧，也是入口文件绊袋，對應(yīng)webpack.base.config.js里的入口配置

4.static 文件夾：

存放的文件不會經(jīng)過webpack處理，可以直接引用铸鹰，例如swf文件如果要引用可以在webpack配置對swf后綴名的文件處理的loader癌别，也可以直接將swf文件放在這個文件夾引用

5.package.json:

這個文件有兩部分是有用的：scripts 里面設(shè)置命令，例如設(shè)置了dev用于調(diào)試則我們開發(fā)時輸入的是
npm run dev 蹋笼；例如設(shè)置了build 則是輸入 npm run build 用于打包;另一部分是這里可以看到我們需要的依賴包,在dependencies和devDependencies中展姐，分別對應(yīng)全局下載和局部下載的依賴包

下載依賴包

npm install --registry=https://registry.npm.taobao.org

運(yùn)行 npm run dev

當(dāng)所有依賴包都下載好之后躁垛，輸入命令：npm run dev 運(yùn)行就可以看到一個自帶的默認(rèn)頁面打開。此時項目就已經(jīng)全部搭建好并且運(yùn)行了~炒雞簡單吧圾笨，總結(jié)下來其實只有四步

  • npm install --global vue-cli 下載vue-cli腳手架
  • vue init webpack vue_1 生成項目教馆，形成基本結(jié)構(gòu)
  • npm install # 依賴包
  • npm run dev 運(yùn)行

打包 npm run build

第一個demo

Webpack 入門教程

分類 編程技術(shù)

Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析擂达，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源土铺。

來自runoob

從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js谍婉、css舒憾、less 轉(zhuǎn)換成一個靜態(tài)文件镀钓，減少了頁面的請求穗熬。

接下來我們簡單為大家介紹 Webpack 的安裝與使用。

創(chuàng)建項目

接下來我們創(chuàng)建一個目錄 app：

mkdir app

在 app 目錄下添加 maxzhao1.js 文件丁溅，代碼如下：

app/maxzhao1.js 文件

document.write("It works.");

在 app 目錄下添加 index.html 文件唤蔗，代碼如下：

app/index.html 文件

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="maxzhao_bundle.js" charset="utf-8"></script>
    </body>
</html>

接下來我們使用 webpack 命令來打包：

webpack-cli  maxzhao1.js -o  maxzhao_bundle.js

執(zhí)行以上命令會編譯maxzhao1.js 文件并生成maxzhao_bundle.js 文件，成功后輸出信息如下所示：

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./maxzhao1.js 29 bytes {0} [built]

在瀏覽器中打開index.html窟赏，輸出結(jié)果如下：

img

創(chuàng)建第二個 JS 文件

接下來我們創(chuàng)建另外一個 js 文件maxzhao2.js妓柜，代碼如下所示：

app/maxzhao2.js 文件

module.exports = "It works from maxzhao2.js.";

更新 maxzhao1.js 文件，代碼如下：

document.write(require("./maxzhao2.js"));

接下來我們使用 webpack 命令來打包：

webpack maxzhao1.js -o maxzhao_bundle.js 

Entrypoint main = maxzhao_bundle.js
[0] ./maxzhao1.js 42 bytes {0} [built]
[1] ./maxzhao2.js 46 bytes {0} [built]

在瀏覽器訪問index.html涯穷，輸出結(jié)果如下所示：

2019-04-24 11-24-35 的屏幕截圖.png

接下來大家可以移步RUNOOB

Loader：加載其它文件

Webpack 本身只能處理 JavaScript 模塊棍掐，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換拷况。

所以如果我們需要在應(yīng)用中添加 css 文件作煌，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情赚瘦，css-loader 會遍歷 CSS 文件粟誓，然后找到 url() 表達(dá)式然后處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標(biāo)簽中起意。

安裝css-loader和style-loader

接下來我們使用以下命令來安裝css-loader和style-loader(全局安裝需要參數(shù) -g)鹰服。

npm i css-loader style-loader
ls
# 多了一個文件夾 node_module 和文件 pack-lock.json
# ` node_modules `目錄，它就是 css-loader 和 style-loader 的安裝目錄揽咕。

使用

接下來創(chuàng)建一個 style.css 文件悲酷，代碼如下：

body {     background: yellow; }

修改 maxzhao1.js 文件，代碼如下：

require("!style-loader!css-loader!./style.css");
document.write(require("./maxzhao2.js"));

編譯：webpack maxzhao1.js -o maxzhao_bundle.js

2019-04-24 11-40-03 的屏幕截圖.png

require CSS文件的時候都要寫 loader前綴!style-loader!css-loader!亲善，當(dāng)然我們可以根據(jù)模塊類型（擴(kuò)展名）來自動綁定需要的loader设易。 將maxzhao1.js 中的 require("!style-loader!css-loader!./style.css") 修改為require("./style.css") ：

require("./style.css"); document.write(require("./maxzhao2.js"));

然后執(zhí)行：

webpack maxzhao1.js maxzhao_bundle.js --module-bind 'css=style-loader!css-loader'

配置文件：配置編輯選項

我們可以將一些編譯選項放在配置文件中，以便于統(tǒng)一管理：

創(chuàng)建 webpack.config.js 文件逗爹，代碼如下所示：

module.exports = {
    entry: "./maxzhao1.js",
    output: {
        path: __dirname,
        filename: "maxzhao_bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

接下來我們只需要執(zhí)行webpack命令即可生成maxzhao_bundle.js文件：

webpack   Hash: 4fdefac099a5f36ff74b Version: webpack 1.12.13 Time: 576ms     Asset     Size  Chunks             Chunk Names bundle.js  11.8 kB       0  [emitted]  main    [0] ./runoob1.js 65 bytes {0} [built]    [5] ./runoob2.js 46 bytes {0} [built]     + 4 hidden modules

webpack 命令執(zhí)行后亡嫌，會默認(rèn)載入當(dāng)前目錄的webpack.config.js文件嚎于。

其它

vue-router懶加載

單頁面應(yīng)用，如果沒有應(yīng)用懶加載挟冠，第一次進(jìn)入時于购，需要加載的內(nèi)容過多，會出現(xiàn)長時間的白屏知染，不利于用戶體驗肋僧，運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時候加載相對應(yīng)的頁面控淡，可以有效減少第一次加載的壓力和用時嫌吠。

router文件夾下的index.js原路由加載

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

修改為懶加載

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['@/components/HelloWorld'], resolve)
    }
  ]
})

配置sass及屏幕適配

配置sass

1.安裝sass-loader及node-sass

npm install sass-loader node-sass --save-dev

2.使用
在.vue文件中的style中添加 lang='scss'，例如

<style scoped lang='scss'>
    $t-base:#32ba90;
    .wrap{
        color: $t-base;
    }
</style>

移動端---屏幕適配

1.在src文件夾中新建一個文件夾styles掺炭，并新建兩個scss文件 --- mixin.scss / reset.scss
mixin.scss

$SCALE: 10;
$BASE: 375 / $SCALE;//375為設(shè)計圖尺寸

// 超過顯示省略號
@mixin ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
//多行文本辫诅，超過顯示省略號
@mixin moreLine($num){
    display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/
    -webkit-box-orient: vertical; /** 設(shè)置或檢索伸縮盒對象的子元素的排列方式 **/
    -webkit-line-clamp: $num; /** 顯示的行數(shù) **/
    overflow: hidden;  /** 隱藏超出的內(nèi)容 **/
}

@function rem ($px) {
  @return ($px / $BASE) + rem
}

reset.scss

@import './mixin.scss';

$size_small:rem(12);
$size_middle:rem(14);
$size_default:rem(16);
$size_big:rem(18);
$text_color: #666;
$bg_color: #32ba90;
$border_color: #dedede;

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, em,textarea, button, input, select, figure, figcaption {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    border: none;
    font-weight: normal;
    font-family: PingFangSC-Light,helvetica,'Heiti SC';
    box-sizing: border-box;
    font-size: 14px;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
    &:hover{
        outline: none;
    }
}
a, a:visited {
    text-decoration: none;
    color: #333;
}
input:focus {
    outline: none;
    border: none;
}
html, body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #333;  
  padding: 0;
  margin: 0;
}
// 禁止用戶選中
body{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
::-webkit-scrollbar {
    display: none;
}

.fl{
    float: left;
}
.fr{
    float: right;
}
.clearfix:after{  /*最簡方式*/
    content: '';
    display: block;
    clear: both;
}
.clearfix{ /*兼容 IE*/
    zoom: 1;
}

2.在App.vue文件中設(shè)置html的font-size

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  name: 'App',
  mounted () {
      // 設(shè)置html的font-size
      document.addEventListener('DOMContentLoaded', function () {
        const html = document.querySelector('html');
        html.style.fontSize = window.innerWidth / 10 + 'px';
      });
    }
}
</script>

3.mixin.scss則需要在所需的.vue文件中的style中引入，例如components中的HelloWorld.vue

<style scoped lang='scss'>
 @import '../styles/reset.scss';
  /*可使用mixin和reset中的變量及方法*/
</style>

數(shù)據(jù)請求axios

1.安裝axios

npm install axios --save

2.在src文件夾中新建api文件夾涧狮，并新建index.js文件

import axios from 'axios';
var qs = require('qs');


if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL =  ''; //''里面填寫請求域名
}

import VueRouter from 'vue-router';


//get請求方式
export const home = () => {
  return axios.get('/api/index');
}
//post請求方式(包含參數(shù))
export const article = (id)=>{
    const params = qs.stringify({'id':id});
    return axios.post('/api/article', params);
}

3.調(diào)用接口

<script>
    import {home} from '@/api';//引入
    
    export default {
      data () {
        return {
        }
    },
   mounted () {
      const self = this;
      home().then(r => {//調(diào)用接口
        let res = r.data;
        console.log(res)
      });
    },
}
</script>

Toast提示

[圖片上傳失敗...(image-ab3c39-1556106279855)]

1.創(chuàng)建一個普通的Toast提示組件

src/components/toast/index.vue

<template>
    <div v-if="showToast" class="toast" >
      <p>{{ toastTitle }}</p>
    </div>
</template>

<script>
export default {
  data: () => ({
    showToast: false,
    toastTitle: '',
  }),
  
  methods: {
    show (params) {
        this.toastTitle = params;
        this.showToast = true
    },

  },
  watch: {
    toastTitle: function(val) {
        if (val) {
          this.showToast = true;
          setTimeout(() => {
            this.showToast = false;
            this.toastTitle='';
          }, 2000)
        }
        return val;
      }
  }
}
</script>

<style scoped lang='scss'>
@import '../../styles/mixin.scss';
    
.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(49, 49, 49, 0.8);
  color: #fff;
  border-radius: rem(5);
  z-index: 999;
  text-align: center;
  font-size: rem(14);
  p{
    margin: 0;
    padding: rem(4) rem(10);
    
  }
}
</style>

2.將組件注冊成為plugin

src/components/toast/plugin.js

import Toast from './index'

export default {
  install (Vue, options = {}) {
    const VueToast = Vue.extend(Toast)
    let toast = null

    function $toast (params) {
      return new Promise(resolve => {
        if (!toast) {
          toast = new VueToast()
          toast.$mount()
          document.querySelector(options.container || 'body').appendChild(toast.$el)
        }
        toast.show(params)
        resolve()
      })
    }

    Vue.prototype.$toast = $toast
  }
}

3.在main.js中載入

//toast
import toast from './components/toast/plugin'
Vue.use(toast)

4.在頁面中使用

<template>
  <div class="wrap">
    <button class="btn" @click="showToast">show toast</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  methods: {
    showToast () {
     this.$toast('toast')
    }
  }
}
</script>

第一個項目

前言

我這里安裝好之后直接就帶router了炕矮，對與我這個沒入門的人來說有點難度，但我就喜歡迎難而上者冤！

下面所有的介紹都會包含路由了肤视，剛剛開始的時候，會避開路由涉枫。

插曲：我的系統(tǒng)是Manjaro 所以我安裝了atom邢滑，挺方便快捷的；

創(chuàng)建

vue-init webpack vue_maxzhao
# 一路回車就可以了
cd vue_maxzhao
npm i

查看基礎(chǔ)幫助

cat README.md

啟動

npm run dev

打開http://localhost:8080文件就會出現(xiàn)默認(rèn)效果愿汰。

測試基礎(chǔ)模塊語法

Vue.js 使用了基于 HTML 的模版語法困后，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。

Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)尼桶。

結(jié)合響應(yīng)系統(tǒng)操灿，在應(yīng)用狀態(tài)改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應(yīng)用到 DOM 操作上泵督。

插值

文本

數(shù)據(jù)綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值：

略……

本文地址：Vue我的首次遇見

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末趾盐，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子小腊，更是在濱河造成了極大的恐慌救鲤，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,214評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件秩冈，死亡現(xiàn)場離奇詭異本缠，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)入问，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門丹锹，熙熙樓的掌柜王于貴愁眉苦臉地迎上來稀颁，“玉大人，你說我怎么就攤上這事楣黍∝以睿” “怎么了？”我有些...
    開封第一講書人閱讀 152,543評論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵租漂，是天一觀的道長阶女。 經(jīng)常有香客問我，道長哩治，這世上最難降的妖魔是什么秃踩？ 我笑而不...
    開封第一講書人閱讀 55,221評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮业筏，結(jié)果婚禮上憔杨，老公的妹妹穿的比我還像新娘。我一直安慰自己驾孔，他們只是感情好芍秆，可當(dāng)我...
    茶點故事閱讀 64,224評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布惯疙。 她就那樣靜靜地躺著翠勉，像睡著了一般。 火紅的嫁衣襯著肌膚如雪霉颠。 梳的紋絲不亂的頭發(fā)上对碌，一...
    開封第一講書人閱讀 49,007評論 1贊 284
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音蒿偎，去河邊找鬼朽们。 笑死，一個胖子當(dāng)著我的面吹牛诉位，可吹牛的內(nèi)容都是我干的骑脱。 我是一名探鬼主播，決...
    沈念sama閱讀 38,313評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼苍糠，長吁一口氣：“原來是場噩夢啊……” “哼叁丧！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起岳瞭，我...
    開封第一講書人閱讀 36,956評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤拥娄，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后瞳筏，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體稚瘾，經(jīng)...
    沈念sama閱讀 43,441評論 1贊 300
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年姚炕，在試婚紗的時候發(fā)現(xiàn)自己被綠了摊欠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丢烘。...
    茶點故事閱讀 38,018評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖些椒，靈堂內(nèi)的尸體忽然破棺而出铅协，到底是詐尸還是另有隱情，我是刑警寧澤摊沉，帶...
    沈念sama閱讀 33,685評論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布狐史，位于F島的核電站，受9級特大地震影響说墨，放射性物質(zhì)發(fā)生泄漏骏全。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一尼斧、第九天 我趴在偏房一處隱蔽的房頂上張望姜贡。 院中可真熱鬧，春花似錦棺棵、人聲如沸楼咳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0贊 19
  • 一樁弒父案烛恤，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽母怜。三九已至，卻和暖如春缚柏，著一層夾襖步出監(jiān)牢的瞬間苹熏，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工币喧， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留轨域，地道東北人。 一個月前我還...
    沈念sama閱讀 45,467評論 2贊 352
  • 代替公主和親
    正文 我出身青樓杀餐，卻偏偏與公主長得像干发，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子史翘，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,762評論 2贊 345