vue-cli项目搭建及安装常规依赖

Posted 2020-11-26 hs610

前言:默认前提条件是node环境已装好，直接进入创建项目环节。

以下代码仅为本人项目中常用，仅供参考！

 

1. 依赖安装

1. vue init webpack     //创建vue项目

2. cnpm i element-ui -S   // 根据需求安装

3. cnpm i vant -S    // 根据需求安装 

4. cnpm install less less-loader --save  // less

5. cnpm install --save nprogress   // 进度条插件

6. cnpm install axios -S  // axios

 

2. axios封装,src下新建http文件夹>>>ajax.js && api.js

ajax.js 进行封装ajax

import axios from ‘axios‘;
import Qs from ‘qs‘;
import { Message} from ‘element-ui‘;  // 根据项目引入提示插件
import Vue from ‘vue‘

const URL = "http://192.168.1.70:8888/dev";


let loading;
function startLoading() {
  loading = Vue.prototype.$loading({
    lock: true,
    text: "努力加载中...",
    target: document.querySelector(‘.content_main‘)//设置加载动画区域
  });
}
function endLoading() {
  loading.close();
}

//声明一个对象用于存储请求个数
let needLoadingRequestCount = 0;
function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        startLoading();
    }
    needLoadingRequestCount++;
};
function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0) return;
    needLoadingRequestCount--;
    if (needLoadingRequestCount === 0) {
      endLoading();
    }
};

const urlorigin = document.location.origin;
// 环境的切换
if (process.env.NODE_ENV == ‘development‘) {
    axios.defaults.baseURL = URL;
   } else if (process.env.NODE_ENV == ‘debug‘) {
    axios.defaults.baseURL = URL;
   } else if (process.env.NODE_ENV == ‘production‘) {
    axios.defaults.baseURL = urlorigin+‘/dev‘;
};

// 设置请求超时时间
axios.defaults.timeout = 60000;

// 设置post请求头
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=UTF-8‘;

// 请求拦截
axios.interceptors.request.use( config => {
    // 在发送请求之前做些什么 验证token之类的
    showFullScreenLoading();
     return config;
    }, error => {
    // 对请求错误做些什么
    tryHideFullScreenLoading();
    Message.error({ message: ‘请求超时!‘ })
     return Promise.error(error);
    })

// 响应拦截
axios.interceptors.response.use( response => {
    // 对响应数据做点什么
    tryHideFullScreenLoading();
    return response;
  }, error => {
    // 对响应错误做点什么
    tryHideFullScreenLoading();
    return Promise.reject(error);
  });


// 封装get方法和post方法

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get2(url, params){
    return new Promise((resolve, reject) =>{
    axios.get(url, {
     params: params
    }).then(res => {
     resolve(res.data);
     console.log(res.data)
    }).catch(err => {
     reject(err.data)
     console.log(err.data)
     Message({message: ‘加载失败‘, type: ‘error‘});
    })
   });}



  /**
 * post方法，参数序列化
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
   axios.post(url, Qs.stringify(params))
  .then(res => {
   resolve(res.data);
   console.log(res.data)
  })
  .catch(err => {
   reject(err.data)
   console.log(err.data)
   Message({message: ‘加载失败‘, type: ‘error‘});
  })
  });}

 

api.js  统一存放接口

import { get, post,} from ‘./ajax‘;

/**
 *
                            _ooOoo_
                           o8888888o
                           88" . "88
                           (| -_- |)
                           O  =  /O
                        ____/`---‘\\____
                      .‘  \\|     |//  `.
                     /  \\|||  :  |||//                      /  _||||| -:- |||||-                      |   | \\  -  /// |   |
                    | \\_|  ‘‘---/‘‘  |   |
                      .-\\__  `-`  ___/-. /
                  ___`. .‘  /--.--  `. . __
               ."" ‘<  `.___\\_<|>_/___.‘  >‘"".
              | | :  `- `.;` _ /`;.`/ - ` : | |
                 `-.   \\_ __ /__ _/   .-` /  /
         ======`-.____`-.___\\_____/___.-`____.-‘======
                            `=---=‘
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                     佛祖保佑       永无BUG
 */

/**
 * 统一管理api接口
 * @param {string} params
 */

// 登录/登出
const login = params => post(‘/user/login‘, params);


export default {
  login,

}

 

3. main.js 常规引入

import NProgress from ‘nprogress‘;
import ‘nprogress/nprogress.css‘;

import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;

import api from ‘@/http/api.js‘


Vue.prototype.$http = api;

　　Vue.use(ElementUI);

Vue.prototype.goBack = function() {
    router.go(-1);//返回上一层
}


//当路由开始跳转时
router.beforeEach((to, from , next) => {
    // 开启进度条
    NProgress.start();
    next();
});


  //当路由跳转结束后
router.afterEach(() => {
    // 关闭进度条
    NProgress.done()
})