使用vue+el构建表格_如何使用Vue和VuePress构建文档系统

使用vue+el构建表格

介绍 (Introduction)

Good documentation is a critical part of a successful project, but a full documentation system may be more involved than you project requires. In this case, static pages often do just fine. In this post, we shall be building out a static documentation website which is also a single page application using the Vue-powered static site builder, VuePress.

良好的文档记录是成功项目的关键部分，但是完整的文档记录系统可能比您的项目需要的更多。 在这种情况下，静态页面通常效果很好。 在本文中，我们将使用Vue支持的静态网站构建器VuePress构建一个静态文档网站，该网站也是单页应用程序。

静态网站 (Static Sites)

Static sites are websites that are served as they are stored. There is no direct client-server interaction except from embedded third-party applications. Static site generators abound on the internet and each differs from the others. Some favor speed and load times over flexibility, and some others tout extended functionality. Static sites are preferred because of their increased speed, and the absence of a server mitigates the likelihood of security flaws.

静态网站是在存储时提供服务的网站。 除了嵌入式第三方应用程序之外，没有直接的客户端-服务器交互。 静态站点生成器在Internet上比比皆是，并且彼此不同。 有些人认为速度和加载时间胜过灵活性，而另一些人则宣称扩展功能。 首选静态站点，因为它们可以提高速度，并且由于没有服务器，因此可以减少出现安全漏洞的可能性。

VuePress features a static site generator as well as a default theme suited for quickly building documentation websites. In this tutorial, we’ll use the default documentation theme to build our system.

VuePress具有静态站点生成器以及适合快速构建文档网站的默认主题。 在本教程中，我们将使用默认的文档主题来构建我们的系统。

VuePress (VuePress)

By default, VuePress Parses markdown files as structured in folders into HTML files to be served. VuePress ships out of the box with Vue, Vue Router for creating individual routes, and webpack for bundling assets. During build, each markdown file created is parsed as a Vue template, while assets are bundled by webpack. Parsing the markdown files into Vue templates creates an avenue you can use to pass in native Vue scripts in the form of single file components.

默认情况下，VuePress将标记结构的文件夹中的标记文件解析为HTML文件以提供服务。 VuePress开箱即用，附带Vue， Vue Router(用于创建单个路由)和Webpack(用于捆绑资产)。 在构建期间，每个创建的markdown文件都将解析为Vue模板，而资产则由webpack捆绑在一起。 将markdown文件解析为Vue模板会创建一个途径，您可以使用该途径以单个文件组件的形式传入本地Vue脚本。

VuePress is SEO-friendly and by default provides a means to implement analytics tracking using Google analytics on your pages. Also, VuePress ships with a minimal search system that indexes all headers on the website and displays them upon search.

VuePress对SEO友好，默认情况下提供了一种使用页面上的Google Analytics(分析)实现分析跟踪的方法。 此外，VuePress附带了一个最小的搜索系统，该系统会索引网站上的所有标题并在搜索时显示它们。

Although VuePress ships with a default responsive layout for documentation, it also supports custom layouts for styling. For this post, we shall build a minimal documentation system utilizing the default theme as well as implement the Vue in Markdown feature, by way of building a simple counter into a markdown file.

尽管VuePress随附了用于文档的默认响应式布局，但它也支持用于样式的自定义布局。 对于本篇文章，我们将通过在markdown文件中构建一个简单的计数器，利用默认主题构建一个最小的文档系统，并实现Markdown中的Vue功能。

先决条件 (Prerequisites)

For this tutorial, you should have substantial knowledge of HTML, CSS, and JavaScript. Knowledge of Vue is also helpful but not required.

对于本教程，您应该具有HTML，CSS和JavaScript的大量知识。 了解Vue也很有帮助，但不是必需的。

安装 (Installation)

For this project, you will require Node and its package manager npm. Check if you have it installed on your terminal by running:

对于此项目，您将需要Node及其包管理器npm。 通过运行以下命令检查终端上是否已安装：

node -v && npm -v

This displays the installed versions of node and npm respectively. If you don’t have it installed, you can download it from here.

