足場VUE-cliの包装アイテムとAxios

第四に、インストールVUE-cliの足場構築ツール

グローバルインストールされ、コマンドライン

NPM -g VUE-CLIをインストール

バージョン番号を表示Vueの-Vコマンドラインでは、バージョン番号が正常にインストールが表示されています

​

五、VUE-cliの建築プロジェクト

プロジェクトディレクトリに、新しいプロジェクトベースのWebPACKのテンプレートを作成：VUEのinit WebPACKのプロジェクト名を

vue init webpack demo

デモは、自分のプロジェクト定義名に応じて、プロジェクトの名前である場合には、Enterキーを押すと、テンプレートは、構成上の問題のシリーズにダウンロードされます

​

説明：

プロジェクト名：プロジェクト名

• プロジェクトの説明：プロジェクトの説明の
  著者：著者
  のVueの構築：パッケージ（スタンドアロンおよびランタイム）、Enterキーを押してのようなデフォルトを選択するには、Enter 
  インストールVUEを -router？ ：ルートをインストールするかどうか？確かに、Yは、Enterキーを押し、使用する必要が
  使用ESLintはあなたのコードをlintの？：eslintコード検出ルールが有効になっていますか？現在、n個のEnterキーを押し、必要ではない
  カルマでセットアップユニットテストを +モカ？：ユニットテストかどうか？現在、n個のEnterキーを押し、必要はありませ
  ナイトウォッチとセットアップE2Eテストをテストするかどうかをエンド- ：？？現在、必要なnはEnterキーを押さないで

   

設定が完了したら、我々は我々のプロジェクトファイルのデモを見ることができます、私たちは現在のプロジェクトに端末を見つけ、プロジェクトディレクトリで次のコマンドラインコマンドラインを入力することができ、プロジェクトが正常に起動しました。ブラウザのアドレスバーにlocalhostを入力してください：8080は、プロジェクトにアクセスすることができます

NPM DEVを実行します

六、VUEプロジェクトのカタログの説明

​

1、ビルド：scriptsディレクトリを構築

　　　　1）build.js ==>本番環境スクリプトを構築します。

　　　　2）チェックversions.jsを==> NPMをチェックし、バージョンをNode.jsの。

　　　　3）utils.js ==>建設関連のユーティリティ。

　　　　4）VUE-loader.conf.js ==> CSSをコンパイルするように構成されたローダとCSS後に自動的にプレフィックスを追加します。

　　　　5）==> WebPACKの基本構成をwebpack.base.conf.js。

　　　　6）==> WebPACKの開発環境の設定をwebpack.dev.conf.js。

　　　　7）==> WebPACKの生産環境の設定をwebpack.prod.conf.js。

2、設定：プロジェクト構成

　　　　1）==>開発環境変数をdev.env.js。

　　　　2）index.js ==>プロジェクトプロファイル。

　　　　3）==>本番環境変数をprod.env.js。

3、node_modules：NPMモジュールロードされたプロジェクトの依存関係

4、SRC：ここでは、我々は基本的に、このディレクトリの観光名所を、ディレクトリを開発したいです。どのディレクトリやファイルの数が含まれています。

　　　　1）資産：リソースディレクトリ、いくつかの写真や公共のjs、公共CSSを配置します。ここでのリソースはWebPACKのを構築することになります。

　　　　2）コンポーネント：コンポーネントカタログ、我々は内部のこのディレクトリのコンポーネントでそれを書きます。

　　　　3）ルータ：フロントエンドルーティング、ルーティングパス我々は内部index.jsを書き込むように構成する必要があります。

　　　　4）App.vue：ルートコンポーネント。

　　　　5）main.js：JSファイルエントリ。

5、静的：静的リソースディレクトリは、そのようなので、上の画像、フォント、など。WebPACKのビルドされません

6、babelrc：バベル翻訳パラメータ

7、editorconfig：コード形式

8、gitignore：Gitは無視されるようにコンフィギュレーションファイルをアップロード

9、postcssrc.js：CSSの変換ツール

10、index.htmlを：入り口のホームファイル、あなたには、いくつかのメタ情報を追加することができ、

11、package.json：NPMパッケージ構成ファイルのスクリプトNPMプロジェクト、依存パッケージやその他の情報を定義します

12、README.md：ドキュメンテーションプロジェクト、マークダウンフォーマット

七、ポートにポート番号を変更します

ポートの競合を回避するには、ポートのパラメータを変更し、設定/ index.jsファイルを開き、ポートを変更することができます

​

八、インストール要素-UIフレームワーク

[1]インストール

NPM要素-UIをインストール-S

[2] main.jsファイルに導入

輸入ElementUI から ' 要素-UI ' 

輸入' 要素-UI / libに/テーマチョーク/ index.css ' 

Vue.use（ElementUI）

 

​

九、SASSをインストール

[1]インストール

NPM --save-devのcss-インストールローダ
NPMがインストール --save-devのsass- ローダ
NPMがインストール --save-devのSTYLE- ローダー

// SASS-ローダー依赖于ノード-SASS 
NPMが--save-devのノード-SASSをインストール

[2]の設定

webpack.base.conf.js内のフォルダ構成

rules:[
    ....
    {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
    }
]

【3】测试

在要用到scss的组件里面的style标签上加上 lang='scss'

在app.vue文件定义一个背景颜色变量，应用到css样式中，背景变成灰色，说明已成功配置好sass

​

十、配置本地代理

