vue-cli4 を使用して完全な vue (vue+vuex+vue-router+scss+es6+antD+axios) プロジェクトを構築します

1. インストールの依存関係

• vue-cli をグローバルにインストールする

npm install -g @vue/cli

• インストールが成功したかどうかを確認する

vue --versionと入力し 、次のバージョン番号が表示されれば成功です。

poweshellr を使用して、このシステムではスクリプトの実行が禁止されているため、ファイル D:\nvm\nodejs\vue.ps1 をロードできないというメッセージが表示された場合は、[私] をクリックして解決策を表示してください。

2. プロジェクトを作成する

• vue create vue-test  // vue-test はプロジェクト名です。ハンプケースはサポートされていません

? Please pick a preset:
  default (babel, eslint) // 默认
> Manually select features // 手动选择，我选这个

次の選択は赤丸の部分に表示されます

それぞれ次のことを表します。

1. 選択モード: 手動選択構成
2. 必要な構成を選択します: babel (es6 コンパイル)、vue-router (ルーティング)、vuex (ステート マシン)、css プリプロセッサー (css プリコンパイラー、後で選択する scss)、リンター (文法、スペル、その他のエラー チェック) )
3. 履歴ルーティング モードを選択するかどうか: いいえ
4. CSS プリコンパイラーを選択します: dart-sass コンパイル、つまり scss
5. 使用されるエラー チェック メカニズム: formatter config:Prettier
6. エラーチェック条件：保存時
7. 構成アイテムの配置場所: package.json
8. 上記の設定を保存して将来のプロジェクトで使用するかどうか: いいえ

• vue-test フォルダーに切り替え、npm runserve を実行してプロジェクトを開始します。

3. 高レベルの構成

(1) axiosの導入

• axiosをインストールする

cnpm install --save axios vue-axios

• 異なる環境で使用するために、ルート ディレクトリに 3 つのファイルを作成します。

.env、.env.development、.env.release、対応する変数です。

NODE_ENV=production // 対応する起動環境
VUE_APP_API_BASE_URL=/api // リクエストパス、状況に応じて変更

• トークンストレージファイルの作成
  • トークンを保存するためにjs-cookieをインストールする

    cnpm install js-cookie --save

  • util の下に auth.js を作成し、読み取りおよび書き込みトークン メソッドを書き込みます

    import Cookie from "js-cookie";
    const AccessTokenKey = "Admin-Token"; // 属性名，自行修改
    
    export function getAccessToken() {
      return Cookie.get(AccessTokenKey);
    }
    
    export function setAccessToken(token) {
      return Cookie.set(AccessTokenKey, token);
    }
    
    export function removeAccessToken() {
      return Cookie.remove(AccessTokenKey);
    }

• インターセプト設定用に util フォルダーの下に request.js を作成します。

import axios from "axios";
// import store from "@/store";
import { getAccessToken } from "@/util/auth";
import { notification } from "ant-design-vue";

// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 10000 // 请求超时时间,10s
});

// 异常拦截处理器
const errorHandler = errorRep => {
  if (errorRep.response) {
    const {
        data: { error },
        status
      } = errorRep.response,
      // 从 coockie 获取 token
      token = getAccessToken();
    // 身份验证失败
    if (status === 401) {
      notification.error({
        message: "身份验证",
        description: "登录过期，需要重新验证身份"
      });
      // 如果登录了，则退出登录
      if (token) {
        // store.dispatch("Logout").then(() => {
        //   setTimeout(() => {
        //     window.location.reload();
        //   }, 1500);
        // });
      }
    }

    if (status === 403) {
      notification.error({
        message: "拒绝访问",
        description: error.message
      });
    } else {
      notification.error({
        message: "错误消息",
        description: error.message
      });
    }
    return Promise.reject(error);
  }
  return Promise.reject(errorRep);
};

// 请求前拦截
request.interceptors.request.use(config => {
  const token = getAccessToken();
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
  if (token) {
    config.headers["authorization"] = `Bearer ${token}`;
  }
  return config;
}, errorHandler);

// 请求后拦截
request.interceptors.response.use(response => {
  return response.data;
}, errorHandler);

export default request;

• src 配下に API フォルダーを作成し、インターフェーステスト用の js を作成します。

(2) vuexの共通設定

• ストア内にモジュールフォルダーを作成し、ユーザー情報を格納する user.js を作成します。状態変数が少ない場合はフォルダーを作成する必要はありません

