vue.js 构建项目_使用Vue.js为任何CMS或数据构建快速的网站

最新推荐文章于 2023-05-02 17:04:18 发布

cuk5340

最新推荐文章于 2023-05-02 17:04:18 发布

阅读量357

点赞数

文章标签： java vue web python javascript ViewUI

原文链接：https://vuejsexamples.com/build-blazing-fast-websites-for-any-cms-or-data-with-vue-js/

版权

vue.js 构建项目

网格状 (Gridsome)

Build blazing fast websites for any CMS or data with Vue.js.

使用Vue.js为任何CMS或数据构建快速的网站。

This project is under active development. Any feedback or contributions would be appreciated.

该项目正在积极开发中。任何反馈或贡献，将不胜感激。

View Documentation 查看文档 Download Source 下载源

享受现代开发堆栈 (Enjoy modern dev stack)

Build websites using latest web tech tools that developers love - Vue.js, GraphQL and Webpack. Get hot-reloading and all the power of Node.js. Gridsome makes building websites fun again.

使用开发人员喜欢的最新Web技术工具(Vue.js，GraphQL和Webpack)构建网站。获得热重装和Node.js的全部功能。 Gridsome使构建网站再次变得有趣。

携带自己的数据 (Bring your own data)

Gridsome lets you use any CMS or data source for content. Pull data from WordPress, Contentful or any other headless CMS or APIs and access it with GraphQL in your components and pages.

Gridsome使您可以将任何CMS或数据源用于内容。从WordPress，Contentful或任何其他无头CMS或API中提取数据，并在您的组件和页面中使用GraphQL进行访问。

移动优先架构 (Mobile-first architecture)

Only critical HTML, CSS and JavaScript are loaded at first, and then the next pages are prefetched in the background so users can click around extremely fast without page reloads and even offline

首先仅加载关键HTML，CSS和JavaScript，然后在后台预提取下一页，因此用户可以非常快速地单击浏览，而无需重新加载页面甚至脱机

极快的加载 (Extremely fast loading)

Gridsome automatically optimises your frontend to load and perform blazing fast. You get code-splitting, asset optimisation, lazy-loading, and almost perfect Lighthouse scores out-of-the-box.

Gridsome会自动优化您的前端，以快速加载并快速执行。您可以获得开箱即用的代码拆分，资产优化，延迟加载和几乎完美的Lighthouse分数。

免费全球扩展 (Scale globally at no cost)

Gridsome sites can be entirely hosted on a CDN and can handle thousands to millions of hits without breaking - and no expensive server costs.

Gridsome网站可以完全托管在CDN上，并且可以处理数千至数百万次的点击，而不会中断-且服务器成本不高。

无头的前端 (The frontend for the headless)

Design and build websites that are decoupled from the CMS. This means you can easily change the CMS later or test a complete redesign without breaking your site.

设计和构建与CMS分离的网站。这意味着您以后可以轻松更改CMS或测试完整的重新设计而不会破坏您的网站。

快速开始 (Quick start)

1.安装Gridsome CLI工具 (1. Install Gridsome CLI tool)

npm install --global @gridsome/cli

2.创建一个Gridsome项目 (2. Create a Gridsome project)

gridsome create my-gridsome-site to create a new project
gridsome create my-gridsome-site以创建一个新项目
cd my-gridsome-site to open folder
cd my-gridsome-site打开文件夹
gridsome develop to start local dev server at http://localhost:8080
gridsome develop以在http://localhost:8080启动本地开发服务器
Happy coding 🎉🙌
快乐编码🎉🙌

3.后续步骤 (3. Next steps)

Add .vue files to /pages directory to create pages.
将.vue文件添加到/pages目录以创建页面。
Use gridsome build to generate static files in a /dist folder
使用gridsome build在/dist文件夹中生成静态文件
Use gridsome serve for server-side rendering
使用gridsome serve进行服务器端渲染

学到更多... (Learn more...)

如何贡献 (How to contribute)

Install Node.js 8.3 or higher and Yarn. It's also recommended to install Lerna globally.

安装Node.js 8.3或更高版本以及Yarn 。还建议在全球范围内安装Lerna 。

Clone this repository.
克隆此存储库。
Create a new Gridsome project inside the /projects folder.
在/projects文件夹中创建一个新的Gridsome项目。
Enter the new project folder and run yarn (or lerna bootstrap if installed).
输入新的项目文件夹并运行yarn (或lerna bootstrap如果已安装))。
The project will now use the local packages when you run gridsome develop.
现在，当您运行gridsome develop时，项目将使用本地包。

To use @gridsome/cli in the repo as a global command. Enter the /packages/cli folder and run npm link.

要将回购中的@gridsome/cli用作全局命令。输入/packages/cli文件夹，然后运行npm link 。

Yarn will add dependencies from your test projects to the root yarn.lock file. So you should not commit changes in that file unless you have added dependencies to any of the core packages. If you need to commit it, remove your projects from the /projects folder temporary and run yarn or lerna bootstrap in the root folder. Yarn will then clean up the lock file with only core dependencies. Commit the file and move your projects back and run yarn or lerna bootstrap again to start developing.

Yarn会将测试项目中的依赖项添加到根yarn.lock文件中。因此，除非您已将依赖项添加到任何核心程序包，否则不应提交该文件中的更改。如果需要提交，请从/projects文件夹中临时删除项目，然后在根文件夹中运行yarn或lerna bootstrap 。然后，Yarn将仅使用核心依赖项来清理锁定文件。提交文件并将项目移回并再次运行yarn或lerna bootstrap以开始开发。