vue项目初始化

项目初始化

• 使用 Vue CLI 创建项目
  -Vant 组件库的导入方式
• 制作使用字体图标的方式
• 如何在 Vue 项目中处理 REM 适配
  -axios 请求模块的封装

1.1 使用 Vue CLI 创建项目

如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：

npm install --global @vue/cli

1. 在命令行中输入以下命令创建 Vue 项目：

vue create toutiao-m

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FXOipgOb-1610876235582)(./images/Day_001/001 - create.png)]

2. 选择安装预设

• default：默认勾选 babel、eslint，回车之后直接进入装包
• manually：自定义勾选特性配置，选择完毕之后，才会进入装包
• 选择第 2 种：手动选择特性，支持更多自定义选项

3. 安装项目中需要使用的库以及功能，分别选择以下几个模块

• Babel：es6 转 es5

• Router：路由

• Vuex：数据容器，存储共享数据

• CSS Pre-processors：CSS预处理器，后面会提示你选择 less、sass、stylus 等

• Linter / Formatter：代码格式校验

4. 配置路由模式

• 是否使用 history 路由模式，这里输入 n 不使用

5. 选择 CSS 预处理器

• 项目中选择 Less

6. 选择代码格式规范

• 选择 ESLint + Standard config

7. 选择在什么时机下触发代码格式校验

   • Lint on save：每当保存文件的时候
   • Lint and fix on commit：每当执行 git commit 提交的时候
   • 这里建议两个都选上，更严谨

8. 额外的配置文件的配置

• Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里
  • In dedicated config files：分别保存到单独的配置文件
  • In package.json：保存到 package.json 文件中
• 里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置

9. 是否保存配置预设

• 这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用
• 这里根据自己需要输入 y 或者 n，我这里输入 n 不需要

10. 向导配置结束，开始装包，安装包的时间可能较长，请耐心等待…

<img src="./images/Day_001/009 - 安装包.png" style="zoom:86%;" />

​

11. 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lz9B4j6N-1610876235601)(./images/Day_001/010 - 包安装完成.png)]

12. 进入你的项目目录，并启动项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LXnW1QQp-1610876235603)(./images/Day_001/011 - 启动并运行项目.png)]

13. 项目运行成功

- 启动成功，命令行中输出项目的 http 访问地址

- 打开浏览器，输入其中任何一个地址进行访问

  

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HhJ64Dt3-1610876235605)(./images/Day_001/012 - 运行项目.png)]

14. 如果能看到该页面，恭喜你，项目创建成功了

<img src="./images/Day_001//013 - 启动成功.png" style="zoom: 67%;" />

---

1.2 加入 Git 版本管理

1. 加入 git 版本管理的好处：

• 代码备份
• 多人协作
• 历史记录

2. 创建远程仓库

• GitHub
• 码云
• Coding

3. 使用码云或者 Github 自行创建一个线上仓库

4. 将本地仓库推到线上

   • 如果没有本地仓库

     // 创建本地仓库
     git init
     
     // 将文件添加到暂存区
     git add 文件
     
     // 提交历史记录
     git commit "提交日志"
     
     // 添加远端仓库地址
     git remote add origin 你的远程仓库地址
     
     // 推送提交
     git push -u origin master
     

   • 如果已有本地仓库（Vue CLI 已经帮我们初始化好了）

     // 添加远端仓库地址
     git remote add origin 你的远程仓库地址
     
     // 推送提交
     git push -u origin master
     

   • 如果之后项目代码有了变动需要提交：

     git add .
     
     git commit xxx
     
     git push
     

5. 其他分支命令

• 验证远程仓库是否添加成功

  

• git push 报错的提示含义

  

---

1.3 调整初始目录结构

1. 默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。这里主要就是下面的两个工作：

• 删除初始化的默认文件
• 新增调整我们需要的目录结构

2. 将 App.vue 修改为

<template>
  <div id="app">
    <h1>黑马头条</h1>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped lang="less"></style>

3. 将 router/index.js 修改为

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

Vue.use(VueRouter)

// 配置路由表
const routes = []

const router = new VueRouter({
  routes
})