import { login, getUserInfo, logout } from "@/api/user";
import { setAccessToken, removeAccessToken } from "@/util/auth";
const state = {
  token: null, // token
  name: null, // 用户名
  avatar: null, // 头像
  role: null // 角色
};

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token;
  },
  SET_NAME: (state, name) => {
    state.name = name;
  },
  SET_AVATER: (state, avatar) => {
    state.avatar = avatar;
  },
  SET_ROLE: (state, role) => {
    state.role = role;
  }
};

const actions = {
  // 登录,true代表登录成功
  login({ commit }, userInfo) {
    const { username, password } = userInfo;
    return login({ username, password }).then(token => {
      commit("SET_TOKEN", token);
      setAccessToken(token);
      return true;
    });
  },

  // 获取用户信息
  getUserInfo({ commit }) {
    return getUserInfo().then(user => {
      const { username, avatar, role } = user;
      commit("SET_NAME", username);
      commit("SET_AVATER", avatar);
      commit("SET_ROLE", role);
      return user;
    });
  },

  // 退出登录
  logout({ commit }) {
    return logout().then(() => {
      commit("SET_NAME", null);
      commit("SET_AVATER", null);
      commit("SET_ROLE", null);
      commit("SET_token", null);
      removeAccessToken();
      return true;
    });
  }
};

export default {
  state,
  mutations,
  actions
};

• ストア内に getters.js ファイルを作成して、すべての状態変数の読み取りを保存します

export default {
  token: state => state.user.token,
  username: state => state.user.name,
  avater: state => state.user.avater,
  role: state => state.user.role
};

• ストアのindex.js配下に上記の新規作成ファイルを導入します

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

Vue.use(Vuex);

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context("./modules", true, /\.js$/);

//module文件夹下的状态机自动引入
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // 格式化 './user.js' => 'user'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});

const store = new Vuex.Store({
  modules,
  getters
});

export default store;

(3) ルート遮断設定

ここでは判定ログインのみを書いていますが、ページ権限制御が必要な場合はさらに複雑になりますので、こちらを参照してください。

router.beforeEach((to, from, next) => {
  const token = getAccessToken();

  // 有token
  if (token()) {
    //登录页
    if (to.path === "/login") {
      next("/");
    }
    // 非登录页
    else {
      next();
    }
  }

  //无token
  else {
    //登录页
    if (to.path === "/login") {
      next();
    } else {
      next("/login?redirect=" + to.path);
    }
  }
});

(4)antDの導入

1. 通常インポート

• antDをインストールする

cnpm install ant-design-vue --save

• オンデマンド インポート ツールbabel-plugin-importをインストールする

cnpm install babel-plugin-import -save-dev

ルートディレクトリにbabel.config.jsを作成し、次の設定を追加します。

plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css"}] // 如果需要自定义主题，此处style：true，需要自定义主题看下面描述
  ]

• util フォルダーに cusImportAntD.js を作成して必要なコンポーネントをインポートし、作成した js を main.js にインポートします

// cusImportAntD.js，按需引入antD
import Vue from "vue";
import { Button, Input, Menu, Row, Col, Table, Modal, Tag, message, Icon, DatePicker, FormModel, Spin, notification, Result, Layout, Select, Collapse, Popconfirm, Tabs, Empty, Radio, Checkbox, Slider} from "ant-design-vue";
const antd = [ Button, Input, Menu, Row, Col, Table, Modal, Tag, Icon, DatePicker, FormModel, Spin, Result, Layout, Select, Collapse, Popconfirm, Tabs, Empty, Radio, Checkbox, Slider];
antd.forEach(component => {
  Vue.use(component);
});
Vue.prototype.$message = message;
Vue.prototype.$notification = notification;

// main.js引入cusImportAntD.js
// 引入antD，因为已经使用了babel-plugin-import，此处无需引入css
import "@/util/cusImportAntd";

• helloword.vue でテストしてください

2. テーマをカスタマイズします (必要ない場合はこの手順をスキップしてください)

• インストールするローダーの数も少なくなります

cnpm install less less-loader --save-dev

• babel.config.jsを変更し、style: trueにして負荷を減らします

plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true}] // `style: true` 会加载 less 文件
  ]

• vue.config.jsに変数設定項目を追加します。すべての変数についてはここをクリックしてください

css: {
    // requireModuleExtension: false,  // 这句话不能要，否则css样式不起效
    loaderOptions: {
      less: {
        // 这里的选项会传递给 less-loader
        lessOptions: {
          modifyVars: { // 这里是自定义的主题颜色，全部变量属性参照官方
            "primary-color": "#1DA57A",
            "link-color": "#1DA57A",
            "border-radius-base": "2px"
          },
          javascriptEnabled: true // 这句话必须要，否则不起效
        }
      }
    }