移动端新闻头条类项目初始化

是小羊吖
153 阅读2分钟

vue cli初始化配置

使用vue create创建生成脚手架， 为了保证环境和版本的匹配，在脚手架生成时手动选择配置Babel，Router,Vuex，CSS Pre-processors，Linter / Formatter。

使用git命令推送至远程仓库

  1. 在项目初始化完成后使用git init命令创建本地仓库，然后使用git add . 命令将文件添加入暂存区，使用git commit "提交日志"提交历史记录，完成将代码推送至本地仓库的流程
  2. 通过git remote add origin 你的远程仓库地址 添加远程仓库地址，最后再使用git push -u origin master 命令将初始化后代码推送master主分支，这里因为是新写的项目，所以第一次推送会往master主分支推送

调整初始目录结构

  1. 删除一些脚手架初始化的默认文件
  2. src/api文件夹存储接口封装
  3. src/utils文件夹存储一些工具模块
  4. src/styles文件夹存储全局样式

WechatIMG521.jpeg

配置自己的项目字体图标

  1. 把自己的svg字体图标文件上传 iconfont网站打包成代码并下载下来
  2. 在style目录下创建icon.less将对应图标样式代码复制
  3. 在全局css样式中引入icon，less文件，我们项目需要用的字体图标就可以饮用了

引入Vant组件库

  1. 因为整个项目的UI框架都是使用vant组件库来完成的，所以会采用全局引用的方式
   import Vant from 'vant'
   import 'vant/lib/index.css'
   Vue.use(Vant)

项目的REM适配工作

  1. 在这个项目中我使用了两个插件来完成适配工作，一款是postcss-pxtorem插件，用于将单位转化为rem，一款是lib-flexible插件，用于设置rem基准值
  2. 使用postcss-pxtorem插件，需要创建一个.postcssrc.js 文件 并且配置该文件
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    'postcss-pxtorem': {
      rootValue ({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}

封装网络请求模块

  1. 这里我使用的是axios技术 选择了使用两个目录封装网络请求
  2. 第一个目录是src/utils/request.js在request中先将基础路径配置完毕
/**
 * 封装 axios 请求模块
 */
import axios from "axios"

const request = axios.create({
  baseURL: "http://ttapi.research.itcast.cn/" // 基础路径
})

export default request

3.第二个目录是 src/api下的网络请求文件，根据不同的接口网络请求来划分不同的js文件

avatar
文章
阅读
粉丝