这将分别显示node和npm的安装版本。 如果尚未安装，则可以从此处下载。

Next, create a new project. Create a new folder and change into that directory:

接下来，创建一个新项目。 创建一个新文件夹并转到该目录：

mkdir vuepress && cd $_

Initialize a new node project in the vuepress directory:

在vuepress目录中初始化一个新的节点项目：

npm init -y

This quickly scaffolds a new project and creates a package.json file.

这样可以快速搭建一个新项目并创建一个package.json文件。

Next, we install VuePress locally with:

接下来，我们使用以下命令在本地安装VuePress：

npm install -D vuepress

Once VuePress is installed in the project, you have everything you need, because VuePress ships with the default documentation theme used for this project. However, we would like to customize the documentation to suit our requirements, so next you’ll create the folders and files with dummy text.

在项目中安装VuePress之后，您将拥有所需的一切，因为VuePress附带了用于该项目的默认文档主题。 但是，我们希望自定义文档以适合我们的要求，因此接下来，您将使用伪文本创建文件夹和文件。

创建文件夹和文件 (Creating Folders and Files)

Take care when creating folders in VuePress, because it evaluates the folders and markdown files according to their arrangement. Each markdown file in a folder compiles to a HTML document with the route being the parent folder.

在VuePress中创建文件夹时要小心，因为它会根据文件夹和markdown文件的排列来评估它们。 文件夹中的每个markdown文件都将编译为HTML文档，且路由为父文件夹。

First, create a docs folder to house all the documentation content and configuration:

首先，创建一个docs文件夹来容纳所有文档内容和配置：

mkdir docs && cd $_

In the docs directory, create the .vuepress folder and the documentation folders housing the files - counter and guide.

在docs目录下，创建.vuepress文件夹和文档文件夹屋中的文件- counter和guide 。

For these routes to work, they require a README.md file in each folder. This serves as a home route to that particular subsection.

为了使这些路由起作用，它们在每个文件夹中都需要README.md文件。 这是通向该特定小节的本地路线。

The counter folder contains markdown files to be parsed as well as default README.md files for the home page. The guide folder contains similar contents to the counter folder.

counter文件夹包含要解析的markdown文件以及主页的默认README.md文件。 guide文件夹包含与counter文件夹类似的内容。

The .vuepress folder houses the components directory, the dist folder which is created on build and the config.js file which is used to configure the overall system.

.vuepress文件夹包含components目录，在构建时创建的dist文件夹和用于配置整个系统的config.js文件。

创建Vue组件 (Creating Vue Components)

For this project, we’ll build a simple counter using Vue. Create two Vue components with the .vue suffix named counter.vue and my-header.vue. These components will serve as a counter component and a simple header respectively. In my-header.vue, edit the vue script:

对于此项目，我们将使用Vue构建一个简单的计数器。 使用后缀名为counter.vue和my-header.vue的.vue创建两个Vue组件。 这些组件将分别用作计数器组件和简单标头。 在my-header.vue ，编辑vue脚本：

Edit the counter.vue script like this:

像这样编辑counter.vue脚本：

This component contains everything you need for the counter. The Vue components are now ready to be used.

该组件包含计数器所需的一切。 现在可以使用Vue组件了。

创建Markdown文件 (Creating Markdown files)

Next, create markdown files in the counter and guide directories. See the markdown files for counter and guide. Frontmatter is used to dynamically set the title of the individual pages. The component is also placed in the markdown file.

接下来，在counter和guide目录中创建markdown文件。 请参阅降价文件以获取计数器和指南 。 Frontmatter用于动态设置各个页面的标题。 组件也放置在markdown文件中。

These files will later be transformed into static pages. For our homepage, we would also require a README.md markdown file to serve as the homepage. Frontmatter in the markdown files is used to set some dynamic properties of the homepage. Create a README.md file in the docs directory and edit it to:

这些文件稍后将转换为静态页面。 对于我们的主页，我们还需要一个README.md markdown文件作为主页。 降价文件中的Frontmatter用于设置首页的某些动态属性。 在docs目录中创建一个README.md文件，并将其编辑为：

