标签：vue 格式化 Vant 项目 代码 文档 组件 import 头条

1.初始化项目

1.1 创建并梳理项目的结构

1.1.1.运行如下的命令，基于 vue-cli 创建 Vue2 的工程化项目：

vue create toutiao

1.1.2.进入终端之后进行如下操作:

 Manually select features 手动选择要安装的功能

 1.1.3.项目初始化完毕通过yarn serve启动项目,然后对项目进行删除整理

        需要删除以下文件:

        1. 清空 App.vue 组件中的代码 

// App.vue

<template>
  <div>
    <h1>App 根组件</h1>
  </div>
</template>

<script>
export default {
  // 一定要为创建的组件,通过name属性,起一个名字
  // 名字的首字母要大写
  name: 'App',
}
</script>
// 因为我们已经安装了less,所以我们想启用less就应该在<style>标签里即可调用
<style lang='less' scoped>
</style>

        2.删除 components 目录下的 HelloWorld.vue 组件

        3. 删除assets里面的图片

        4.删除 views 目录下的 About.vue 和 Home.vue 组件

        5.清空 /src/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

        6.执行 yarn serve 命令，把项目运行起来看效果

1.2 配置vant组件库

       官方网址: Vant 3 - Mobile UI Components built on Vue

 1.2.1.打开Vant组件库,在快速上手那里找到命令进行安装配置

        现在vant版本升级了,所以要注意版本,我们需要引入2.12.9版本

yarn add vant@^2.12.9 -S

1.2.2.然后继续往下翻,找到方式三. 导入所有组件,在main.js里面进行配置

import Vue from 'vue'

// 导入Vant 组件库
import Vant from 'vant'
// 导入Vant 组件库的样式
import 'vant/lib/index.css'

// 把Vant安装为 vue的插件
Vue.use(Vant)

 当然在全局注册之后,也就是把vant所有不管用没用到的组件全在本地引入了,这样降低了效率,再后期我们会进行优化

1.2.3.这个时候我们就完全配置好了,然后在Vant里面找到Button按钮,引入到App.vue里面,在界面进行尝试,成功之后,我们再需要vant里面的任何东西就直接复制过来用就行了

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

1.3Vant组件库的rem布局适配

参考文档: Vant 3 - Mobile UI Components built on Vue

知识点: rem的原理是什么?

在html的那个根节点设置一个字体大小(font-size值),在不同的设备上对字体大小进行缩放即可.

1.3.1.首先要配置postcss-pxtorem

postcss-pxtorem的意思是将px转成rem值

yarn add postcss-pxtorem@5.1.1 -D

1.3.2.在vue 项目根目录下，创建 postcss 的配置文件 postcss.config.js，并初始化如下的配置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // postcss-pxtorem这个插件要用这个配置
      rootValue: 37.5, // 根节点的 font-size 值
      propList: ['*']  // 要处理的属性列表，* 代表所有属性 (所有css只要是是px单位都给它换成rem,不论是width,height,padding还是margin...)
    }
  }
}

知识点:关于px -> rem 的换算:

iphone6

375px = 10rem
37.5px = 1rem
1px = 1/37.5rem
12px = 12/37.5rem = 0.32rem

1.3.3.配置amfe-flexible

amfe-flexible的意思就是监听屏幕的缩放,根据屏幕的缩放自动去修改font-size值

yarn add amfe-flexible -S

1.3.4.在 main.js 入口文件中导入 amfe-flexible：

// 配置 amfe-flexible
import 'amfe-flexible'

注意点:配置完成之后,一定要记得重启服务,还有就是如果重启之后发现还是适配不了,那么就要注意移动设备是否改成了Responsive

1.4 配置axios

1.4.1. 安装

yarn add axios -S

 1.4.2.创建/src/utils/request.js 模块：

import axios from 'axios'

const instance = axios.create({
  // 配置请求的根路径
  baseURL: 'http://toutiao-app.itheima.net'
})
 // 共享
export default instance

1.5格式化代码工具

1.5.1安装插件

1.5.2 添加 .prettierrc 的配置文件：(是在根目录下添加),然后进行配置

// 配置文件代码:
{
  // 代码后面的那个分号,加不加的问题,如果不想加就直接是false
  "semi": false,   
  // 格式化代码的时候把双引号替换成单引号
  "singleQuote": true,  
  // 就在在声明对象的时候,最后一个属性和值后面自动帮我们去掉逗号
  "trailingComma": "none" 
}

补充: prettierrc 是一个插件,是一个代码格式化的一个工具,在VSCode里面搜索即可,就可以实现代码格式化

1.5.3.格式化代码快捷键

• On Windows 　　Shift + Alt + F
• On Mac 　　Shift + Option + F
• On Ubuntu　　 Ctrl + Shift + I

1.5.4.如果发现格式化代码工具安装配置之后不起作用

可以鼠标右键->格式化文档的方式->选择 Prettier-Code formatter

1.5.5.需要重新安装 Prettier - Code formatter 的情况

在按下格式化代码快捷键的时候,如果出现了下面的弹框警告，则需要卸载，并重新安装 Prettier - Code formatter 插件：

 重新安装完毕之后，会有下面的弹框，选择 Allow Everywhere 按钮即可：

1.6  EsLint语法规范

1.6.1 常见的eslint报错信息

1. 每个文件的末尾，必须有一个空行，如果没有，会报 Newline required at end of file but not found eol-last

2. 在对象中，属性: 值 的冒号后面，有且只能有一个空格，如果没有，会报 Missing space before value for key 'xxx' key-spacing

3. JS 中的字符串，必须使用单引号表示，不能使用双引号，会报 Strings must use singlequote quotes

4. 如果在对象中，最后多了一个逗号，会报 Unexpected trailing comma comma-dangle

5. 在文件中，不允许出现连续多个空行，会报 More than 1 blank line not allowed no-multiple-empty-lines

6. 在每一行代码的末尾，不要有多余的空格，会报 Trailing spaces not allowed no-trailing-spaces

7. 代码缩进的时候，只允许使用两个空格，否则，会报 Expected indentation of 2 spaces but found 4 indent

8. 注释的 // 和具体注释内容之间，必须、也只能有一个空格，否则，会报 Expected space or tab after '//' in comment spaced-comment

9. 每个文件中，所有的 import 必须放到顶部统一进行导入，不要在普通代码区域穿插 import 导入，否则，会报 Import in body of module; reorder to top import/first

1.6.2.需要禁用或卸载的插件  (和eslint有冲突)

插件名是 JS-CSS-HTML Formatter，在每次摁下 Ctrl + S 的时候，把代码格式变得不标准了。

1.6.3.缩进几个空格的问题

文件 -> 首选项 -> 设置 页面中，搜索 tab，找到 Tab Size，把它的值改为 2

1.6.4. 解决格式化代码工具和eslint冲突

在prettierrc格式化代码工具和eslint起冲突的时候,我们可以尽情的让eslint报错,在下图中红色框中就是eslint的一条规范

只需要配置eslint规范就可以了,然后配置完重启服务,这时候eslint就会对这个规范禁用

在 .eslintrc.js 配置文件中，添加如下的规则：

rules: {
  // ESLint 对代码进行格式校验的时候,忽略这一条规则,这条校验规则不生效 (0 表示禁用这个规则)  在修改完这条配置之后一定要记得重新启动一下服务 yarn serve
  'space-before-function-paren': 0
}

 

标签：vue,格式化,Vant,项目,代码,文档,组件,import,头条
来源： https://blog.csdn.net/weixin_46413834/article/details/123127886

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。