从 Vue-cli 开始构建 UI 库到 Markdown 生成文档和演示案例

从 Vue-cli 开始构建 UI 库到 Markdown 生成文档和演示案例 1. vue-cli 环境搭建

打开cmd命令工具，输入npm install -g vue-cli全局安装 vue-cli

安装过程慢，切换到淘宝镜像源npm config set registry https://registry.npm.taobao.org

2. 构建 vue-cli 项目

打开cmd，进入想要创建项目的目录下，输入：vue init webpack vue-ui-docs,回车

等待初始化完成根据控制台输入命令完成接下去的操作

Project name:——项目名称

Project description:——项目描述

Author:——作者

Vue build:——构建模式，一般默认选择第一种

Install vue-router?:——是否安装引入 vue-router，这里选是，vue-router 是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选 no 否则你会非常痛苦，eslint 的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度

Setup unit tests with Karma + Mocha ：——测试可以不安装

Setup e2e tests with Nightwatch ：——测试可以不安装

3. 构建完成初始化项目依赖

初始化完成目录结构

切换到目录 cd C:\Users\jccf\Desktop\vue-ui-docs,执行命令npm install

开始安装依赖环境

依赖环境安装完成

4. 启动项目

打开cmd，进入到项目所在目录下，输入npm run dev,回车，启动项目

打开浏览器输入:8080访问

5. 环境调整

目录结构调整和文件创建

├─examples // 原 src 目录，改成 examples 用作示例展示 │ │ App.vue //主页文件 │ │ main.js //项目入口文件 │ │ │ ├─docs //markdown帮助文档文件夹 │ │ │ └─router │ index.js //路由配置文件 │ ├─src // 新增 src 用于编写存放组件 │ │ index.js //组件集成统一访问文件配置 │ │ │ ├─components //组件文件夹 │ ├─directives //自定义指令文件夹 │ ├─mixins //混入文件 │ └─styles //样式文件夹

由于目录调整需要调整对应的webpack配置才可以启动项目

删除examples\router\index.js的无效代码

找到\build\webpack.base.conf.js文件进行配置调整

修改webpack的主文件入口

entry: { app: './examples/main.js', }

修改webpack编译配置

{ test: /\.js$/, loader: 'babel-loader', include: [resolve('examples'), resolve('src')] }

修改App.vue的代码和引用

启动项目npm run dev有错误就根据错误调整，直到可以正常访问不在报错

6. 解析markdown文件

通过markdown写帮助文档然后解析为页面，参考饿了么UI 组件库的使用 vue-markdown-loader
将markdown文件解析为vue组件直接页面渲染,安装vue-markdown-loader直接执行命令

npm install vue-markdown-loader --save-dev

配置webpack加载器解析markdown，在vue-loader.conf.js在属性rules追加配置加载器

module.exports = { module: { rules: [ { test: /\.md$/, loader: 'vue-markdown-loader' } ] } };

在docs文件下创建第一个markdown文件，test.md

# test > Hello World

配置路由

routes: [{ path: '/test', name: 'test', component: r => require.ensure([], () => r(require('../docs/test.md'))) }]

浏览器访问:8080/#/test,正确的将markdown解析为 vue 组件并正确初始化路由

7. 解析代码块和示例生成