DAY01-黑馬頭條PC

01-項目-簡單介紹

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

02-項目-準備工作

• vue 基礎

• vue-router 路由

• vue-cli 腳手架

• axios 請求

• 后臺服務在外網 api文檔

• element-ui

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

03-項目-初始化

• 是項目的初始化 使用 vue-cli 3.0

vue create hm-toutiao-79

第一步：選擇自定義創建方式

第二步：需要的插件，babel轉換ES6 linter使用代碼風格檢查工具 css預處理器

第三步：選中less

第四步：選擇代碼風格 standard 標準風格

第五步：檢查代碼風格的時機 保存的時候校驗 提交的時候也校驗

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

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

開始裝包…

結束后：

# 切換目錄 cd hm-toutiao-79 # 運行項目 npm run serve

• 配置文件了解：

• src目錄

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

參考即可，目錄細分功能，后期好維護。

05-項目-分支管理

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

06-項目-使用element-ui

• 安裝

# --save 保存到生產依賴 -S # --save-dev 保存到開發依賴 -D # npm 5.0 版本以上省略 默認安裝到生產依賴 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) });

• 驗證：

<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

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

09-項目-路由規則分析

路徑功能路由級別

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

10-登錄模塊-路由及組件創建

組件：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({// 路由規則routes: [// name: 'login' 給當前路由取名// 跳轉使用：$router.push('/login') 或者 $router.push({name:'login'}) + { path: '/login', name: 'login', component: Login }] })

定義渲染位置：App.vue

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

11-登錄模塊-基礎布局

• 全屏容器
  • 卡片組件
    • 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標簽的scoped的作用

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

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

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

13-登錄模塊-繪制表單

分析：

<!-- el-form 表單容器 --> <!-- :model="form" form數據 表示整個表單內所有元素的數據集合 --> <!-- label-width="80px" 統一設置 文章描述 寬度 --> <el-form ref="form" :model="form" label-width="80px"><!-- el-form-item 表單項 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="請輸入手機號"></el-input></el-form-item><el-form-item><el-input v-model="loginForm.code" placeholder="請輸入驗證碼" style="width:236px;margin-right:10px"></el-input><el-button>發送驗證碼</el-button></el-form-item><el-form-item><el-checkbox :value="true">我已閱讀并同意用戶協議和隱私條款</el-checkbox></el-form-item><el-form-item><el-button type="primary" style="width:100%">登 錄</el-button></el-form-item></el-form></el-card>

總結：使用element-ui組件的方式

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。