项目构建与vant按需引入与适配

项目初始化

一、项目初始化
更新日期：2020-05-11 19:36:21

使用 Vue CLI 创建项目
如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：

npm install --global @vue/cli
在命令行中输入以下命令创建 Vue 项目：

vue create toutiao-m
Vue CLI v4.3.1
? Please pick a preset:
default (babel, eslint)

Manually select features
default：默认勾选 babel、eslint，回车之后直接进入装包

manually：自定义勾选特性配置，选择完毕之后，才会进入装包

选择第 2 种：手动选择特性，支持更多自定义选项

? Please pick a preset: Manually select features
? Check the features needed for your project:
() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
() Router
() Vuex
() CSS Pre-processors

(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
分别选择：

Babel：es6 转 es5
Router：路由
Vuex：数据容器，存储共享数据
CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
Linter / Formatter：代码格式校验
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
是否使用 history 路由模式，这种模式兼容不好，所以这里输入 n 不使用

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)

Less
Stylus
选择 CSS 预处理器，这里选择我们熟悉的 Less

? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config

ESLint + Standard config
ESLint + Prettier
选择校验工具，这里选择 ESLint + Standard config

? Pick additional lint features:
(*) Lint on save

(*) Lint and fix on commit
选择在什么时机下触发代码格式校验：

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

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

In dedicated config files
In package.json
Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

In dedicated config files：分别保存到单独的配置文件
In package.json：保存到 package.json 文件中
这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

? Save this as a preset for future projects? (y/N) N
这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。

这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。

✨ Creating project in C:\Users\LPZ\Desktop\topline-m.
� Initializing git repository…
⚙ Installing CLI plugins. This might take a while…

[ …] - extract:object-keys: sill extract json5@2.1.1
向导配置结束，开始装包。 安装包的时间可能较长，请耐心等待…

⚓ Running completion hooks…

� Generating README.md…

� Successfully created project topline-m-89.
� Get started with the following commands:

$ cd topline-m
$ npm run serve
安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入：

目录结构

├── node_modules              第三方包存储目录
├── public                    任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。
│   ├── favicon.ico           浏览器收藏夹图标
│   └── index.html            单页面 HTML 文件
├── src
│   ├── assets                公共资源目录，放图片等资源
│   ├── components            公共组件目录
│   ├── router                Vue Router 路由模块
│   ├── store                 Vue 容器模块
│   ├── views                 视图组件存储目录，所有的路由页面都存储到这里
│   ├── App.vue               根组件，最终被替换渲染到 index.html 页面中 #app 入口节点
│   └── main.js               整个项目的启动入口模块
├── .browserslistrc           指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
├── .editorconfig             EditorConfig 帮助开发人员定义和维护跨编辑器（或IDE）的统一的代码风格，详情参考这里：https://editorconfig.org/。
├── .eslintrc.js              ESLint 的配置文件
├── .gitignore                Git 的忽略配置文件，告诉Git项目中要忽略的文件或文件夹
├── README.md                 说明文档
├── babel.config.js           Babel 的配置文件
├── package-lock.json         记录安装时的包的版本号，以保证自己或其他人在 npm install 时大家的依赖能保证一致
└── package.json              包说明文件，记录了项目中使用到的第三方包依赖信息等内容  

添加的东西

创建以下内容：

src/api 目录，存储接口封装
src/utils 目录，存储一些工具模块
src/styles 目录，存储样式资源
index.less 文件，存储全局样式
在 main.js 中加载全局样式 import ‘./styles/index.less’

vant按需导入

按需引入下载插件和配置插件

• npm i babel-plugin-import -D
• 配置：``

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

vant.js插件的按需引入

• 在项目的根目录下，创建一个文件夹 pulgins/vant.js

import Vue from 'vue'
import { Button } from 'vant'

Vue.use(Button)

• 然后在入库文件中引入插件 main.js

// 引入vant UI框架
import './plugins/vant'

适配

