vue安装项目 操作流程

动画引入 那个文件使用用那个：require('animate.css')

npm 安装插件报错卡停

去掉npm代理

npm config delete proxy
npm config delete https-proxy
去掉git 代理

git config --global --unset http.proxy
git config --global --unset https.proxy

第一步 npm install -g @vue/cli 全局安装 安装过后不需要再次安装了

第二步vue create myobj 安装环境

1

2 

3 

 4

 5

6

        7

8 

9 

第三步：安装插件等..

安装

3.1 UI使用   

发送 npm i element-ui -S

然后再main.js里面复制

import Vue from 'vue'; //创建项目的时候应该有 不用复制
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';  //创建项目的时候应该有 不用复制
Vue.use(ElementUI);

3.2动画使用

第一步：安装animate依赖

npm install animate.css --save

第二步：单独引入到需要使用的文件里面

require('animate.css')

第三步：哪里需要加哪里transtion标签

 <transition enter-active-class="animate__animated animate__zoomIn"

        leave-active-class="animate__animated animate__zoomOut">

  </transition>

3.3 vue axios使用（vue中的ajax）

1：引入axios

cnpm install --save axios

2.如果单个文件使用 引入

import axios from 'axios'

全局引入
import axios from "axios";

Vue.prototype.$axios = axios;

全局引入后 使用要用this.$axios({})
 

axios再次封装

封装

//现在scr里面 创建一个api再再api里面创建一个api.js
import axios from "axios";
axios.defaults.baseURL = "https://zzgoodqc.cn"; //全局配置ip地址 写个这别的就不要在写了
axios.defaults.timeout = 30000;// 请求超过30s报错
//添加响应拦截器
axios.interceptors.response.use(function (response) {
    //可以写if判断，提前拦截错误信息
    return response;
}, function (err) {
    return Promise.reject(err);
});

//post封装
export function apiPost(url, params){
    return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url:url,
                data:params
            }).then(res => {
                resolve(res.data);
            }).catch(err =>{reject(err.data)})
        });
    }
 
//get 封装
export function apiGet(url, params){ 
    return new Promise((resolve, reject) =>{ 
        axios.get(url, { 
            params: params,
            headers:{"token":sessionStorage.getItem('token')}
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data) 
        }) 
   });
}

再在main.js引入

//引入封装的api

import { apiPost, apiGet } from "./api/api";

Vue.prototype.$apiPost = apiPost;

Vue.prototype.$apiGet = apiGet;

使用方法

this.$apiGet（url）

this.$apiPost(url,params)

3.4vue的测试环境

测试环境

3.5如果是移动端  请加到 public index.html

<script type="text/javascript">

  (function () {

    var styleNode = document.createElement("style");

    var w = document.documentElement.clientWidth / 16; //获取视口大小

    styleNode.innerHTML = "html{font-size:" + w + "px!important}";

    document.head.appendChild(styleNode);

  })();

</script>