从零搭建vue框架

框架搭建

vue-cli创建项目

命令：vue create newnft

根据需要回车选择

打包路径配置

1.router.js配置

const router = new VueRouter({
  mode: 'history',
  base: 'mobile',//路径配置
  routes
})

2.vue.config.js配置

publicPath: "/mobile/",// 与router.js一致

服务器环境区分

1.建立.env系列文件

根据项目需求，在根目录新建3个文件，.env.dev，.env.pre .env.master

.env.dev 测试环境
.env.pre 预生产环境
.env.master 生产环境

2.属性名必须以VUE_APP开头

.env.dev
VUE_APP_BASE = 't100-'
.env.pre
VUE_APP_BASE = 'p100-'
.env.master
VUE_APP_BASE = ''

3.更改package.json

"scripts": {
    "serve": "vue-cli-service serve --mode master",
    "serve1": "vue-cli-service serve --mode dev",
    "serve2": "vue-cli-service serve --mode pre",
    "build": "vue-cli-service build --mode master",
    "build1": "vue-cli-service build --mode dev",
    "build2": "vue-cli-service build --mode pre",
    "lint": "vue-cli-service lint"
  },

4.使用

通过process.env.VUE_APP_BASE进行取值

接口管理

下载axios

npm install axios

新建文件夹api

1.域名配置

新建文件address.js

let address = process.env.VUE_APP_BASE==='t100-'? 'http://39.107.0.13/cmos-facade-server':'https://vipapi.app.cctv.com/cmos-facade-server'
let address2 = `https://${process.env.VUE_APP_BASE}vip.zhibo.tv`
let address3 = `https://${process.env.VUE_APP_BASE}static.zhibo.tv`
let address4 = `http://${process.env.VUE_APP_BASE}vip.zhibo.tv`
const ADDRESS = {
  address,
  address2,
  address3,
  address4
}
export{
  ADDRESS
}

2.axios二次封装

新建文件http.js

// 版本1-设置请求头
import axios from 'axios'
import store  from "../store/index";
axios.defaults.withCredentials = false
// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 会员接口
    if (config.url.includes('/api/')) {
      config.headers.verifycode = store.state.verifycode
      config.headers.deviceNo = store.state.deviceNo
    }
    return config
  },
  (error) => {
    return Promise.error(error)
  })
//ajax的get数据请求
export const get = (url, params) => {
    return axios.get(url, {
        params
    })
}
//ajax的post数据请求
export const post = (url, params) => {
    return axios.post(url, params)
}

// 版本2--无需设置请求头
import axios from 'axios'
axios.defaults.withCredentials = false
//ajax的get数据请求
export const get = (url, params) => {
    return axios.get(url, {
        params
    })
}
//ajax的post数据请求
export const post = (url, params) => {
    return axios.post(url, params)
}

3.API接口暴露

新建api.js

import {
  get,
  post
} from "./http"
import {
  ADDRESS
} from './address'
import axios from 'axios'
export default {
  // 获取token
  getToken(params) {
    axios.defaults.withCredentials = false
    let url = ADDRESS.address + '/openapi/token/generate'
    return post(url, params)
  }
}

4.main.js配置

挂在$api

Vue.prototype.$api = api

公共常量配置

1.新建文件夹config内新建common.js

// 获取url信息
function getcommit(name) {
  return (
    decodeURIComponent(
      (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
        location.href
      ) || ["", ""])[1].replace(/\+/g, "%20")
    ) || false
  );
}
// 获取app版本信息
let statistics
if (getcommit('statistics')) {
  sessionStorage.setItem('statistics', getcommit('statistics'))
}
statistics = sessionStorage.getItem('statistics')

//判断访问终端
var browser = {
  versions: function () {
    var u = navigator.userAgent;
    return {
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
      android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
      iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
      weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
      qq: u.match(/\sQQ/i) == " qq" //是否QQ
    };
  }(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
let isIOS = browser.versions.ios
let source = isIOS?'2':'1'
//  保存，用于导出
const COMMON = {
  statistics,
  isIOS,
  source
}
export {
  COMMON
}

2.main.js配置

Vue.prototype.$COMMON = COMMON

3.使用

let isIOS = this.$COMMON.isIOS

通用样式

1.style文件夹下新建index.css，存放全局样式

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: subpixel-antialiased;
}

body,
html {
    font-family: PingFangSC-Regular, PingFang SC, "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", "MicrosoftYaHei-Bold";

    &::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }
}

body {
    // padding-bottom: constant(safe-area-inset-bottom);
    // /* 兼容 iOS < 11.2 */
    // padding-bottom: env(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
}

li {
    list-style: none;
    overflow: hidden;
}

a {
    text-decoration: none;
}

img {
    border: 0 none;
    vertical-align: middle;
    transition: all ease-out .2s;

    &:hover {
        // transform: scale(1.04);
    }
}

.zhanwei {
    height: 0.88rem;
}

input,
textarea {
    outline: none;
    border: 0 none;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

i,
em {
    font-style: normal;
}

.tc {
    text-align: center;
}

.cur {
    cursor: pointer;
}

// 特殊字体
@font-face {
    font-family: BebasNeue;
    src: url('https://images.zhibo.tv/fonts/BebasNeue.eot');
    src: url('https://images.zhibo.tv/fonts/BebasNeue.eot') format('embedded-opentype'),
        url('https://images.zhibo.tv/fonts/BebasNeue.woff2') format('woff2'),
        url('https://images.zhibo.tv/fonts/BebasNeue.woff') format('woff'),
        url('https://images.zhibo.tv/fonts/BebasNeue.ttf') format('truetype'),
        url('https://images.zhibo.tv/fonts/BebasNeue.svg#BebasNeue') format('svg');
}

2.main.js配置

import '@/style/index.less'

rem布局配置

1.在public.html内增加代码

<script>
  (function (doc, win) {
    var docEl = doc.documentElement;
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  }(document, window));
</script>

vant下载及配置

// 下载
npm install vant

// main.js
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

// 使用页面xxx.vue
import { Toast } from 'vant'

公共组件

1.全局加载中

1)conponetnts内新建Loading.vue

2.全局toast提示

全局组件配置

1)components文件夹内新建index.js

// 全局配置公共组件
import publicDialog from "./publicDialog.vue";
import publicBuy from "./publicbuy.vue";
import publicPay from "./publicpay.vue";
import publicSuccess from "./publicsuccess.vue";
import publicHeader from "./publicHeader.vue";
import publicLoading from "./publicLoading.vue";
export default {
  install (Vue) {
    Vue.component('publicdialog', publicDialog)// 公共弹窗组件
    Vue.component('publicbuy', publicBuy) //公共购买/兑换确认组件
    Vue.component('publicpay', publicPay) //公共支付组件
    Vue.component('publicsuccess', publicSuccess) //公共支付成功组件
    Vue.component('publicheader', publicHeader) //公共头组件
    Vue.component('publicloading', publicLoading) //公共头组件
  }
}

2) main.js引入

import Public from '@/components'
Vue.use(Public)

3）使用

页面无需import,直接使用

 <publicheader :title="title" color="dark" v-if="!whiteLoadingIsShow"></publicheader>