Vue项目初始化配置项

文章目录

• 前言

  一、如何创建项目？

  ​编辑

  二、项目中其他配置

  1.项目运行起来的时候，让浏览器自动打开

  2.eslint校验功能关闭

  三、axios 二次封装

  1、为什么要二次封装 axios？

  2、api接口统一管理

  总结

---

前言

我们利用工具创建的项目有时候不是自己想要的，或者说自己想要更熟悉了解自己的项目配置项从而提高开发效率，见名知意，节约时间，节约开发成本。

---

一、如何创建项目？

我们通常会创建一个文件夹，安装Vue-cli脚手架初始化项目。

必要条件：

我们的电脑里需要安装node, 有需求可以安装一下webpack,可以使用淘宝镜像更快的下载依赖。

初始化项目：

输入命令创建项目

vue create 项目名称

我们可以选择Vue2和Vue3也可以自己，自定义配置。

 选好配置可以回车直接安装，如果还需要其他依赖项可以在项目安装完了之后在配置也可以。

下完之后的一个Vue项目目录结构：

• node_modules文件夹:存放的是项目依赖
• public文件夹：里面存在一个静态页面，如果有rem需求可以在静态页面中进行配置，public文件夹一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中。
• src文件夹（源代码文件）：
  • assets文件夹：一般也是存放静态资源，放置在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到js文件里面
  • components文件夹：一般放置的是非路由组件（全局组件）
• App.vue：唯一的根组件
• main.js：程序入口文件，也是整个程序当中最先执行的文件
• .gitignore：git文件
• babel.config.js：配置文件（babel相关）
• package.json文件：认为项目的“身份证”，记录项目叫做什么、项目当中有哪些依赖、项目怎么运行、记录项目信息。
• package-lock.json：缓存性文件
• README.md：说明性文件

一个组件分为三部分：template书写html结构的地方，script书写逻辑的地方，style书写样式的地方。

二、项目中其他配置

1.项目运行起来的时候，让浏览器自动打开

在项目文件夹中打开命令行输入 npm run serve 启动项目，先让项目跑起来，但是浏览器不会自动打开，需要自己手动输入地址才能访问自己的项目，在开发项目的时候确实不方便

npm run serve

如果想让浏览器自动打开需要配置：

首先找到package.json文件里面有一个“scripts”在它下面有一个“serve”的配置项，我们执行启动项目命令就是执行的这一行

"scripts": {

    "serve": "vue-cli-service serve --open",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

在后面加上 --open 之后就能自动打开，如果不行，还需配置vue.config.js文件，更改启动路径即可

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  devServer: {
    open: true,
    host: "localhost",
    port: 8080,
  },
});

2.eslint校验功能关闭

这是一个非常好的工具，它可以校验你的语法ok不ok，我们先给它关闭一下，防止我们错误的认为代码错误：

举个例子：

        如果我们在入口文件main.js中声明一个let a =100; 语法没有错误，但是你会发现eslint会提示error错误信息，你声明的a变量你没有使用，你不使用就会提示错误，所有我们需要把校验工具给关闭了。

如何关闭：

        我们需要在根目录下，创建一个vue.config.js文件夹，配置如下

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  // 关闭eslint
  lintOnSave: false,
});

---

三、axios 二次封装

axios特点

1. 它可以发送ajax请求
2. 它可以在node.js中发送http请求
3. 支持promise API
4. 请求响应拦截器  在请求之前做一些操作，在响应回来之后可以对结果做一些预处理
5. 可以帮我们请求和响应数据做转换
6. 取消请求
7. 自动将结果转换为JSON数据
8. 可以保护，防止跨站攻击XSRF

1、为什么要二次封装 axios？

请求拦截器、响应拦截器：请求拦截器，可以在发请求之前可以处理一些业务、响应拦截器，当服务器数据返回以后，可以处理一些事情。

安装axios

npm install axios

在项目当中经常API文件夹【axios】 接口当中：路径都带有/api

                        baseURL:"/api"                        http://xxx.xxx.8080/api

在src目录下创建一个api文件夹，在api下创建request.js文件来对axios进行二次封装

// 对于axios进行二次封装
import axios from "axios";
// 1.利用axios对象的方法create,去创建一个axios实例
// 2.request就是axios,只不过稍微配置一下
// axios.defaults.baseURL = "/api";
const requests = axios.create({
  // 配置对象
  // 基础路径,发送请求的时候，路径当中会出现api
  baseURL: "/api",
  // 代表请求超时的时间5s
  timeout: 10000,
});
// 请求拦截器：在发请求之前，请求拦截器可以检测到。可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
  return config;
});

// 响应拦截器
requests.interceptors.response.use(
  (res) => {
    // 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data;
  },
  (error) => {
    // 服务器响应失败的回调函数
    return Promise.reject(new Error("faile"));
  }
);

// 对外暴露
export default axios;

2、api接口统一管理

如果我们的项目小，完全可以在组件的生命周期函数中发请求。

如果说我们的项目很大，请求较多可以进行接口统一管理，在api文件下创建一个index.js文件夹，进行统一管理

代码示例：

//当前这个模块：API进行统一管理
import requests from "./request.js";


export const reqCategoryList = () => requests({ url: "username/getList", method: "get" });

总结

像这样配置我们的项目可以提高开发效率，节约开发成本，方便管理。