如何利用Vue开发一个项目基础框架

通过学习了Vue的基础知识（数据绑定，计算属性，监听器，事件，组件，样式等），路由（Vue Router），状态管理（Vuex）后，对Vue的生态已经有了一定的认识，那么我们就要在项目中应用所学的知识，把这些知识串联起来完成一个基础框架，在这个过程遇到新的知识可以再去学习。

脚手架创建项目

使用命令： vue create vue-demo

有3个模板选择，自己可以去尝试不同模板的项目，本次我们使用 “Manually select features” 模板创建

使用上下移动，空格去选中带 “*” 的这几项内容，创建的项目中就会包含这几项

接下来会根据上面选择的内容去配置，选择版本 vue 2.x，路由模式，ESLint+Prettier

到此我们的一个自定义模板的项目就创建完成了，如果有依赖包安装失败，可以进入项目，重新执行 npm install

运行项目：npm run serve

一个项目只有这些内容还是远远不够的，还需要添加请求库，通用方法，vuex的使用等等内容。

项目结构

一个简单基本完整的项目应该要包含如下内容，除了模板生成的一些文件夹和文件，还需自己添加一些文件夹和文件

vue-demo
--dist      // 编译打包生成的文件夹
--public  // 静态资源文件
----data // 创建数据文件（json）
----images // 创建图片文件夹
----index.html // 首页模板
--src        
----assets  // 资源文件（样式，图片）
----components  // 组件
----router  // 路由
----store   // Vuex状态管理
------modules // 定义state，mutations，actions
------getters.js  // 定义getters
------index.js
----utils   // 通用公共函数，方法
----views  // 视图页面
----App.vue // 启动组件
----main.js   // 启动方法
--babel.config.js  // babel 配置文件
--package.json    // 项目配置文件
--vue.config.js     // 自己创建项目发布打包文件
--.env.development  // 自己创建开发环境配置
--.env.production     // 自己创建生产环境配置

请求库Axios

安装：cnpm install axios --save

在文件夹 utils，创建文件 request.js，对 axios 进行封装，axios的使用可以参考：https://www.npmjs.com/package/axios

/****   request.js   ****/
// 导入axios
import axios from "axios";
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 3000,
});
// 请求拦截器
service.interceptors.request.use(
  (config) => {
    //可以对发送的参数数据，请求头，token等处理
    config.data = JSON.stringify(config.data);
    config.headers = {
      "Content-Type": "application/x-www-form-urlencoded",
    };
    const token = window.localStorage.getItem("token");
    if (token) {
      config.params = { token: token };
      config.headers.token = token;
    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    //接收到响应数据并成功后的一些共有的处理
    return Promise.resolve(response);
  },
  (error) => {
    /***** 接收到异常响应的处理开始 *****/
    if (error && error.response) {
          // 可以根据不同的状态判断错误
          error.message = `请求错误${error.response.status}`;
    } else {
      // 超时处理
      if (JSON.stringify(error).includes("timeout")) {
        console.error("服务器响应超时，请刷新当前页");
      }
      error.message = "连接服务器失败";
    }
    console.log(error.message);
    //如果不需要错误处理，以上的处理过程都可省略
    return Promise.resolve(error.response);
  }
);
export default service;

在文件夹 utils，创建文件 http.js，对axios的常用方法封装

// 导入axios实例 request.js
import request from "./request";

const http = {
  /**
   * methods: get/post请求
   * @param url 请求地址
   * @param params 请求参数
   */
  get(url, params) {
    const config = {
      method: "get",
      url: url,
    };
    if (params) config.params = params;
    return request(config);
  },
  post(url, params) {
    const config = {
      method: "post",
      url: url,
    };
    if (params) config.data = params;
    return request(config);
  },
};
export default http;

在文件夹 utils，创建文件 api.js，把需要调用的 api 接口方法都写在这里

// 导入请求库的方法
import http from "../utils/http";
/**
 *  @resquest 请求地址，从.env.development/.env.production文件中获取，例如：http://127.0.0.1:8088/api/...
 *  @param 传递的参数
 */
let resquest = process.env.VUE_APP_BASE_API;

export function getUserList(params) {
  // 文件 user.json 来自 /public/data 里面
  return http.get(`${resquest}/data/user.json`, params);
}

路由（vue-router）

根据模板创建项目会生成路由文件，里面可以配置页面路由，配置 history 或 hash 模式，根据路由钩子函数添加一些处理，路由的具体使用参考：https://router.vuejs.org/zh/guide/

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/course",
    name: "Course",
    component: () => import("../views/Course.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: 'hash',   // 默认：hash ，也可以设置 history
  routes,
});