1、在项目找到config/index.js文件对proxyTable进行配置，配置完成后需要npm run dev重启一下项目

 proxyTable: {
      '/api': {           // 配置后台代理
        target: 'http://192.168.37.56:8090',
        secure: false,
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      },
      "/socket": {       // 配置webSocket
        target: 'http://192.168.37.56:8090',
        secure: false,
        pathRewrite: {
          '^/socket': ''
        },
        changeOrigin: true,
        ws: true
      },
    }

说明：

• target：本地测试环境请求后台接口的域名ip
• secure：https需要配置的参数
• pathRewrite：代替targe里面的地址，比如我们需要调用"http:192.168.37.56:8090/user/add"接口，我们可以直接写成"/api/user/add"
• changeOrigin：接口跨域需要配置的参数

2、config/index.js配置参数的详细解析

'use strict'
const path = require('path')

module.exports = {
  // 开发环境
  dev: {
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: '/',  // 编译发布的根目录，可配置为资源服务器域名或CDN域名
    proxyTable: {}, // 配置后台代理
    host: 'localhost', // 运行测试页面的域名ip
    port: 8080,  // 运行测试页面的端口
    autoOpenBrowser: false, // 项目运行时是否自动打开浏览器
    errorOverlay: true, // 浏览器错误提示
    notifyOnErrors: true, // 跨平台错误提示
    poll: false, // 使用文件系统获取文件改动的通知devServer.watchOptions
    devtool: 'cheap-module-eval-source-map', // 增加调试，该属性为原始源代码
    cacheBusting: true, // 使缓存失效
    cssSourceMap: true // 代码压缩后bug定位将非常困难，引入SourceMap记录压缩前后的位置信息记录，当产生错误时直接定位到压缩前的位置
  },
  // 生产环境
  build: {
    index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的index.html文件
    assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径（项目打包时的文件）
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或CDN域名
    productionSourceMap: true, // 是否开启cssSourceMap
    devtool: '#source-map', // 增加调试，该属性为原始源代码
    productionGzip: false, // 是否开启gzip
    productionGzipExtensions: ['js', 'css'], // 需要使用gzip压缩文件的扩展名
    bundleAnalyzerReport: process.env.npm_config_report // 打包分析
  }
}

 

十一、axios的封装

【1】安装

npm install axios --save-dev复制代码

【2】在项目的src目录下新建一个services文件夹，然后在里面新建一个ajax.js和一个getData.js文件。ajax.js文件用来封装我们的axios，getData.js用来统一管理我们的接口。

​

 

 

【3】ajax.js 封装axios

import axios from "axios";
import store from "@/store";
import { Message } from "element-ui";
let router = import("@/router");

axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Cache-Control"] = "no-cache";
axios.defaults.headers["pragma"] = "no-cache";

let source = axios.CancelToken.source();

//请求添加token
axios.interceptors.request.use(request => {
    request.headers["demo-auth"] = store.state.loginInfo ? store.state.loginInfo.userId : ""; // 已将userId保存在store中
    return request;
})

//切换页面取消请求
axios.interceptors.request.use(request => {
    request.cancelToken = source.token;
    return request;
});
router.then(lib => {
    lib.default.beforeEach((to, from, next) => {
        source.cancel()
        source = axios.CancelToken.source();
        next()
    })
})

//登录过期跳转
axios.interceptors.response.use(response => {
    let data = response.data;
    if (
        [10002].includes(data.ret)
    ) {
        router.then(lib => lib.default.push({ name: "login" })); // 跳转到登录页面
        Message.warning(data.msg);
    }
    return response;
})

//返回值解构
axios.interceptors.response.use(response => {
    let data = response.data;
    let isJson = (response.headers["content-type"] || "").includes("json");
    if (isJson) {
        if (data.code === 200) {
            return Promise.resolve({
                data: data.data,
                msg: data.msg,
                code: data.code,
            });
        }
        return Promise.reject(
            data.msg ||
            "网络错误"
        );
    } else {
        return data;
    }
}, err => {
    let isCancel = axios.isCancel(err);
    if (isCancel) {
        return new Promise(() => { });
    }
    return Promise.reject(
        err.response.data &&
        err.response.data.msg ||
        "网络错误"
    );
})

export function post(url, data, otherConfig) {
    return axios.post(url, data, otherConfig);
}

export function get(url, data, otherConfig) {
    return axios.get(url, { params: data, ...otherConfig });
}

【4】getData.js 接口管理

import { get, post } from "@/services/ajax";

//获取程序配置
export function getConfig() {
    return get("static/config.json", null, { baseURL: "./" });
}

// 查找货物已占用位置
export function queryGoodsLabel(params) {
    return get("/goods/queryGoodsLabel", params);
}

// 更换货物已占用位置
export function switchLabel(params) {
    return post("/goods/switchLabel", params);
}
}

 

【5】在页面中调用

import { queryGoodsLabel, switchLabel } from '@/services/getData.js'
export default {
        data() {
            return {}
        },
        methods: {
            changePlace(row) {
                this.params = {
                    id: row.id,
                    customsListNumber: row.customsListNumber,
                }

                // 查找货物已占用位置
                queryGoodsLabel(this.params).then(res => {
                    this.$refs.positionDialog.refill(res.data.split(","), true);
                }).catch(err => {

                })
            },
            change(data) {
                this.params.labels = data.join(',')

                // 更换货物已占用位置
                switchLabel(this.params).then(res => {
                    this.$Message.success('更换位置成功')
                }).catch(err => {
                    this。$ Message.error（ERR）
                }）
            } 
        }、
    }