vue3.x.x搭建项目及简单前后端实现

vue3.0的安装以及简单前后端实现实例

• 先说一下需要的环境，node版本最好在9.0+到12.14.0我这目前是最新的了，官网下载地址：node,找自己需要的版本就行。

• npm版本，最好安装到最新的，安装教程可以参考下：npm。

• 在我这个项目中为了快速的搭建，使用的架构主要是vue3.0+elementui+nodejs的后台

• 安装好环境后开始搭建项目，检查vue_cli版本，3.0以前大概是2.9.6左右，升级之后主要我的4.1.1了，没升级的升级下版本npm install -g @vue/cli OR yarn global add @vue/cli，我的版本

• 下面开始安装，输入vue create xxx(自己项目名称)，弹出
  
  选择默认的第一个，自动安装好，当然自己配置也行，这儿推荐一个我看到的配置，可以照这个自己配置。

• 进入项目，项目安装好有提示，跟着命令走，

• 成功打开项目

• 安装element-ui,输入命令：npm i element-ui -S,重新下载安装输入命令:npm install or yarn install,安装成功后可以看到多了几个文件
  

• 引用element-ui，

• 下面主要是我自己搭建的项目及实现前后端链条的结构，

• 这块最开始我用了vue3.0升级后自带的服务器尝试了一下，是能够实现的,推荐地址，也可以自己去网上找

• 先说一下我都项目结构，
  -主要安装了axios、vuex、sass、less,这几个对着安装就好.安装好后npm install or yarn install,运行项目成功

• 几个模块的代码如下：分为组件、store、api

• 最后说一下做这些遇到的问题，安装环境的时候vue3.0及以上版本的node版本一定要升级，在更新node版本的时候，直接把原来的卸载了重新安装，不要用命令去升级，那样一直没成功，花费了我很多时间，直接卸载重新安装最新的，推荐个地址

• 第二如果项目有跨域情况就新建一个文件，这个在3.0以下是搭建脚手架的时候自动帮我们建好的，3.0以上的需要自己建一个文件。

• 文件内容如下：换成自己的代理地址

module.exports = {
    // 配置 axios 代理请求
    devServer: {
        proxy: {
            '/api': {
                target: 'http://192.168.1.7:8085',
                // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可
                    '^/api': '/'
                }
            }
        }
    },
};

• axios引入
• 这个是api的创建，在网上找的一个
• 我这里的api的公用的js，找的一个可以用，api里面的其他方法根据自己的需求调用这个公用的js对象就行，也可以自己找

import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout = 5000;                        //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
axios.defaults.baseURL = 'http://192.168.1.7:8085';   //配置接口地址

//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
    //在发送请求之前做某件事
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{
    console.log('错误的传参')
    return Promise.reject(error);
});

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
    //对响应数据做些事
    if(!res.data.success){
        return Promise.resolve(res);
    }
    return res;
}, (error) => {
    console.log('网络异常')
    return Promise.reject(error);
});

//返回一个Promise(发送post请求)
export function fetchPost(url, params) {
    console.log(url,'url')
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(response => {
                resolve(response);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}
返回一个Promise(发送get请求)
export function fetchGet(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
            .then(response => {
                resolve(response)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                reject(error)
            })
    })
}
export default {
    fetchPost,
    fetchGet,
}

• 好啦就这么多啦！最近自己在用vue3.0写项目，写的不是很好，大家看看有帮助就行！
  （只知道敲代码很少博客，请轻喷，小心脏受不住~感谢各位看官！！！）