오늘의 톱기사 백엔드 관리 시스템 모방(一)
01 - 프로젝트 - 간단한 소개
(오늘의 톱기사를 이해한다)의 백엔드 관리 시스템, 개인의 백엔드 관리 시스템, 기사 발표가 불편하기 때문에 이 PC의 시스템이 필요하다.
03-프로젝트 - 초기화
는 3.0 버전의 초기화 항목입니다.
설치:
# npm un vue-cli -g
npm install -g @vue/cli
초기화:
vue create hm-toutiao-77
단계:
linter 제약 코드 스타일 플러그인eslint
css 프로세서
생성 후:
프로젝트 디렉토리로 전환하여 시작 프로젝트 실행
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- 프로젝트 - 지점 관리
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 - 로그인 모듈 - 라우팅 및 구성 요소 생성
새로운 기능을 시작합니다.
<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 역할
원리:
13 - 로그인 모듈 - 양식 그리기
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
h5 이동단 핸드폰 장절 이벤트텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.