vw布局

      1vw  == 视口的宽度 1% 100vw == 100%
      1vh  == 视口的高度 1%  100vh == 100%

      设计图为640px 750px 1080px 
      其中dpr为2  2   3
      
      假如设计为750px为例子：
        那么750 / 2 = 375px  ---也就是调试窗口看到逻辑像素--也就是视口完整为375px
        所以啊 375px = 100vw 
        推出 100px = 26.67vw （给html设置为26.67vw也就是100px,为何不直接，因为vw可变，px直接固定了）
        因此需要把750px设计图为标准，给html的文字大小设置为26,67vw（也就是100px），那么在375px的调试窗口下显示的88px（ps量取的）下为44px，在320px之中，显得小一些，在比375px大的显得大一些，这就是所谓的适配。

        那么640的设计图时候 
        640px / 2 = 320 px；
        100 vw = 320px;
        最后推出==》  100px = 31.25vw
        由于rem的值是 1rem = html文字大小的值（这边设置的100px = 31.25vw)
        那么也就是说，你在ps量取到的值假如为88px  drp为2
        88px / 2 = 44px
        44px / 100 = 0.44rem;

• 给html设置大小 之后根据ps量取的像素 在求出相对应的 rem

 html {
      font-size: 26.67vw;
    }

    header {
      height: 0.44rem;
      background: yellow;
    }

rem布局

一、安装适配

• 安装 npm i amfe-flexible
• 在main.js引入
  import 'amfe-flexible
• 然后在html之中显示这个即可！(这是苹果 6 7 8 ）
  style="font-size: 37.5px
• 在app.vue中引入

<style lang="scss">
  @import './style/common.scss';
</style>

二、使用 postcss-pxtorem 将 px 转为 rem

• 1、安装 npm install postcss-pxtorem -D
• 2、然后在项目根目录中创建 postcss.config.js 文件

复制代码

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      // 设计稿 375:37.5
      // 设计稿：750:75
      // Vant 是基于 375
      rootValue: 37.5,
      propList: ["*"]
    }
  }
}

• 3、配置完毕，重新启动服务
  最后测试：在浏览器中审查元素的样式查看是否已将 px 转换为 rem。
  注意： .只能转换单独的 .css|.less|.scss 之类的文件、.vue 文件中的 style 中的 px

最后引入重置样式表

#app这个对样式的重置，字体大小为16px，还有字体不加粗，字体颜色等！

移动端对meta标签的设置

• 在项目的 publick/index.html 或者 index.html文件下设置meta标签

  <meta charset="utf-8"> 声明文档使用的字符编码
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 优先使用 IE 最新版本和 Chrome
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui"> 为移动设备添加 viewport
  <meta name="screen-orientation" content="portrait">  uc强制竖屏
  <meta name="format-detection" content="telephone=no"> 避免吧数字识别为手机号码
  <meta name="full-screen" content="yes">   UC强制全屏
  <meta name="x5-fullscreen" content="true"> QQ强制全屏

更多详情 请参考： https://www.cnblogs.com/sysg/p/6541686.html
链接: link.

服务器代理 & 请求拦截

服务器代理 vue.config.js文件

• 转载：链接: link.

// 假设要请求的接口是：http://40.00.100.100:3002/api/user/add
module.exports = {
    devServer:{
      host:'localhost',  // 本地主机
        port:5000,  // 端口号的配置
        open:true,  // 自动打开浏览器
        proxy:{
          '/api': {   //  拦截以 /api 开头的接口
            target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,    //这里true表示实现跨域
            secure: false, // 如果是https接口，需要配置这个参数
            pathRewrite: {
              '^/api':'/'  //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/api/user/add'，直接写‘/api/user/add’即可
            }
          },
    // 假如又有一个接口是：http://40.00.100.100:3002/get/list/add
    // 那就再配置一个 get的，如下：
          '/get': {   //  拦截以 /get 开头的接口
            target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,    //这里true表示实现跨域
            secure: false, // 如果是https接口，需要配置这个参数
            pathRewrite: {
              '^/api':'/'  //这里理解成用‘/api’代替target里面的地址，
            }
          }
			// 调用的时候直接  /get/list/add  就可以了
        }
    }
  }

  // 注意：修改了配置文件后一定要重启才会生效;