简单黑马头条项目

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

运用vue创建简单黑马头条的项目

一、搭建环境

（一） 准备工具

• VsCode软件
• Node.js
• Vue.js
• Vant3
• Vue-Cil
• axios

（二）下载工具

• 下载VsCode
• 下载Node.js
  也可以使用nvm-window版本管理器
• 安装Vue.js
• 安装Vue-Cil

二、使用步骤

（一）创建项目

• 打开cmd窗口，使用命令进入创建项目的路径，输入如下代码

 vue create demo-toutiao 
1

• 进入vue-cil界面,这里选择第三个自定义项
  
• 按下空格来选择以下三项
  
• 选择vue2版本
  
• 选择less预处理器
  
• 选择Eslint+Standard config的代码风格，不同的标准写出的代码不同
• 选择Lint on Save，作用是能够在ctrl+s时检查语法错误
  
• 选择In dedicate config files,作用是有各自的配置文件
  

-输入n,不将刚才的配置存为预设

• 项目创建中
  
• 项目创建成功
  

（二）下载插件

• Vetur
• Prettier - Code formatter

 //prettier在setting.json的配置
  "prettier.configPath": "D:\\VsCode Workplace\\配置文件\\.prettierrc.js",
  "eslint.alwaysShowStatus": true,
  "prettier.trailingComma": "none",
  "prettier.semi": false, //每行文字个数超出此限制将会被迫换行
  "prettier.printWidth": 300, //使用单引号替换双引号
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid", //甚至在.vue文件中，HTML代码的格试化插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatterOptions": {
   
    "prettier": {
   
      "trailingComma": "none",
      "semi": false,
      "singleQuote": true,
      "arrowParens": "avoid",
      "printWidth": 300
    },
    "js-beautify-html": {
   
      "wrap attributes": false
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

-ESLint

 //ESLint插件在setting.json的配置
  "editor.codeActionsOnSave": {
   
    "source.fixAll": true
  },
1
2
3
4
5

（三）编写主页面

步骤

• 用VsCode打开demo-toutiao项目，项目结构如下
  
• 安装Vant组件库
  Vant快速上手
• 删除项目自带的HelloWorld.vue组件，然后在src目录下创建views目录，再在views目录下创建Home和User目录，分别在Home和User下创建home.vue组件和user.vue组件,项目的结构如下：
  

1. 在main.js中引入Vant

import Vue from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css' //引入全部的vant组件,一般不推荐
Vue.config.productionTip = false
Vue.use(Vant) //使用Vant
new Vue({
   
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10

2. 在 user.vue 组件中，声明如下的模板结构：

 <template>
   <div class="user-container">
     <!-- 用户基本信息面板 -->
     <div class="user-card">
       <!-- 用户头像、姓名 -->
       <van-cell>
         <!-- 使用 title 插槽来自定义标题 -->
         <template #icon>
           <img src="../../assets/logo.png" alt="" class="avatar" />
         </template>
         <template #title>
           <span class="username">用户名</span>
         </template>
         <template #label>
           <van-tag color="#fff" text-color="#007bff">申请认证</van-tag>
         </template>
       </van-cell>
       <!-- 动态、关注、粉丝 -->
       <div class="user-data">
         <div class="user-data-item">
           <span>0</span>
           <span>动态</span>
         </div>
         <div class="user-data-item">
           <span>0</span>
           <span>关注</span>
         </div>
         <div class="user-data-item">
           <span>0</span>
           <span>粉丝</span>
         </div>
       </div>
     </div>
 
     <!-- 操作面板 -->
     <van-cell-gr
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35