vue项目之仿头条

初始化

yarn add vue-router@3.5.3

yarn add vuex@3.6.2

装router和store

Git

​git remote remove origin
git remote add origin https://gitee.com/nikki-u/headline.git
git push -u origin "master"

如果远程仓库被占用

git remote remove origin
git remote add XXX//路径
git push XXX//分支

iconfont

资源管理-我的项目-新建项目-头条

1 创建项目--2fontclass--3添加图片--4去掉颜色提交--5生成在线链接--

6复制css--7粘贴进 新建style/icon.css--8在main.js中引进--使用

vant导入所有组件（项目需求大导入所有组件，其他推荐导入部分）

1、yarn add vant@2.12.24

2、引入全局main.js

import Vant from 'vant';
import 'vant/lib/index.css';
​
Vue.use(Vant);

3、直接使用

axios

1、yarn add axios

2、utils/request.js

import axios from "axios";
const request=axios.create({
    baseURL:"http://toutiao.itheima.net/"
})
​
export default request

rem适配

1、

yarn add amfe-flexible

2、main.js

import 'amfe-flexible'

3、postcss-pxtorem将px转换为rem

yarn add postcss postcss-pxtorem@5.1.1 

4、.postcssrc.js

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      //rootValue: 37.5,
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },//用于两个设计稿，vant设计稿和产品设计稿
      propList: ['*']
    }
  }
}

登录注册

1、切换分支login

2、设置路由

const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/layout/home' },
        { path: '/login', component: () => import('@/views/login') },
        { path: '/search', component: () => import('@/views/search') },
        { path: '/profile', component: () => import('@/views/user-profile') },
        { path: '/article/:articleId', 
            component: () => import('@/views/article') ,props:true},
        {
            path: '/layout', component: () => import('@/views/layout'), children: [
                { path: 'home', component: () => import('@/views/home') },
                { path: 'my', component: () => import('@/views/my') },
                { path: 'video', component: () =>