오늘의 톱기사 백엔드 관리 시스템 모방(一)

(1) 오늘의 톱기사 백그라운드 관리 프로젝트
01 - 프로젝트 - 간단한 소개
(오늘의 톱기사를 이해한다)의 백엔드 관리 시스템, 개인의 백엔드 관리 시스템, 기사 발표가 불편하기 때문에 이 PC의 시스템이 필요하다.

로그인

시작 페이지

게시물

소재 관리

컨텐츠 관리

팬 관리

리뷰 관리

개인 설정

02 - 프로젝트 - 준비 작업

vue 베이스

vue 플러그인 vue-router

데이터 axios

필요

백그라운드 커넥터 필요

UI 프레임워크element-ui를 사용하여 배고프세요 전단 팀 UI 구성 요소 라이브러리

vue 기반 프레임워크

PC 측의 백그라운드 관리 시스템 인터페이스를 신속하게 구축

vue-cli 2 버전

3.0 버전 사용

03-프로젝트 - 초기화
는 3.0 버전의 초기화 항목입니다.
설치:

#            npm un vue-cli -g
npm install -g @vue/cli

초기화:

vue create hm-toutiao-77

단계:

사용자 정의 창설 항목

babel은 ES6 구문 변환 플러그인입니다.
linter 제약 코드 스타일 플러그인eslint
css 프로세서

less라는 프로세서를 선택하십시오

표준적인 문법 스타일 선택

코드 검사 코드 스타일 저장 및 코드 검사 제출 및 복구 시도

플러그인의 구성 정보를 개별 구성 파일에 기록

뜻: 아까의 조작 기록을 저장하는지 여부는 나중에 새 프로젝트를 만들 때 직접 만듭니다.

생성 후:
프로젝트 디렉토리로 전환하여 시작 프로젝트 실행

npm run serve

액세스:http://localhost:8080... 하면 된다
04 - 프로젝트 - 구조 설명
외부 디렉토리 이해:
주요 src 디렉토리:

├─api  #  axios
├─assets
│  ├─fonts
│  └─images
├─components #      
├─directive #  
├─filter #   
├─router #  
├─store #    
├─style #less
└─views #      
└─App.vue    
└─main.js     

05- 프로젝트 - 지점 관리

마스터 상위 브랜치

기타 지점 개발 기능

분기 작용:

1인분 기능 모듈을 각각 개발

여러 사람이 서로 다른 지점을 가지고 동시에 개발하고 협동하여 개발한다.

https://gitee.com/stolenbytime/jay01
프로젝트의 코드 위탁 관리github:

원격 창고 창설 보증은 빈 창고

로컬 창고 코드 제출:

#           
git remote add origin [email protected]:zhousg/hm-toutiao-77.git
#    origin  
git push -u origin master

06- 프로젝트 - 요소 ui 사용
설치:

# -S    --save    ：               
npm i element-ui -S

전체 도입:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

체크섬:

  <div id="app">
    App <el-button type="success">    el-button>
  div>

07 - 프로젝트 - vscode를 설정하는 eslint 플러그인
설치:
구성:

"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,

설정 버튼 - 오른쪽 위 구석 - - - 에 내용을 추가합니다.
08- 프로젝트 - vue-router 사용
설치:

# npm 5.0         -S --save
npm i vue-router 

router의 초기화 코드를 정의하려면:

//   router       main.js  
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const router = new VueRouter({
  //       
  routes: []
})

export default router

vue 루트 실례에서router 대상 마운트

// @           src       vue-cli          
//             index.js         .js .vue .json
import router from '@/router'

new Vue({
+  router,
  render: h => h(App)
}).$mount('#app')

09 - 프로젝트 - 라우팅 규칙 분석
라우팅 규칙 규약:
경로
기능
라우팅 수준
/login
로그인
1단계 라우팅
/
첫 페이지
1단계 라우팅
├─/welcome
시작 페이지
2단계 라우팅
├─/article
컨텐츠 관리
2단계 라우팅
├─/image
소재 관리
2단계 라우팅
├─/publish
기사 게시
2단계 라우팅
├─/comment
평론 관리
2단계 라우팅
├─/fans
팬 관리
2단계 라우팅
├─/setting
개인 설정
2단계 라우팅
10 - 로그인 모듈 - 라우팅 및 구성 요소 생성
새로운 기능을 시작합니다.

분기git branch login 만들기

분기 전환 git checkout login

coding(작은 기능 하나 완성할 때마다 코드 제출)

마스터 분기 전환 git checkout 마스터

결합 분기git merge login

어셈블리를 생성하려면 다음과 같이 하십시오.

<template>
  <div class='container'>Logindiv>
template>

<script>
export default {}
script>

<style scoped lang='less'>style>

라우트를 구성하려면 다음과 같이 하십시오.

//       
// name              $router.push('/login')     $router.push({name:'login'})
  routes: [
    { path: '/login', name: 'login', component: Login }
  ]

출구 정의:

  <div id="app">
    <router-view>router-view>
  div>

11 - 로그인 모듈 - 기본 레이아웃

<template>
  <div class='container'>
    <el-card class="my-card">
      <img src="../../assets/images/logo_index.png" alt="">
    el-card>
  div>
template>

<script>
export default {}
script>

<style scoped lang='less'>
.container{
  position: absolute;
  width: 100%;
  height: 100%;
  //       /       contain               cover            
  background: url(../../assets/images/login_bg.jpg) no-repeat center / cover
}
.my-card{
  width: 400px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-60%);
  img{
    display: block;
    width: 200px;
    margin: 0 auto;
  }
}
style>

참고: index.less 파일 쓰기 전역 스타일

import '@/style/index.less'

###12-style 태그의 scoped 역할

scoped작용역작용범위

스타일의 스타일은 현재 구성 요소에서만 적용됩니다

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

원리:

데이터-v-37dfd6fc 속성은 현재 구성 요소가 노출된 탭에 자동으로 추가됩니다

현재 구성 요소의 고유한 ID

검색:

.container -----> .container[data-v-37dfd6fc]

현재 어셈블리 레이블에 없는 스타일을 수정하는 경우

전역 스타일 수정

13 - 로그인 모듈 - 양식 그리기