Vue, VUE-route, vuex

NPM I vue vue-router Vuex // Production dependency NPM I vue-template-compiler vuE-loader vuE-style-loader -d // Development dependencyCopy the code

Introduction of package

1. Install the iview

npm install iview
Copy the code

2. Install the iView loading tool

npm install iview-loader --save-dev
Copy the code

3. File-loader and url-loader work together. When url-loader fails to be loaded, file-loader is automatically used

npm intstall file-loader --save-dev
npm intstall url-loader --save-dev
Copy the code

4. Load tools as required

npm install babel-plugin-import --save-dev
Copy the code
  1. Compatible with Internet Explorer plug-in
npm install babel-polyfill --save-dev
Copy the code

Modifying corresponding Configurations

  1. Modify the webpack. Config. Js, webpack module of new configuration as follows:
{
        test: /\.vue$/.use: [{loader: "vue-loader".options: {
              loaders: {
                css: ExtractTextPlugin.extract({
                  use: "css-loader".fallback: "vue-style-loader"})}}}, {loader: "iview-loader".options: {
              prefix: false}}]}, {test: /iview\/.*? js$/.loader: "babel-loader"
      },
      {
        test: /iview.src.*? js$/.// For compatibility with IE, the iView component cannot be previewed in IE browser otherwise
        use: [
          {
            loader: "babel-loader"}]}, {// If this is not configured, the iView. CSS file cannot be loaded from the Js file. If url-loader fails to load files, file-loader is used to load files
        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\?? . * $/.loader: "url-loader? limit=1024"
      },
Copy the code

2. Add styles

Add the appropriate styles and compatibility tools to index.js

import "babel-polyfill";
import 'iview/dist/styles/iview.css';
Copy the code

Integrated iview

There are two ways to integrate iView, one is to introduce according to actual needs, the other is to introduce globally. You can only choose one of them.

1. Import on demand, you need to configure the following contents in. Babelrc /babel.config.js:

module.exports={
    presets:[
        [
            "@babel/preset-env",
            {
                targets:{
                    "browsers": ["last 3 versions"."ie>=9"]
                },
                useBuiltIns:"entry",
                debug:false
            }
        ]
    ],
    plugins: [
        [
          "import",
          {
            "libraryName": "iview"."libraryDirectory": "src/components"}}]]Copy the code

2. The global

Vue.use(iView)
Copy the code