//路由拦截器
router.beforeEach((to, from, next) => {
　　//根据字段判断是否路由过滤
　　if(to.meta.requireAuth) {
    // 根据Token，判断该路由是否需要登录权限
　　　　if(localStorage.getItem('token')) {
　　　　　　next();
　　　　} else {
　　　　　　next({
　　　　　　　　path: '/login'
　　　　　　})
　　　　}
　　} else {
　　　　next();
　　}
});

export default router;

状态管理（Vuex）

状态管理在vue里面也是比较重要的东西，刚开始学还是有点迷茫，有点看不懂，跟着文档做练习就会慢慢体会到State，Getters，Mutations，Actions，Modules之间的相互关系和如何去使用它们。具体使用参考：https://vuex.vuejs.org/zh/

在文件夹 store 里面添加文件夹 modules，文件夹 modules 里面创建文件 user.js

// 导入公共 localStorage 处理模块
import { getToken, setToken, removeToken } from "@/utils/auth";

// State
const getDefaultState = () => {
  return {
    token: getToken(),
    name: "",
    avatar: "",
  };
};

const state = getDefaultState();
// Mutations
const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState());
  },
  SET_TOKEN: (state, token) => {
    state.token = token;
  },
};
// Actions
const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, avatar, token } = userInfo;
    commit("SET_TOKEN", token);
    setToken(data.token);
  },

  // get user info
  getInfo({ commit, state }) {
    const { name, avatar } = state;

    commit("SET_NAME", name);
    commit("SET_AVATAR", avatar);
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

 在文件夹 store 里面创建文件 getters.js，这里面可以直接从 state 里面获取数据

const getters = {
  token: (state) => state.user.token,
};
export default getters;

在文件夹 store 里面的文件 index.js 添加 getters 和 modules

import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user";
import getters from "./getters";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    user,
  },
  getters,
});

发布配置

我们可以使用CLI的配置，对项目进行不同环境的打包发布配置，具体用法参考：https://cli.vuejs.org/zh/config/

项目根目录创建文件：vue.config.js（项目打包配置），.env.development（开发环境变量），.env.production（生产环境变量）

const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
  publicPath: "/",
  outputDir: "dist",
  assetsDir: "", //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: "index.html", //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("common", resolve("src/common"))
      .set("utils", resolve("src/utils"));
    config
      .plugin('html')
      .tap(args => {
        args[0].title= '华为云-Classroom'
        return args
    });
    config.resolve.symlinks(true);
  },
  css: {
    //   extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps
    loaderOptions: {
      less: {
        javascriptEnabled: true //less 配置
      }
    }, // css预设器配置项
    requireModuleExtension: true,
  },
  devServer: {  // 启动服务配置
    host: "localhost",
    port: 8080,
    https: false,
    hotOnly: false,
    open: true,
    proxy: {  // api 代理配置
      "/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true,
      },
    },
  },
  pluginOptions: {
    // 第三方插件配置
  },
};

文件 env.development 设置全局变量

ENV = development
VUE_APP_BASE_API = http://127.0.0.1:8080

写到这里我们vue项目的一个基本框架就算完成了，后续在开发过程中遇到的问题，或者新的东西在自行扩展，完善内容。

文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~

文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。