---
home: true
actionText: See Counter App
actionLink: /counter/counter-app
features:
- title: Embedded Vue Counter
    details: A Vue counter developed using Vue is embedded in this doc, now that's the power of VuePress!
- title: Fun Docs made with VuePress
    details: This entire doc was basically made with VuePress which parsed markdown files and corresponding assets using webpack.
footer: Developed using VuePress by William Imoh
---

Next, place the my-header Vue component in the home route. Edit the README.md file to include the component:

接下来，将my-header Vue组件放置在本地路线中。 编辑README.md文件以包含该组件：

---
home: true
actionText: See Counter App
actionLink: /counter/counter-app
features:
- title: Embedded Vue Counter
    details: A Vue counter developed using Vue is embedded in this doc, now that's the power of VuePress!
- title: Fun Docs made with VuePress
    details: This entire doc was basically made with VuePress which parsed markdown files and corresponding assets using webpack.
footer: Developed using VuePress by William Imoh
---

Now you have all the required Markdown files. Let’s proceed to configure the navigation and sidebar using .vuepress/config.js.

现在，您具有所有必需的Markdown文件。 让我们继续使用.vuepress/config.js配置导航和侧边栏。

配置布局 (Configuring The Layout)

The config.js file is used to customize the documentation system. In creating this custom system, we export an object containing the required fields:

config.js文件用于自定义文档系统。 在创建此定制系统时，我们导出一个包含必填字段的对象：

module.exports = {
    title: 'VuePress',
    description: "A demo documentation using VuePress",
    themeConfig:{
        nav: [
            { text: 'COUNTER', link: '/counter/' },
            { text: 'GUIDE', link: '/guide/' },
        ],
        sidebar: [
            {
                title: 'Counter',
                collapsable: false,
                children: [
                '/counter/counter-app'
                ]
            },
            {
                title: 'API Guide',
                collapsable: false,
                children: [
                    '/guide/guide',
                    '/guide/api'
                ]
            }
            ]
    }
}

First, we specify the title of the website and assign it a description, which is good for SEO. This title and description automatically provide an indexed search system on the website with a search bar.

首先，我们指定网站的标题并为其指定描述，这对SEO很有帮助。 该标题和描述会自动为网站上的索引搜索系统提供搜索栏。

Next in the script is the themeConfig object, which receives parameters required to implement certain functionality on the theme. To create a nav bar, we create a nav array that contains objects specifying the display text and route of each nav element. You can see more on configuring the default theme here.

脚本中的下一个是themeConfig对象，该对象接收在主题上实现某些功能所需的参数。 要创建导航栏，我们创建一个nav数组，该数组包含指定每个导航元素的显示文本和路径的对象。 您可以在此处查看有关配置默认主题的更多信息 。

We employed the use of grouped sidebars so users can have a quick glance at the menu at any time in the documentation. The sidebar menu can be set to collapse by default using the collapsable property on the sidebar group. You can find more on the sidebar here.

我们使用了分组的​​侧边栏，因此用户可以随时在文档中快速浏览菜单。 默认情况下，可以使用侧栏组上的collapsable属性将侧栏菜单设置为折叠。 你可以找到更多的侧边栏上这里 。

Now we have everything set, to start a development server, run:

现在我们已经准备好一切，启动开发服务器，运行：

vuepress dev docs

The local dev server is hosted on port 8080. VuePress ships with a hot reload feature which implements any change made to the application during development.

本地开发服务器托管在端口8080上。VuePress附带有热重载功能，该功能可实现开发过程中对应用程序所做的任何更改。

A restart of the development server is required if the Vue components are created while the local development server is live.

如果在本地开发服务器处于活动状态时创建了Vue组件，则需要重新启动开发服务器。

Now that we have a dev server running, the goal is to deploy the site. To clean things up a bit, edit the package.json file to include development commands as well as build commands. Edit the package.json file to:

现在我们已经运行了开发服务器，目标是部署站点。 为了稍微整理一下内容，请编辑package.json文件以包含开发命令和构建命令。 将package.json文件编辑为：

