DAY01-黑馬頭條PC

01-項(xiàng)目-簡單介紹

• 今日頭條，新聞客戶端。不僅是瀏覽新聞的功能，發(fā)布新聞。發(fā)布新聞用戶，PC管理系統(tǒng)。
• 登錄
• 歡迎頁面
• 內(nèi)容管理
• 素材管理
• 發(fā)布文章
• 評論管理
• 粉絲管理
• 個人設(shè)置

02-項(xiàng)目-準(zhǔn)備工作

• vue 基礎(chǔ)

• vue-router 路由

• vue-cli 腳手架

• axios 請求

• 后臺服務(wù)在外網(wǎng) api文檔

• element-ui

  • 用戶界面 組件庫但是有自己樣式風(fēng)格。
  • 餓了么UI 基于VUE最流行的UI組件庫
  • 學(xué)習(xí) 組件的使用套路
  • https://element.eleme.cn/#/zh-CN

03-項(xiàng)目-初始化

• 是項(xiàng)目的初始化 使用 vue-cli 3.0

vue create hm-toutiao-79

第一步：選擇自定義創(chuàng)建方式

第二步：需要的插件，babel轉(zhuǎn)換ES6 linter使用代碼風(fēng)格檢查工具 css預(yù)處理器

第三步：選中l(wèi)ess

第四步：選擇代碼風(fēng)格 standard 標(biāo)準(zhǔn)風(fēng)格

第五步：檢查代碼風(fēng)格的時機(jī) 保存的時候校驗(yàn) 提交的時候也校驗(yàn)

第六步：選擇剛才的插件的配置存儲位置，單獨(dú)生成文件來記錄

第七步：是否保存操作記錄 是： 剛才的操作取個名字 否 不記錄 n 回車即可。

開始裝包…

結(jié)束后：

# 切換目錄 cd hm-toutiao-79 # 運(yùn)行項(xiàng)目 npm run serve

• 配置文件了解：

• src目錄

├─api 接口 ├─assets 靜態(tài)文件 │ └─images ├─components 公用組件 ├─directive 指令 ├─filter 過濾器 ├─router 路由 ├─store 本地存儲 ├─utils 公用工具函數(shù)模塊 └─views 路由組件 └─App.vue 根組件 └─main.js 入口文件

參考即可，目錄細(xì)分功能，后期好維護(hù)。

05-項(xiàng)目-分支管理

• 通過vue-cli創(chuàng)建的項(xiàng)目，初始化了git，默認(rèn)已經(jīng)做過一次提交。
• 分支功能：
  • 多人協(xié)同開發(fā)，每個人擁有一個或者多個分支，合并到同一個分支。
  • 單人開發(fā)，使用不同的分支開發(fā)不同功能，方便管理功能代碼。
  • 在空文件夾添加.gitkeep,推送到遠(yuǎn)端倉庫
    • 假如 登錄功能
      • git branch login 創(chuàng)建分支
      • git checkout login 切換分支
      • 開發(fā) 多次提交
        • git add .
        • git commit -m ‘備注’
        • …
        • 完畢：
          • git push 遠(yuǎn)程倉庫地址 login （推送分支）
          • git checkout master （切換分支）
          • git merge login （合并分支）
• 期望：每一次提交記錄，github上查看，比對功能實(shí)現(xiàn)步驟修改了那些文件。

06-項(xiàng)目-使用element-ui

• 安裝

# --save 保存到生產(chǎn)依賴 -S # --save-dev 保存到開發(fā)依賴 -D # npm 5.0 版本以上省略 默認(rèn)安裝到生產(chǎn)依賴 npm i element-ui -S

• 使用

import Vue from 'vue'; +import ElementUI from 'element-ui'; +import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';+Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App) });

• 驗(yàn)證：

<div id="app">App <el-button type="success">成功按鈕</el-button> </div>

07-項(xiàng)目-配置vscode的eslint插件

• 配置之前：如果使用了格式化插件，在保存的時候不使用這個插件來格式化代碼。
• 在設(shè)置中加上如下配置即可：

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

08-項(xiàng)目-使用vue-router

• 封裝router模塊
  • 安裝 npm i vue-router
  • router文件夾導(dǎo)入 import VueRouter from ‘vue-router’
  • 注冊
    • import Vue from ‘vue’
    • Vue.use(VueRouter )
  • 實(shí)例化
    • const router = new VueRouter({routes:[]})
  • router文件夾導(dǎo)出
    • export default router
