vue的經常使用插件

時間 2019-12-19

標籤 vue 經常使用插件简体版

原文原文鏈接

目錄javascript

項目功能插件

element-ui

餓了麼開發的框架element：https://element.eleme.cn/#/zh-CNcss

配置element-ui插件
一、安裝：cnpm install element-ui
二、配置環境vue

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

bootstrap

bootstrap：https://v3.bootcss.com/java

安裝插件(配置jq和bs的環境)

jQuery

>: cnpm install jquery

vue/cli 3 配置jQuery：在vue.config.js中配置(沒有，手動項目根目錄下新建)

vue.config.js是全局配置，而且項目沒有直接給出，因此須要本身動手來建立，這一個js文件jquery

// 修改該文件內容後，只有重啓，才能同步配置
const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                //下面的都是表明jq
                $: "jquery",
                jQuery: "jquery",
                //"window.$": "jquery",//多一種使用方式，能夠去掉
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

BootStrap

安裝第三個版本webpack

>: cnpm install bootstrap@3

vue/cli 3 配置BootStrap：在main.js中配置

import "bootstrap"//加載bs的邏輯，(bootstrap與jquery)
import "bootstrap/dist/css/bootstrap.css"//導入bootstrap

axios

配置axios來完成先後臺ajax請求ios

安裝 axios(ajax)的命令
cnpm install axios
// 爲項目配置全局axios，配置環境
import Axios from 'axios'
//Vue.prototype.$ajax = Axios;//命名方式1
Vue.prototype.$axios = Axios;//命名方式2，vue框架常使用

export default {
        name: "Cars",
        components: {
            Car
        },
        data() {
            return {
                cars_data: []
            }
        },
        created() {
            // 組件一加載，就從後臺請求數據

            // 一、jq完成ajax請求,通常不使用
            /*
            $.ajax({
                url: this.$settings.base_url + '/cars/',
                type: 'get',
                success(response) {
                    console.log(response)
                }
            });
            */

           
        }
    }

使用web

export default {
        name: "Cars",
        components: {
            Car
        },
        data() {
            return {
                cars_data: []
            }
        },
        created() {
// 二、vue有專門用來完成ajax請求的插件：axios
            this.$ajax({
                url: this.$settings.base_url + '/cars/',
                method: 'get',
                params: {
                    // url拼接的數據
                },
                data: {
                    // 請求攜帶的數據報數據
                }
            }).then((response) => {
                console.log(response);
                this.cars_data = response.data;
            }).catch(error => {
                console.log(error)
            })

vue-cookies

// 配置cookie操做插件命令
// cnpm install vue-cookies
// 爲項目配置全局vue-cookie
import Cookies from 'vue-cookies'

// 將插件設置給Vue原型,做爲全局的屬性,在任何地方均可以經過this.$cookie進行訪問
Vue.prototype.$cookies = Cookies;

// 有響應的登陸認證碼，存儲在cookie中
// 設置(持久化存儲val的值到cookie中)：set(key, val, exp)
// 獲取cookie中val字段值：get(key)
// 刪除cookie鍵值對：remove(key)
let token =  response.data.result;
if (token) {
// this.$cookies.set('token', token, '2d');
// this.$cookies.set('token', token, 2 * 24 * 3600 * 365);
// console.log(this.$cookies.get('token'));
// this.$cookies.remove('token');
           }

vue-router（vue提早安裝）

{
    path: '/',
    name: 'home',
    // 路由的重定向
    redirect: '/home'
}

{
    // 一級路由, 在根組件中被渲染, 替換根組件的<router-view/>標籤
    path: '/one-view',
    name: 'one',
    component: () => import('./views/OneView.vue')
}

{
    // 多級路由, 在根組件中被渲染, 替換根組件的<router-view/>標籤
    path: '/one-view/one-detail',
    component: () => import('./views/OneDetail.vue'),
    // 子路由, 在所屬路由指向的組件中被渲染, 替換該組件(OneDetail)的<router-view/>標籤
    children: [{
        path: 'show',
        component: () => import('./components/OneShow.vue')
    }]
}

<!-- router-link渲染爲a標籤 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name: 'one'}">One</router-link> |

<!-- 爲路由渲染的組件佔位 -->
<router-view />

a.router-link-exact-active {
    color: #42b983;
}

// router的邏輯轉跳
this.$router.push('/one-view')

// router採用history方式訪問上一級
this.$router.go(-1)

vuex（倉庫vue提早安裝）

// 在任何一個組件中,都可以經過this.$store.state.msg訪問msg的數據
// state永遠只能擁有一種狀態值
state: {
    msg: "狀態管理器"
},
// 讓state擁有多個狀態值
mutations: {
    // 在一個一個組件中,都可以經過this.$store.commit('setMsg', new_msg)來修改state中的msg
    setMsg(state, new_msg) {
        state.msg = new_msg
    }
},
// 讓mutations擁有多個狀態值
actions: {

}