jQuery 库
step1: 安装 jQuery 依赖 npm install jQuery -S
step2: 修改配置文件 (bind->webpack.base.conf.js), 红色部分为修改部分
- var path = require('path')
- var utils = require('./utils')
- var config = require('../config')
- var vueLoaderConfig = require('./vue-loader.conf')
- var webpack = require('webpack')
- function resolve (dir) {
- return path.join(__dirname, '..', dir)
- }
- module.exports = {
- entry: {
- app: './src/main.js'
- },
- output: {
- path: config.build.assetsRoot,
- filename: '[name].js',
- publicPath: process.env.NODE_ENV === 'production'
- ? config.build.assetsPublicPath
- : config.dev.assetsPublicPath
- },
- resolve: {
- extensions: ['.js', '.vue', '.json'],
- alias: {
- 'vue$': 'vue/dist/vue.esm.js',
- '@': resolve('src'),
- // 自行下载的 jQuery
- // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
- // 使用 NPM 安装的 jQuery
- 'jquery': 'jquery'
- }
- },
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- options: vueLoaderConfig
- },
- {
- test: /\.js$/,
- loader: 'babel-loader',
- include: [resolve('src'), resolve('test')]
- },
- {
- test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000,
- name: utils.assetsPath('img/[name].[hash:7].[ext]')
- }
- },
- {
- test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000,
- name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
- }
- }
- ]
- },
- // 增加一个 plugins
- plugins: [
- new webpack.ProvidePlugin({
- $: "jquery",
- jQuery: "jquery"
- })
- ]
- }
step3: 直接在页面引用 import $ from 'jquery'
第三方插件
step1: 安装 echarts 依赖 npm install echarts -S
step2: 全局引入
src->main.js 引入 echarts
- import echarts from 'echarts'
- Vue.prototype.$echarts = echarts
- src->components->*.vue
- <template>
- <div id="myChart" :style="{width:'300px', height:'300px'}"></div>
- </template>
- <script>
- export default {
- data () {
- return {}
- },
- mounted(){
- this.drawLine()
- },
- methods: {
- drawLine(){
- // 基于准备好的 dom, 初始化 echarts 实例
- let myChart = this.$echarts.init(document.getElementById('myChart'))
- // 绘制图表
- myChart.setOption({
- title: { text: '在 Vue 中使用 echarts' },
- tooltip: {},
- xAxis: {
- data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
- },
- yAxis: {},
- series: [{
- name: '销量',
- type: 'bar',
- data: [5, 20, 36, 10, 10, 20]
- }]
- })
- }
- }
- }
- </script>
step2: 按需引入
- // 引入基本模板, 路径为 node-module->echarts->lib->echarts.js
- let echarts = require('echarts/lib/echarts')
- // 引入柱状图组件, 路径为 node-module->echarts->lib->chart->bar
- require('echarts/lib/chart/bar')
- // 引入提示框和 title 组件, 路径为 node-module->echarts->lib->component->*.js
- require('echarts/lib/component/tooltip')
- require('echarts/lib/component/title')
来源: http://www.qdfuns.com/article/45537/79c50f5ab83720ab30c226bf5034ab6a.html