export default router

4. 删除不需要的文件

• src/views/About.vue
• src/views/Home.vue
• src/components/HelloWorld.vue
• src/./images/Day_001/logo.png

5. 创建以下几个目录

• src/api 目录

  • 存储接口封装

• src/utils 目录

  • 存储一些工具模块

• src/styles 目录

  • index.less 文件，存储全局样式
  • 在 main.js 中加载全局样式

  // 导入全局的样式文件
  import './styles/index.less'
  

6. 调整之后的目录结构如下

├── README.md                     
├── babel.config.js               
├── package-lock.json             
├── package.json                  
├── public                        
│   ├── favicon.ico               
│   └── index.html                
└── src                           
    ├── api
    ├── App.vue                   
    ├── assets                    
    ├── components                
    ├── main.js                   
    ├── router
    ├── utils
    ├── styles
    ├── store                     
    └── views

1.4 导入图标素材

设计师为我们单独提供了设计稿中的图标，配置到项目中使用有两种方式：

• 一种方式是将 SVG 图标 包装为 Vue 组件来使用。
• 一种方式是将 SVG 制作为字体图标来使用

为了方便使用，我们在这里把它制作为字体图标。

制作字体图标的工具有很多，在这里我们推荐大家使用：https://www.iconfont.cn/

1. 注册账户

• 直接选择第三方登录即可

2. 创建项目

3. 上传图标到项目

4. 生成链接

5. 在 styles 目录下新建 icon.less 文件

• 生成在线地址后，在浏览器中打开，并复制代码
• 在 icon.less 文件中进行粘贴

6. 在 index.less 文件中导入 icon.less 文件

• 导入文件后后面加 ;

// 导入字体图标文件
@import './icon.less';

7. 在 App.vue 文件中测试

• 其中 toutiao 是基准类名

<div>
  <i class="toutiao toutiao-pinglun"></i>
</div>

---

1.5 引入 Vant 组件库

ant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰富的移动端功能组件，简单易用

1.5.1 Vant 组件库介绍

• 官方文档
• 优点与特性

1.5.2 使用 Vant的四个方式

1. 自动按需引入组件

• 和方式二一样，都是按需引入，但是加载更方便一些（需要额外配置插件）
• 优点：打包体积小
• 缺点：每个组件在使用之前都需要手动加载注册

2. 手动按需引入组件

• 在不使用插件的情况下，可以手动引入需要的组件
• 优点：打包体积小
• 缺点：每个组件在使用之前都需要手动加载注册

3. 导入所有组件

• Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
• 优点：导入一次，使用所有
• 缺点：打包体积大

4. 通过 CDN 引入
   • 使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量vant访问到所有组件。
   • 优点：适合一些演示、示例项目，一个 html 文件就可以跑起来
   • 缺点：不适合在模块化系统中使用

1.5.3 项目中使用

前期开发的便利性我们选择方式三：导入所有组件，在最后做打包优化的时候根据需求配置按需加载以降低打包体积大小

1. 安装 Vant

cnpm i vant -S

2. 在 main.js 中加载注册 Vant 组件

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

3. 查阅文档使用组件

Vant 的文档非常清晰，左侧是组件目录导航，中间是效果代码，右边是效果预览。

4. 在 App.vue 中使用 Vant 中的组件

   <!-- 按钮组件的使用 -->
   <van-button type="default">默认按钮</van-button>
   <van-button type="primary">主要按钮</van-button>
   <van-button type="info">信息按钮</van-button>
   <van-button type="warning">警告按钮</van-button>
   <van-button type="danger">危险按钮</van-button>
   
   <!-- 单元格组件 -->
   <van-cell-group>
     <van-cell title="单元格" value="内容" />
     <van-cell title="单元格" value="内容" label="描述信息" />
   </van-cell-group>
   

5. 如果在页面中能够正常的看到下面的效果，则说明 Vant 导入成功了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ENokBt8l-1610876235607)(./images/Day_001/018 - 组件的使用.png)]

---

1.6 移动端 REM 适配

1.6.1 移动端 REM 适配介绍

1. Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

