vue3初始化项目

创建好项目，认识了项目目录，要开始做项目的前提，还是初始化项目：

• 初始化项目——设置别名
• 初始化项目——设置全局样式内容
• 初始化项目——封装网络请求
  **

1、设置别名alias

**
@ is an alias to /src
新建一个 vue.config.js 文件：
在vue.config.js 文件中使用webpack 进行打包，设置别名，如下所示：

module.exports = {
     configureWebpack:{
         resolve:{
             alias:{
                 'assets':'@/assets',
                 'components': '@/components',
                 'network': '@/network',
                 'utils': '@/utils',
                 'views': '@/views',
             }
         }

     },
    publicPath:'./'

}

别名设置好之后，需要重启服务器，才能生效；
ctrl + c ：关闭服务器
npm run serve ：启动服务器
启用别名时 ：~ + 别名（~assets/）;

2、初始化全局样式

在github 里面搜索一下normalize.css,的全局公共样式，下载，复制到src/assets/css文件夹下：

设置好公共样式之后，如果觉得里面的样式不够用，也可以根据自己的项目重新写一些公共样式，新建base.css文件，在src/assets/css目录下；

引入公共的 css 样式；
@import "./normalize.css";  
:root{
    --color-text:#666;
    --color-high-text:#42bBaa;
    --color-background:#FFFFFF;
    --color-tint:#42b983;
    --font-size: 14px;
    --line-height:1.5;

}
/*所有的元素，所有元素前，所有元素后*/
*,
*::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    user-select: none; /*禁止用户选定文件或图片*/
    background: var(--color-background);
    color: var(--color-text);
}
a{
    text-decoration: none;
}

公共样式设置好之后，其他的页面想要使用这个公共样式，只需要
在 app.vue 中设置全局样式，其他页面可以直接使用设置好的样式：

@import "assets/css/base.css";

其他页面引用：
例如 home.vue 中的类 demo 设置样式：

.demo{
color:var(--color-text)
}

3、初始化网络请求

新建 src/network 目录；
新建公共请求 src/network/request.js;
3-1、使用网络请求需要用到 axios 插件：

npm install axios -s

下载好之后，依赖包会保存在node_modules 目录下；
3-2、在公共请求 request.js 中引入 axios：

import axios from "axios";

request.js

import axios from "axios";

export function request(config) {
    const instance = axios.create({
        baseURL: 'https://api.shop.eduwork.cn',
        timeout: 5000
    })
    //请求拦截
    instance.interceptors.request.use(config=>{
          //(1)如果有一个接口请求需要认证才可以访问，就在这里设置；

        //(2)如果一个接口请求不需要认证就可以访问，直接放行；
        return config;
    },err => {

    })
  
    //响应拦截
    instance.interceptors.response.use(res => {
        //响应正确的话，就直接返回了
        return res;
    },err => {
        //如果有需要授权才可以登陆的接口，统一去 login 授权；
        //响应有错误的话，在这里进行设置，返回错误的状态码；
    } )

    //最后需要返回这个实例
    return instance(config);
}

每一个页面都有自己的网络请求，最好是 每个网页都单独新建一个请求文件，方便管理，维护；
3-3、例如 创建一个首页的请求： home.js

//引入公共请求
import {request} from "./request";

//需要首页当中的数据，直接调用 getHomeAllData 方法就可以了；
export function getHomeAllData(){
    return  request({
        url:'/api/index'
    })
    }

如果有参数的情况下：

export function getHomeAllData(params){
    return  request({
        url:'/api/index',
        method:'get',
        params:{

        }
    })
}

根据接口文档，如果需要参数的话，在getHomeAllData(params),在request ，返回params，没有的话就省略;
方法如果是 get ,可以省略不写，因为默认的就是get

3-4，请求文件配置好之后，如何使用呢？

<script>
// @ is an alias to /src

import {onMounted} from "vue";
import {getHomeAllData} from "../../network/home";
export default {
  name: "Home",
  setup(){
    onMounted(()=>{
      getHomeAllData().then(res=>{
        console.log(res)
      })
    })
  }
}
</script>

先导入 方法，然后再 onMouted 中使用；通过打印res,可以看到首页当中的数据；

setup(){
    onMounted(()=>{
      getHomeAllData().then(res=>{
        console.log(res.data.slides)
      })
    })
  }

通过 res . 点出来，可以获得你想要的接口内的数据；
当然，在request.js 中，的响应拦截中设置：

instance.interceptors.response.use(res => {
        //响应正确的话，就直接返回了
        return res.data ? res.data : res;
     }
     err => {
         //如果有需要授权才可以登陆的接口，统一去 login 授权；
         //响应有错误的话，在这里进行设置；
         }
    )

【return res.data ? res.data : res;
返回 res.data, 如果正确的话返回 res.data,错误的话返回 res;】
在响应拦截里面这样设置之后：
在调用 res.data.slides 中的数据时，可以直接 写 res.slides；

到这里，项目的初始环境以经布置好了，可以进行项目的开发了；