关于vue-cli的安装到使用移动端自适应和axios的异步通信

一、关于vue的安装

首先vue的安装是在vue的官网可以查询，这里不去叙述直接给出相关的npm:

#安装vue

npm install vue

#安装vue-cli

npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

vue init webpack my-project

#这里可能需要一些新的配置去完成你的设置

    This will install Vue 2.x version of the template.

    For Vue 1.x use: vue init webpack#1.0 my-project

    ? Project name my-project
    ? Project description A Vue.js project
    ? Author runoob <test@runoob.com>
    ? Vue build standalone
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Setup unit tests with Karma + Mocha? Yes
    ? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

以上一些安装步骤取自菜鸟教程：原文出处.侵删.

二、在完成vue-cli的项目安装后一些步骤

在完成vue-cli的安装后，也就是完成项目的初始化后，我们接下里要进行的是对我们初始化后的项目进行一些可能在项目中使用到的插件的安装（这个仅仅是个人建议在项目可能根据开发进度进行安装，并没有太多的影响）。在安装的时候，包括sass/less 的安装。主要包括移动端的px转换rem自适应、axios的相关异步通信、以及高德地图插件vue-amap.嘤嘤嘤 (:з」∠)
（这里的UI框架我使用的是有赞的vant ,也可以根据项目的需求进项调整，不影响其他的相关操作 =-=）

安装vant

全局安装

1. 使用npm

npm i vant -S

2. 使用yarn

yarn add vant

引入插件（推荐）
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

//安装 babel-plugin-import 插件
npm i babel-plugin-import -D

// .babelrc 中配置
// 注意：webpack 1 无需设置 libraryDirectory
{
“plugins”: [
[“import”, {
“libraryName”: “vant”,
“libraryDirectory”: “es”,
“style”: true
}]
]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
[‘import’, {
libraryName: ‘vant’,
libraryDirectory: ‘es’,
style: true
}, ‘vant’]
]
};

接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式

import { Button, Cell } from ‘vant’;

这个只是其中一种方式，当然还有另外一种方式没有描述，可以通过官网查询 嘤嘤嘤 (:з」∠)
以上一些安装步骤取自vant官网：原文出处.侵删.

安装px转rem插件

1. 安装postcss-pxtorem
   postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

npm install postcss-pxtorem --save-dev

修改基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

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

2. 安装lib-flexible
   安装

   npm install px2rem-loader lib-flexible --save

   在项目入口文件main.js中引入lib-flexible

   import ‘lib-flexible/flexible.js’

到这里我们的页面就可以在移动端自适应啦 嘤嘤嘤 (:з」∠)

安装axios的异步通信

说明下axios的安装有多种方式，这里的方式仅仅是我个人的喜好安装。作为一个初学者的个人学习经验。还望大神轻喷

1. 安装axios

   npm install axios --save

2. 安装qs (它的作用是能把json格式的直接转成data所需的格式,可以忽略）

   npm install qs.js --save

3. 在main,js 中引用相关的插件

        Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
        Vue.prototype.qs = qs           //全局注册，使用方法为:this.qs
   

4. 请求数据

          this.$axios({
                method:'post',
                url:'api',
                data:this.qs.stringify({    //这里是发送给后台的数据
                      userId:this.userId,
                      token:this.token,
                })
            }).then((response) =>{          //这里使用了ES6的语法
                console.log(response)       //请求成功返回的数据
            }).catch((error) =>
                console.log(error)       //请求失败返回的数据
            )
   

   关于api的问题 我是这样做的 在static文件夹下新建文件api, api文件夹下新建index.js

        const APP_base_URL = 'https://xxx.xxxxxx.com/xxx'; // 线上地址
        const APP_URL = {
     //用户端接口
         getUserinfo: APP_base_URL + '/xxxxx/xxxxxxxxx', 
        }
        export default APP_URL
   

   使用的时候

   import api from ‘…/…/src/api/index’

高德地图

暂无 ?

三、总结

以上相关的操作就我自己的总结啦 、、、不够详细还待完善。原文出处均已标记。谢谢