• [lib-flexible 用于设置 rem 基准值，设置根字体的大小
• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

1.6.2 使用 lib-flexible 动态设置 REM 基准值

html 标签的字体大小

1. 安装

   // yarn add amfe-flexible
   
   cnpm i amfe-flexible -S
   

2. 然后在 main.js 中加载执行该模块

import 'amfe-flexible'

3. 最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化

• 例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px

  

• 例如在 iPhone 6/7/8 Plus 设备下，html 标签字体大小为 41.4 px

  

1.6.3 使用 postcss-pxtorem 将 px 转为 rem

1. 安装

// yarn add -D postcss-pxtorem
// -D 是 --save-dev 的简写

cnpm install postcss-pxtorem -D

2. 然后在项目根目录中创建 .postcssrc.js 文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

3. 配置完毕，重新启动服务

npm run serve

4. 最后测试：刷新浏览器页面，审查元素的样式查看是否已将 px 转换为 rem

• 转换之前的样式

 <img src="./images/Day_001/021 - 配置之前的尺寸.png" style="zoom:60%;" />

• 转换之后的样式

  

5. 注意事项：

• 该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

1.7 关于 .postcssrc.js 配置文件

1.7.1 .postcssrc.js 的配置

1. .postcssrc.js 是 PostCSS 的配置文件，具体配置如下

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

1.7.2 PostCSS 介绍

1. PostCSS 介绍

• PostCSS 是一个处理 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如
  • Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀
  • PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容
  • postcss-pxtorem 可以实现将 px 转换为 rem
• 目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件

2. PostCSS 一般不单独使用，而是与已有的构建工具进行集成

• 文档介绍

• Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件

• Vue CLI 内部使用了 PostCSS，你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader

• 我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段

1.7.3 Autoprefixer 插件的配置

1. autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息

2. 但是写在这里的话会引起编译器警告

• 警告意思就是说你应该将 browsers 选项写到 package.json 或 .browserlistrc 文件中
• 在 Vue-cli 中已经默认开启了 autoprefixer，所以把这两行代码注释
• 注释后重启服务就可以解决掉警告信息

1.7.4 postcss-pxtorem 插件的配置

1. postcss-pxtorem 插件的配置

• rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换
• propList 用来设定可以从 px 转为 rem 的属性
  • 例如 * 就是所有属性都要转换，width 就是仅转换 width 属性

2. rootValue 应该如何设置呢

如果你使用的是基于 lib-flexable 的 REM 适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是 750 宽，则应该设置为 75。

大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。

但是 Vant 建议设置为 37.5，为什么呢？

因为 Vant 是基于 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。

所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。

这样做其实也没有问题，但是有没有更好的办法呢？我就想实现测量多少写多少（不用换算）。于是聪明的你就想，可以不可以这样来做？

• 如果是 Vant 的样式，就把 rootValue 设置为 37.5 来转换
• 如果是我们的样式，就按照 75 的 rootValue 来转换

3. 通过查阅文档我们可以看到 rootValue 支持两种参数类型

• 数字：固定值
• 函数：动态计算返回
  • postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
  • 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
• 修改配置如下

/**
 * 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: ['*']
    }
  }
}

4. 其他

[Android]
>= 4.0

[iOS]
>= 8

• 具体语法请参考这里

5. 配置完毕，把服务重启一下，最后测试，very good

1.8 封装请求模块

和之前项目一样，这里我们还是使用 axios 作为我们项目中的请求库，为了方便使用，我们把它封装为一个请求模块，在需要的时候直接加载即可

1. 安装 axios

cnpm i axios -S

2. 创建 src/utils/request.js

/**
 * 封装 axios 请求模块
 */
import axios from "axios"

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

export default request

3. 如何使用

• 方式一（简单方便，但是不利于接口维护）：我们可以把请求对象挂载到 Vue.prototype 原型对象中，然后在组件中通过 this.xxx 直接访问
• 方式二（推荐）：我们把每一个请求都封装成每个独立的功能函数，在需要的时候加载调用，这种做法更便于接口的管理和维护

在我们的项目中更推荐建议使用方式二，（在随后的业务功能中我们就能学到）