Git Clone project: strapi-starter-nuxt-blog

Git clone https://github.com/strapi/strapi-starter-nuxt-blog.git CD strapi - starter - nuxt - blog # yarn yarn depend on installation package Setup :yarn # Install dependency package NPM run setup: NPMCopy the code

Step 2: Set up your project. This command will start both the back-end server and the front-end server, and perform data migration in the back-end server

NPMNPM run build: NPM NPM run develop: NPMCopy the code

If you think it’s too long to type Develop, go to package.json under the Strapi-starter-nuxt-blog project

"develop:yarn": "yarn seed:yarn && npm-run-all -p develop:yarn:*",
Copy the code

Modified into

"dev:yarn": "yarn seed:yarn && npm-run-all -p develop:yarn:*",
Copy the code

The sed. js code in Backend should be commented out the next time you run it, otherwise the original database will be overwritten

You can also start the server separately. I used a separate startup for my own development.

The back-end service

CD Backend # Use yarn build yarn develop # Run NPMNPM run build NPM run developCopy the code

The front-end service

CD frontend # use yarn develop # use NPM NPM run developCopy the code

Nuxt server running here =>

http://localhost:3000

Strapi server runs successfully here, enter the registered administrator

http://localhost:1337/admin/auth/register

After login, you can see the data of 3 tables

Corresponding article data

Click create and Update data structure, you can see 2 ariticles and Categories, which are the official examples created by yourself. The other tables are available by default.

Ariticles correspond to blog articles, and categories correspond to categories of articles, where you can add or change the names of the fields you like

Then look at the code

The data was queried using Apollo GraphQL (a collection of full stack solutions based on GraphQL)

To query data from articles, write a query

query Articles($id: ID!) { 
 article(id: $id) {  
  id  
  title  
  content   
 image {   
   url 
   }   
 published_at  
}
}
Copy the code

In index.vue under Pages, the corresponding statement is introduced

import articlesQuery from '~/apollo/queries/article/articles' import Articles from '~/components/Articles' export Default {data() {return {articles: [],}}, components: {articles}, Apollo: {articles: { prefetch: true, query: articlesQuery, variables () { return { id: parseInt(this.$route.params.id) } } } } }Copy the code

After a general understanding, I believe I have some understanding of graphQL data acquisition, so I can start to modify the official project into my own blog, after all, the official example is too simple. Change your UI layout according to some mainstream websites. Strapi-starter – nuxT-blog strapI-starter – Nuxt-blog strapI-starter – NuxT-blog strapI-starter – NuxT-blog

Github.com/kitchenlian…

Official document Address: strapi. IO /documentati…