使用vue-cli2创建项目的总结

最新推荐文章于 2024-06-23 20:39:24 发布

想吃辣椒炒肉呀

最新推荐文章于 2024-06-23 20:39:24 发布

阅读量232

点赞数 1

本文链接：https://blog.csdn.net/mengweizhao/article/details/118701877

版权

使用vue-cli2创建项目的总结

目前来说vue-cli的版本已经到4版本了，如果想要使用vue-cli2创建项目的话，需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：npm install -g @vue/cli-init
使用vue init webpack my_project创建项目
选择的配置
调整目录结构，并引入vuex 。下面是vuex模块的目录机构，自己根据需求调整
清楚一些默认样式，以及使用scss
- 使用scss的时候，注意node版本以及一些依赖包的版本。不然会报错。
- 我的项目中是 "node-sass": "^4.14.1", "sass-loader": "^7.3.1",

因为创建的是h5项目，所以会做字体适配，这里没有用插件，而是动态计算的，再main.js中新建一个自执行函数。

// designWidth:设计稿的实际宽度值，需要根据实际设置
// maxWidth:制作稿的最大宽度值，需要根据实际设置
// 这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
// 使用该方法后，设计稿如果是750，那么我们在设置px的时候，应该使用rem ,rem值为设计稿上的px/100/2，如果设计稿font-size是36px 那就设置 为0.18rem
(function (designWidth, maxWidth) {
  var doc = document
  var win = window
  var docEl = doc.documentElement
  var remStyle = document.createElement('style')
  var tid

  function refreshRem () {
    var width = docEl.getBoundingClientRect().width
    maxWidth = maxWidth || 540
    width > maxWidth && (width = maxWidth)
    var rem = (width * 100) / designWidth
    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'
  }

  if (docEl.firstElementChild) {
    docEl.firstElementChild.appendChild(remStyle)
  } else {
    var wrap = doc.createElement('div')
    wrap.appendChild(remStyle)
    doc.write(wrap.innerHTML)
    wrap = null
  }
  // 要等 viewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  refreshRem()

  win.addEventListener(
    'resize',
    function () {
      clearTimeout(tid) // 防止执行两次
      tid = setTimeout(refreshRem, 300)
    },
    false
  )

  win.addEventListener(
    'pageshow',
    function (e) {
      if (e.persisted) {
        // 浏览器后退的时候重新计算
        clearTimeout(tid)
        tid = setTimeout(refreshRem, 300)
      }
    },
    false
  )

  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = '16px'
  } else {
    doc.addEventListener(
      'DOMContentLoaded',
      function (e) {
        doc.body.style.fontSize = '16px'
      },
      false
    )
  }
})(375, 750)

vant的按需引入，见官网vant官网

使用图片预览插件

使用插件vue-picture-preview版本为1.2.0

main.js中引入

import vuePicturePreview from 'vue-picture-preview' 
Vue.use(vuePicturePreview)

入口vue文件中引入组件<lg-preview/>

	<template>
  <div id="app">
    <router-view/>
    <lg-preview/>
  </div>
</template>

在图片组件中使用属性v-preview就可以看到预览功能

<van-image
    width="100"
    height="100"
    v-preview="'https://img01.yzcdn.cn/vant/cat.jpeg'"
    src="https://img01.yzcdn.cn/vant/cat.jpeg"
  />

封装axios，这里因为没有实际接口，如果请求拦截以及响应拦截有点简单。后期可以根据自己需要进行相应拦截以及请求拦截。

// 封装axios
import Vue from 'vue'
import axios from 'axios' // 引入axios
import { Toast } from 'vant'
Vue.use(Toast)

// create an axios instance
const service = axios.create({
  // baseURL: process.env.BASE_API, // api 的 base_url,这个地方如果整个
  //项目只有一个请求地址的话，可以在这里设置baseURL，如果有多个请求地址的话，
  //这里不要设置，在请求里的url上设置
  timeout: 100000 // request timeout
})

