Nuxt-web

Nuxtjs based on the development of blog system

Project Introduction:

  • Main technologies: NUxTJS2.0, Element-UI 2.0

  • Plug-ins used: Axios, less

Related projects

Together with two other projects, a blogging system was formed:

Backend service: springbootAdmin(gitee.com/wilkwo/spri…)

Background management: vueAdmin(gitee.com/wilkwo/vueA…)

Demo address

Website: www.dsiab.com

After pulling the code, you can see the effect (if you report cross-domain configuration), without running back-end services, directly call the official website interface.

Background management address:

admin.dsiab.com

Test account: test

Test password: test

Reasons for choosing NUXT:

  • Nuxt development projects can be indexed by search engines, seo.

  • Easy to get started, the syntax is basically the same as VUE, part of the writing method is different, just need to create a file according to the directory, NUXT will automatically generate the corresponding route.

  • Normal access to statistics and advertising codes

insufficient

  • Due to Nuxt’s server-side rendering, there are many factors that affect page opening speed, including page content size, server performance, network bandwidth, and so on. The NuxT project can render the main content of a page on the server side, while other content, regardless of the search engine, can be rendered in the browser, i.e. ajax requests are made after the page is loaded, which greatly reduces the server stress.

  • The element-UI part of the feature is not friendly to search engines and SEO because the links that element-UI components need to jump to are not a-links, so they need to be written or modified from the element-UI. For example, the menu section and paging components need to be modified. This project has a rewrite page component for seo convenience.

Improve loading performance

  • Sometimes certain interfaces don’t need to be rendered on the server, they can be rendered in the browser. For example, the current home page list is rendered by a server call, and the recommendation and classification of the menu on the right are rendered by the browser, just like normal Ajax calls

  • Notice The nginx reverse proxy needs to be configured on the browser interface. For details, see www.dsiab.com/post/4421

  • This project uses @nuxtjs/component-cache to improve load performance

How to Start an Application


# Download code
git clone https://gitee.com/wilkwo/nuxt-web.git

# install dependencies
$ npm install

Start local at localhost:3000
$ npm run dev

Build the server, then execute the start command

$ npm run build

$ npm run start

Generate static projects

$ npm run generate
Copy the code