vue项目搭建

初始化项目

1.安装 vue-cli3 (脚手架)
在 cmd 窗口(注意了 这里得先下载node跟npm哦)

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.创建项目

vue create my-project
# OR
vue ui

询问安装类型，按键盘上下键选择默认（default安装了balel、eslint其余要用什么，需要手动再安装）还是手动（Manually）,此处选择手动。
以下为选项，可以按自己需求来安装

可以按照如下选择

3. 在项目中安装 composition-api 体现vue3 新特性

npm install @vue/composition-api --save
# OR
yarn add @vue/composition-api

4. 在使用任何 @vue/composition-api 提供的能力前，必须先通过 Vue.use() 进行安装

import Vue from 'vue'
import App from './App.vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

导入element-ui框架

使用命令

vue add element

选择按需引入

完成后出现目录

然后把有需要的组件导入到use中，在需要的页面 导入该组件即可

gitee 部署

在码云创建了仓库之后，在控制台一顿操作

// 创建 .git
git init
// 上传到本地
git commit -m "first commit"
// 绑定码云库
git remote add origin 你的库地址
// 起飞
git push -u origin master

如果在vscode 的话，上传了一次之后，以后在git源代码管理处可以很便捷地上传

axios配置

npm install axios
npm install vue-axios

在src下创建一个 目录

写如下代码

import axios from 'axios'
const service = axios.create(
    {
        baseURL: 'http://127.0.0.1:3000',
        timeout:1000
    }
);
// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default service;

以后要用的时候，直接导入就可以了

解决跨域的问题

在根目录下创建 vue.config.js，输入如下代码

module.exports = {
    devServer: {
        host:"localhost",
        port:8080,
        https:false,
        open:true,
        proxy:{
            '/api': {
                target:'http://127.0.0.1:3000', // 你请求的第三方接口
                changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite:{  // 路径重写，
                  '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
                }
            }
        }
        
    }
  }

这样在 node 那边也把跨域的问题解决，在测试的时候就能解决跨域问题了