// request interceptor
// 这里是请求拦截器，在这里可以进token的处理
service.interceptors.request.use(
  config => {
    // const token = localStorage.getItem('Loginkey') || ''
    // config.headers['Authorization'] = `bearer ${token}`
    config.headers['Authorization'] = 'Bearer ' + 'xxxxx'
    return config
  },
  error => {
    Promise.reject(error)
  }
)
// response interceptor
// 响应拦截器，对返回回来的数据进行统一处理，比如警告
service.interceptors.response.use(
  response => response.data,
  /**
     * 下面的注释为通过在response里，自定义code来标示请求状态
     * 当code返回如下情况则说明权限有问题，登出并返回到登录页
     * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
     * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
     */
  response => {
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          Toast({
            message: '未登录，请重新登陆',
            duration: 1000,
            forbidClick: true
          })
          break
        case 403:
          Toast({
            message: '登录过期，请重新登录',
            duration: 1000,
            forbidClick: true
          })
          break
        case 404:
          Toast({
            message: '网络请求不存在',
            duration: 1500,
            forbidClick: true
          })
          break
        default:
          Toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true
          })
      }
      return Promise.reject(error.response)
    }
  }
)

export default service

//封装get以及post请求
import { stringify } from 'qs'
import request from './request'

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */

export function get (url, params) {
  return new Promise((resolve, reject) => {
    request.get(url, {
      params: params
    }).then(res => {
      resolve(res) // 注意根据后端返回的数据，选择合适自己的返回
    }).catch(err => {
      reject(err)
    })
  })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */

export function post (url, params) {
  return new Promise((resolve, reject) => {
    request.post(url, stringify(params))
      .then(res => {
        resolve(res) // 注意根据后端返回的数据，选择合适自己的返回
      })
      .catch(err => {
        reject(err)
      })
  })
}

配置代理，设置正式以及测试的请求地址参考链接
因为通过cli2搭建的项目有build以及config文件夹。所以需要以下步骤

安装依赖cross-env

在package.json中增加下面命令打包命令

  "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
  "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"

修改config中的env.js prod.js test.js

// dev
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API:'"/phsales"' // 本地请求地址，配置代理使用
})
//prod
module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG: '"prod"',
  BASE_API:'"http://xxx:xxx:xxx:xxx/phsales/prod"' // 这是正式环境的请求地址
}
//text
module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  EVN_CONFIG: '"test"',
  BASE_API:'"http://xxx:xxx:xxx:xxx/phsales/test"' // 这是测试环境的请求地址
})

修改build文件夹下的build.js中的

const spinner = ora('building for production...')
// const spinner = ora('building for production...')
const spinner = ora('building for--' + process.env.NODE_ENV+'--of--'+process.env.env_config+'--mode...')

修改build/webpack.prod.conf.js

// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

修改config/index.js可能文件中代码很多，但是下面是必须配置的

// 配置代理
 proxyTable: { // 配置后台代理
 '/phsales': {
    target: `http://183.131.225.59:16688/phsales`,
    changeOrigin: true,
    pathRewrite: {
      ['^' + '/phsales']: ''
    }
  }
}, 
// 修改bulid命令
build: {
// 新增下面来两行
prodEnv:require('./prod.env'),
testEnv:require('./test.env'),
// 下面这个属性是打包时根目录，如果打包后是空白页，可以看下是不是如下配置
assetsPublicPath: './',  // 编译发布的根目录，可配置为资源服务器域名或CDN域名
}

区分多个baseURL
- 看上面封装axios的时候，有baseURL: process.env.BASE_API属性我给注释掉了，如果你的项目中请求的域名只有一个的话，那么可以直接在这里设置baseURL，这样在请求api的文件中直接写后面的接口地址就行。但是如果我们的项目中会请求到多个域名的情况下，这样写就不行了
- 我用的方法是在env.js prod.js test.js这三个文件夹下增加BASE_API2字段
- 然后我们不必在封装axios的时候设置baseURL: process.env.BASE_API属性了
- 我们在请求api里面加上我们需要的域名就好,如下：
```
import { get } from '@/units/requestType'
const BASE_API = process.env.BASE_API

export async function login (data) {
  const res = await get(`${BASE_API}/monitor/logininfor/list`, data)
  return res
}
```