7.vueフロント構成、プラグイン、コンポーネント

目次

luffyフロント構成

axiosフロントバックグラウンドインタラクション

インストール:フロントエンドプロジェクトディレクトリ下の端末

配置:main.js

cookies操作

インストール:フロントエンドプロジェクトディレクトリ下の端末

配置:main.js

element-uiページコンポーネントフレームワーク

インストール:フロントエンドプロジェクトディレクトリ下の端末

配置:main.js

bootstrapページコンポーネントフレームワーク

インストール:フロントエンドプロジェクトディレクトリ下の端末

jquery:vueを構成する.config.js

bootstrap:mainを構成する.js

luffyフロント構成
axiosフロントバックグラウンドインタラクション
インストール:フロントエンドプロジェクトディレクトリの下にある端末

>: cnpm install axios

構成:main.js

import axios from 'axios'
Vue.prototype.$axios = axios;

Cookies操作
インストール:フロントエンドプロジェクトディレクトリの下にある端末

>: cnpm install vue-cookies

構成:main.js

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

Element-uiページコンポーネントフレームワーク
インストール:フロントエンドプロジェクトディレクトリの下にある端末

>: cnpm install element-ui

構成:main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

bootstrapページコンポーネントフレームワーク
インストール:フロントエンドプロジェクトディレクトリの下にある端末

>: cnpm install jquery
>: cnpm install bootstrap@3

jquery:vueを構成します.config.js

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

bootstrap:main.js

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'