Vue -- 引入jQuery或者引入element ui

一. jQuery引入

1. 安装

npm install jquery --save

2. 引入

3. 局部引入，

在需要使用的页面进行引入

import $ from 'jquery'

22. 全局引入

在项目目录下build下的webpack.base.conf.js文件头部加入

var webpack = require('webpack')

并在module.exports的尾部加入

plugins: [
　　new webpack.ProvidePlugin({
　　　　jQuery: "jquery",
　　　　$: "jquery"
　　})
]
//如下
/* module.exports = {
	//其它代码
	plugins: [
　　new webpack.ProvidePlugin({
　　　　jQuery: "jquery",
　　　　$: "jquery"
　　})
	],
} */

在main.js中引入

import $ from 'jquery'

重启服务： npm run dev 或者npm start

一. element ui引入

1. 安装

npm install element-ui -save

2.引入

21. 完整引入

在main.js文件加入

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

22. 按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，在 .babelrc 文件中，内容如下：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

将如上内容改为如下：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }	
    }],
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [
     "transform-vue-jsx",
     "transform-runtime",
     [
        "component",
        {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
        }
     ]
	 			
   ]
}

在main.js中按需引入，比如引入Button 和 Select，具体如下：

import { Button, Select } from 'element-ui';
 
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

此外，如果报错：Module build failed: Error: Couldn’t find preset “es2015” relative to directory…

则安装，执行如下命令，安装完后，如果刷新页面还报这个错误，则重启服务： npm run dev 或者npm start。

 npm install babel-preset-es2015 --save-dev