容我思考思考文章结构，能够更容易让新手入门，思考的过程中被小编拒了一次，囧。本文将会从项目开发角度出发，由外向内拆解，自顶而下设计
效果图
暗黑风是不是很炫～Step by step,follow me~
知识储备
- 核心思想
对于知识储备这类事，无需多言，尤其是node横空出世之后，前端技能栈日新月异，学海无涯！一开始看不懂不要紧，书读百遍，其义自现！作为一名“码农”， 更要加强阅读能力＋实操能力结合。
项目初始化
安装nodejs,这个不赘述了
-
安装vue-cli，这是vue.js官方推荐的大中型项目构建工具脚手架
npm install -g vue-cli
-
初始化项目，选择webpack作为资源打包工具
vue init webpack workbook(eslint，karma,e2e test等都选择n) cd workbooknpm installnpm run dev // 打开 http://localhost:8080,应该能看到页面
-
安装相关依赖，咱们把本次能用到的依赖安装一下
npm install -D vue-router vuex marked highlight.js// -D 和 --save-dev 等效，marked是markdown 语法转换工具库
项目结构
ok，项目初始化工作结束,咱们来思考用vue＋vuex＋vue-router来构建页面吧。
由于咱们后面几乎所有的工作都在src文件夹下完成，所以我们先来看看我们未来的结构吧
├── App.vue //初始化工作，以及挂载路由的router-view组件├── assets //静态资源文件│ └── darkness.css //暗黑风stylesheet├── components //组件放在这儿│ ├── rawEditor.vue //markdown 文本编辑器组件│ └── renderEditor.vue //渲染后的展示组件├── main.js //入口程序├── router.js //SPA 路由配置文件├── views //页面│ ├── 404.vue // 除'/'以外的非法路由，一律指向404│ └── index.vue // '/'路由指向页面，内含 rawEditor.vue & renderEditor.vue└── vuex ├── actions.js //vuex理念中 actions -> dispatch ├── getters.js //vuex 理念中 Getters Can Return Derived State，简言之，组建里面的状态都通过getters来获取 └── store.js //vuex 理念中 initial state,mutations，相应dispatch－》mutations－》从而完成对state的更新
AhhA，Talk is cheap ，show me the code！
1. 在 src 根目录下创建 router.js
//router.jsexport default (router)=>router.map({ '/':{ name:'index',//应用首页 component:require('./views/index') //加载index页面 }, '*':{//除'/'以外的所有路由，均跳转到404页面 name:'404', component:require('./views/404')// 加载404页面 }}) 2. 修改 main.js 入口文件，我们要加上 vue-router
//main.jsimport Vue from 'vue'import App from './App'import VueRouter from 'vue-router'import configRouter from './router'require('./assets/darkness.css') Vue.use(VueRouter)const router = new VueRouter()configRouter(router)//注入路由规则router.start(Vue.extend(App),'#app')//#app是what 鬼，哪里来的？/*细心或者有经验的同学可能已经发现，在整个项目的根目录有个index.html 文件，这个其实才是我们整个应用的第一入口，SPA（Single Page App）完美的解释,我们来修改一下它吧。*///index.html workbook 3. 修改 App.vue
//app.vue 瞧好了，vue 组件大法来了//路由组件
4. 开始写我们的两个页面吧
在src目录下，新建views文件夹，存放我们的页面，index.vue & 404.vue
//index.vue //对照页面布局草稿图，分别把两个组件加载进来//404.vue 简单到令人发指，不过我只是为了实现router功能，请开恩。 404
5. 开始写具体组件
在写组件之前，我们先静静地思考一下
-
代码都写了快一大半了，怎么还不见饱守吹捧的vuex登场。OK！如你所愿，不过在vuex登场之前，咱们可否拿出纸和笔 或者 头脑风暴一下，想想咱们的应用的state应该是什么！！！
BingGo！
rawHtml和renderHtml，简简单单的两个state，就能够满足我们的应用需求。
-
rawHtml和renderHtml之间又有什么关系呢?rawHtml经过转换之后给renderHtml赋值
Jack：我觉得是时候引入 Vuex 了
在src 文件夹下 新建vuex文件夹，创建store.js ,getters.js,actions.js
//store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);const state = { rawHtml:'', renderHtml:''}//这块是重点，能够改变state的只能够在 mutations完成！！！const mutations = { MARKDOWN_SUCCESS(state,_rawHtml,content){ console.log(_rawHtml,content) state.rawHtml = _rawHtml state.renderHtml = content }}//最后别忘了，这块要export 出去，还记得我们在编写app.vue 的时候 引入的store，就是这个，SPA只需要在最顶层的app.vue 引用一次即可。export default new Vuex.Store({ state, mutations})//getters.js 简单到不像，getters存在的意义就是 纯粹！！export const getRawHtml = (state)=>state.rawHtml;export const getRenderHtml = (state)=>state.renderHtml;//actions.js 还记得vuex核心思想的那张数据流图，还有上面我描述src的完成状态的关于 vuex里面各文件的意义所在，actions.js 说白了，就是处理玩rawHtml之后，dispatch 结果到 mutations，剩下更新state的工作交给mutationsimport Vue from 'vue'import marked from 'marked';//marked配置文件marked.setOptions({ renderer: new marked.Renderer(), gfm: true, tables: true, breaks: false, pedantic: false, sanitize: true, smartLists: true, smartypants: false, highlight: function (code) { return require('highlight.js').highlightAuto(code).value; }});export const renderHtml = ({dispatch},e)=>{ var _renderHtml = marked(e.target.value) return dispatch('MARKDOWN_SUCCESS',e.target.value,_renderHtml)} 继续我们的组件工作：
这个项目很简单，两个组件，一个是rawEditor 还有一个是 renderEditor，至于为什么要起这个名字，who knows！在components 文件夹下创建rawEditor.vue 和renderEditor.vue文件。
往下走，可能有点复杂，千万别退缩，可能是我表述不够清楚，但是move on，你就能收获整片天空。
//rawEditor.vue//renderEditor.vue{ { {renderHtml}}}
代码写到这里，离成功不远了，是不是有点小期待呢
//打开命令行or terminal 工具，运行一下吧npm run dev
等待一会编译完成后，打开 查看效果，怎么样，是不是很酷！
好吧！大家发现了，我们的样式不够酷炫，也不是 暗黑风。退货、老板给差评！在src/assets文件夹中新建 darkness.css
pre,code { font-family: Menlo, Monaco, "Courier New", monospace;}pre { padding: .5rem; line-height: 1.25; overflow-x: scroll;}@media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; }}a,a:visited { color: #01ff70;}a:hover,a:focus,a:active { color: #2ecc40;}.retro-no-decoration { text-decoration: none;}html { font-size: 12px;}@media screen and (min-width: 32rem) and (max-width: 48rem) { html { font-size: 15px; }}@media screen and (min-width: 48rem) { html { font-size: 16px; }}body { line-height: 1.85;}p,.retro-p { font-size: 1rem; margin-bottom: 1.3rem;}h1,.retro-h1,h2,.retro-h2,h3,.retro-h3,h4,.retro-h4 { margin: 1.414rem 0 .5rem; font-weight: inherit; line-height: 1.42;}h1,.retro-h1 { margin-top: 0; font-size: 3.998rem;}h2,.retro-h2 { font-size: 2.827rem;}h3,.retro-h3 { font-size: 1.999rem;}h4,.retro-h4 { font-size: 1.414rem;}h5,.retro-h5 { font-size: 1.121rem;}h6,.retro-h6 { font-size: .88rem;}small,.retro-small { font-size: .707em;}/* https://github.com/mrmrs/fluidity */img,canvas,iframe,video,svg,select,textarea { max-width: 100%;}html,body { background-color: #222; min-height: 100%;}html { font-size: 18px;}body { width: 100%; color: #fafafa; font-family: "Courier New"; line-height: 1.45; padding: .25rem;}pre { background-color: #333;}blockquote { border-left: 3px solid #01ff70; padding-left: 1rem;} 不行，代码部分然而并没有高亮，老板，我要退货！
服
//在 index.html的head 里面加上
这样咱们的暗黑风的在线markdown日记应用就暂告一段落了，文中表述如果有不清不楚的，欢迎留言。同时我也是一命 new vuer，希望老鸟们能够指点！