preface

First of all must be to praise the nuggets, the beginning from CSDN to blog park to nuggets, personally feel the technical atmosphere of nuggets is very nice, is really a treasure community 👏. The technical articles are mostly front end oriented, very front-end developer friendly, and of very low quality. Learning is impossible not to learn, this life is impossible not to learn, only knock on code copy and paste to maintain a life this way, into here everywhere is big guy, boiling point and nice, woo yo ~ super like here, ha ha ha 😀

To tell the truth, most of my learning motivation is really nuggets to bring, whether it is an article or a small volume can enrich themselves, and the basic every morning to take the subway will brush under nuggets, and then touched my knowledge blind area, and then doubt life full of power one day (do not know if there is the same as me 😅). So, the more you see in the Nuggets, the smaller you’ll be.

Let’s cut to the chase

introduce

Nuxt-juejin-project is a study project that uses nuxT. js to copy gold, mainly using: nuxt + KOa + vuex + Axios + Element-UI. All data of this project is synchronized with the mining, because the interface is forwarded through KOA as the middle layer (finding the interface is really a chore 😅), interface routing is redefined and part of the interface data is processed. The main data request of the page is spliced with asyncData on the server side and returned to the front-end rendering. When writing projects, I will try my best to use the configuration provided by NuxT.js and some technical points (server-side rendering, interface forwarding, routing configuration, permission verification, etc.), hoping to learn the process of server-side rendering projects in a more comprehensive way.

This project is my first time to use NuxT.js production, maybe some process details are not good enough. If you want to learn, the advice is for reference only, hope not to mislead you.

function

- Login/logout - permission verification - login status verification - interactive verification - home page - article filtering (classification, hot, latest, hot list) - article bottom page - author list module - recommendation booklet module - article details - body - directory jump - article comments - article sharing Related recommendation - about the author module - related article module - author page - author information - article screening (hot, latest) - article bottom page - personal achievement module - Profile Egg 😛 - search - type screening (comprehensive, article, tag, user) - Time screening (all, within a day, within a week, within three months) - boiling point - boiling point screening (recommendation, hot, concern, classification) - boiling point bottom page - boiling point comments - boiling point sharing - big picture preview - recommended boiling point module - concern topic module - topic - concern topic, all topics - Article filtering (Hot, latest) - article bottom page - Topic details module - Participant module - Tag - Tag details - Article filtering (hot, latest, hottest) - Article bottom page - Tag management - Paid attention tags, all tags - Messages - User messages - Volume - Booklet Filter (classification) - I18N internationalization - Error Page - 404 - Interactive Correlation - Like (article, boiling point) - Follow (author, tag)Copy the code

😶 Use fish time update…

File Structure Description

For a quick understanding of the project, here is a description of the project file structure.

├─ Assets // Static assets │ ├─ Components │ ├─ Components │ ├─ Common // Common components │ ─ Middleware // │ ├─ Pages │ ├─ Plugins │ ├─ Pages │ ├─ Plugins Axios, API) │ ├ ─ server / / server │ ├ ─ middleware / / server using middleware │ ├ ─ request / / request method encapsulation │ ├ ─ routes/forward/interface │ ├ ─ store / / vuex │ ├ ─ utils/method/tools │ │ nuxt. Config. Js / / nuxt js application configurationCopy the code

Partial effect screenshots

  • Home page

  • details

  • search

  • The boiling point

  • topic

Project start

# Clone project
git clone https://github.com/ChanWahFung/nuxt-juejin-project.git

Enter the project directory
cd nuxt-juejin-project

# Install dependencies
npm install

# Service start
npm run dev
Copy the code

Go to http://localhost:8000

Domestic Github cloning will be slow, you can choose to clone from the code cloud

git clone https://gitee.com/ChanWahFung/nuxt-juejin-project.git
Copy the code

Write in the last

The project started in early March, and I was basically reading the documents and writing small examples to get familiar with the API (after a pause). Originally I just wanted to have a general understanding of NuxT.js, but I didn’t expect to do a project. Then one day, suddenly remembered a word: learn not to is white. At this time, the company’s project was not very tight, so at the end of March, the company began to use Nuxt to imitate the gold. In fact, the process of learning NUXT.JS is not only to learn this framework, but also to find shortcomings in other aspects. Sometimes, I will supplement the knowledge in this aspect in half. So when you learn something new, learn more and actually do something, rather than just scratch the surface. I hope you will have a thirst for knowledge when you study

Note stamp here, if you think the project is ok, welcome to star~✨, project address: github.com/ChanWahFung…