vue常用插件

Vuex

npm install vuex --save
//vue add vuex

//main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

router

npm install vue-router
//vue add vue add router

//main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

echarts

npm install echarts --save

import echarts from 'echarts';


this.chart = echarts.init(this.$el);
this.chart.setOption(options);

jquery

npm install jquery --save

//package.json 文件内的 "dependencies"中检查是否有 "jquery": "^3.3.1", （如没有 则需手动添加）

//vue.config.js文件里面配一配
//在vue.config.js的文件开头添加：
const webpack = require('webpack');
//module.exports中，添加：
configureWebpack: {
    plugins: [
        new webpack.ProvidePlugin({
            $:"jquery",
 
            jQuery:"jquery",
            "windows.jQuery":"jquery"
        })
    ]
},

bootstrap

npm install bootstrap --save

<style lang="scss">
@import '~bootstrap/scss/bootstrap';
</style>

element-ui

npm i element-ui -S

//main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

scss

npm install -D sass-loader node-sass

vue-lazyload

$ npm install vue-lazyload --save

//main.js
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

导入所有组件

// 导入所有组件
const componentsReq = require.context('./components', true, /\.vue$/);
componentsReq.keys().forEach((key) => {
  const component = componentsReq(key).default;
  Vue.component(component.name, component);
});

mouse.png