• 使用router模塊
  • 導(dǎo)入
  • vue使用中加 router選項(xiàng)即可

09-項(xiàng)目-路由規(guī)則分析

路徑功能路由級別

/login	登錄	一級路由
/	首頁	一級路由
└ /	歡迎頁面	二級路由
└ /article	內(nèi)容管理	二級路由
└ /image	素材管理	二級路由
└ /publish	發(fā)布文章	二級路由
└ /comment	評論管理	二級路由
└ /fans	粉絲管理	二級路由
└ /setting	個人設(shè)置	二級路由

10-登錄模塊-路由及組件創(chuàng)建

組件：views/login/index.vue

<template><div class='container'>Login</div> </template><script> export default {} </script><style scoped lang='less'></style>

路由：router/index.js

const router = new VueRouter({// 路由規(guī)則routes: [// name: 'login' 給當(dāng)前路由取名// 跳轉(zhuǎn)使用：$router.push('/login') 或者 $router.push({name:'login'}) + { path: '/login', name: 'login', component: Login }] })

定義渲染位置：App.vue

<div id="app"><!-- 一級路由的組件顯示位置 出口位置 --><router-view></router-view></div>

11-登錄模塊-基礎(chǔ)布局

• 全屏容器
  • 卡片組件
    • logo

<template><div class='container'><!-- 卡片 element-ui 組件 --><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{width: 100%;height: 100%;position: absolute;left: 0;top: 0;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%,-50%);img {display: block;width: 200px;margin: 0 auto;}} } </style>

12-style標(biāo)簽的scoped的作用

• style scoped lang=‘less’
• scoped 作用是：讓style下的樣式僅在當(dāng)組件下生效
• 當(dāng)組件
  • 在組件內(nèi)部出現(xiàn)過的標(biāo)簽 屬于當(dāng)前組件。
  • 俗話：在當(dāng)前組件暴露的標(biāo)簽
• 原理：
  • data-v-xxxx 的屬性 唯一標(biāo)識
  • 只會給當(dāng)前組件的標(biāo)簽加上
  • 編譯后的樣式 .container[data-v-xxxxx]

/* 其他組件的樣式 怎么去修改？ */ .el-card__body[data-v-xxxxx]{background: green; }

• 結(jié)論：定義一個全局樣式 styles/index.less

13-登錄模塊-繪制表單

分析：

<!-- el-form 表單容器 --> <!-- :model="form" form數(shù)據(jù) 表示整個表單內(nèi)所有元素的數(shù)據(jù)集合 --> <!-- label-width="80px" 統(tǒng)一設(shè)置 文章描述 寬度 --> <el-form ref="form" :model="form" label-width="80px"><!-- el-form-item 表單項(xiàng) label="活動名稱" 文字描述--> <el-form-item label="活動名稱"><!-- 表單元素 --> <el-input v-model="form.name"></el-input></el-form-item> </el-form>

最終代碼：

<!-- 卡片 element-ui 組件 --><el-card class="my-card"><img src="../../assets/images/logo_index.png" alt=""><el-form :model="loginForm"><el-form-item><el-input v-model="loginForm.mobile" placeholder="請輸入手機(jī)號"></el-input></el-form-item><el-form-item><el-input v-model="loginForm.code" placeholder="請輸入驗(yàn)證碼" style="width:236px;margin-right:10px"></el-input><el-button>發(fā)送驗(yàn)證碼</el-button></el-form-item><el-form-item><el-checkbox :value="true">我已閱讀并同意用戶協(xié)議和隱私條款</el-checkbox></el-form-item><el-form-item><el-button type="primary" style="width:100%">登 錄</el-button></el-form-item></el-form></el-card>

總結(jié)：使用element-ui組件的方式

• 根據(jù)需要找組件
• 看組件的示例，符合需求。
  • 找到：
    • 示例代碼
    • 分析代碼
    • 自己需求使用
  • 參考提供的事例demo
    • 找符合要求的例子
    • 分析它的源代碼
    • 遇見不認(rèn)識的屬性 函數(shù) 事件
    • 提供詳細(xì)的說明文檔 屬性說明 函數(shù)說明 事件說明
  • 沒找到：
    • 參考組件使用文檔
      • 屬性
      • 事件
      • 函數(shù)

總結(jié)

以上是生活随笔為你收集整理的项目初始化及文件配置-黑马头条PC的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。