黑马头条项目总结

1. 做了什么：登录模块、频道模块、搜索模块、文章模块、评论模块、个人信息模块

2.具体使用的技术栈和操作步骤和问题解决：

（1）vue技术

创建vue项目

vue create toutiao-m

进行一些基本的配置，选择Manually select features

Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter 

n

Less

ESLint + Standard config

Lint on save、Lint and fix on commit

In dedicated config files

N

然后进入项目运行项目（yarn serve）

（2）vue-cli 利用脚手架创建项目

npm install --global @vue/cli

（3）vue-Router 配置路由

app.vue中写<router-view />、router.js中写

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

 layout页面采用路由懒加载

{
  path: '/',
  component: () => import('@/views/layout')
}

（4）iconfont（iconfont-阿里巴巴矢量图标库 ）

创建一个新项目，点击添加‘上传图标到项目’

点击去除颜色并提交，生成在线链接，引入到项目中

（5）less   创建style文件夹，将图标的less文件写入到该文件中

（6）vant组件库

下载、这里用全局导入方式

button、cell、icon、image、popup、toast、field、grid、navbar、pullRefresh

（7）rem适配 postcss-pxtorem （将单位转化为rem）、lib-flexible 设置rem的基准值

）postcss-pxtorem 插件的配置

module.exports &