{
    "name": "vuepress",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "devDependencies": {
    "vuepress": "^0.5.0"
    }
}

To build the static files, we can now run:

要构建静态文件，我们现在可以运行：

npm run docs:build

This may take a while to build after which the static files built can be found in .vuepress/dist

构建可能需要一段时间，之后才能在.vuepress/dist找到构建的静态文件。

改变风格 (Changing the Style)

VuePress supports static files as well as webpack assets and care is taken to ensure that the URL assigned to an asset in markdown is correct before build. For our case, we just need to retouch the base color a little. We will override the default colors using styles.

VuePress支持静态文件以及Webpack资产，并在构建之前要确保在markdown中分配给资产的URL是正确的。 对于我们的情况，我们只需要稍微修饰一下底色即可。 我们将使用样式覆盖默认颜色。

Create a new file called override.styl in docs/.vuepress. While making use of the variable names assigned to color as stated in the official documentation, we edit the override.styl script to change the accentColor with:

在docs/.vuepress创建一个名为override.styl的新文件。 在使用官方文档中所述的分配给color的变量名称的同时，我们编辑override.styl脚本以更改accentColor ：

$accentColor = #cfa809
    $textColor = #2c3e50
    $borderColor = #eaecef
    $codeBgColor = #282c34

Restart the development server with:

通过以下方式重新启动开发服务器：

npm run docs:dev

Note that changes made to the styles file are reflected in the browser immediately.

请注意，对样式文件所做的更改将立即反映在浏览器中。

We now have completed the documentation system with individual pages.

现在，我们已经完成了包含各个页面的文档系统。

部署到Netlify (Deploying To Netlify)

Next you’ll deploy the static site using Netlify. Netlify provides a continuous integration option by deploying from Github or any other supported hosted version control provider. Follow these steps to deploy your site to Netlify:

接下来，您将使用Netlify部署静态站点。 通过从Github或任何其他受支持的托管版本控制提供程序进行部署，Netlify提供了一个持续集成选项。 请按照以下步骤将您的站点部署到Netlify：

Step 1 Create an account on Github and Netlify. Push your code using Git to Github.

步骤1在Github和Netlify上创建一个帐户。 使用Git将您的代码推送到Github。

Step 2 Log in your Netlify account and select the ‘New site from Git’ option. Choose Github as the continuous development provider and select the repository containing the documentation.

步骤2登录您的Netlify帐户，然后选择“来自Git的新站点”选项。 选择Github作为持续开发提供者，然后选择包含文档的存储库。

Step 3 Specify the branch to deploy as master or choose whichever branch you would like to deploy. Set the build command to npm run docs:build and the publish directory to docs/.vuepress/dist. Click ‘Deploy Site’. Your website should be deployed in little time and a public URL is provided to access it.

步骤3指定要部署为主分支的分支，或选择要部署的分支。 将build命令设置为npm run docs：build并将publish目录设置为docs / .vuepress / dist。 点击“部署站点”。 您的网站应在短时间内部署，并提供公共URL进行访问。

Here is the deployed version of this tutorial on Netlify.

这是本教程在Netlify上的部署版本 。

结论 (Conclusion)

Static sites are considered useful for their speed, security, and maintainability. In this tutorial we developed a static documentation website, which is also a single paged app, using VuePress. VuePress offers the flexibility of writing Vue scripts inside Markdown files which introduces dynamism into static sites. Feel free to modify the project to include several folders and corresponding markdown files. Happy coding!

静态站点被认为对它们的速度，安全性和可维护性很有用。 在本教程中，我们使用VuePress开发了一个静态文档网站，该网站也是单页应用程序。 VuePress提供了在Markdown文件中编写Vue脚本的灵活性，这将动态性引入了静态站点。 随意修改项目以包括几个文件夹和相应的markdown文件。 编码愉快！

翻译自: https://www.digitalocean.com/community/tutorials/how-to-build-a-documentation-system-with-vue-and-vuepress

使用vue+el构建表格