@vue/cli-单个 *.vue 快速原型开发—遇到的坑

vue最新脚手架有'对单个 *.vue快速原型开发'的方式，感觉平时用这个方式开发个小demo之类的很方便，在尝试中发现，在结合element-ui使用时总是报错，找了一天，终于发现问题所在并成功解决。下面是遇到问题的过程和解决的思路。

发现问题

# 1.建立环境：
#   新建文件夹  `vue-serve-app` 
#   新建 `main.js` 文件
#   初始化package.json 
$ package init -y

# 2.npm 下载element-ui包：
$ npm i element-ui -S

# 3.main.js 中引入element-ui
import element from 'element-ui'
console.log(element)

# 4.零配置为 main .js 启动一个服务器
$ vue serve

# 报错：
These dependencies were not found:

* core-js/library/fn/object/assign in ./node_modules/babel-runtime/core-js/object/assign.js
* core-js/library/fn/symbol in ./node_modules/babel-runtime/core-js/symbol.js
* core-js/library/fn/symbol/iterator in ./node_modules/babel-runtime/core-js/symbol/iterator.js

To install them, you can run: npm install --save core-js/library/fn/object/assign core-js/library/fn/sym
bol core-js/library/fn/symbol/iterator

对比 vue create element 命令前后的文件差异

搜索了好久，有说删除node-modules重装的，有说node、npm、core-js版本不对的，但这些都不是真正的原因。 最后在对比了vue create element-ui前后差异中，发现了问题的关键——babel配置 Vue CLI 使用了一套基于插件的架构，这使得 Vue CLI 灵活且可扩展

1.使用@vue/cli默认配置新建名为 vue-create-app 的项目

$ vue create vue-create-app

2.进入项目，初始化git，提交初始代码

$ cd vue-create-app
$ git init
$ git commit -m "vue create commit"

3.此时项目印象：

目录结构

node_modules
public
     > favicon.ico
     > index.html
 src
     > assets
          > logo.png
     > components
          > HelloWorld.vue
     > App.vue
     > main.js
 .gitignore
 babel.config.js
 package.json
 package.lock.json
 README.md

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

package.json

{
  "name": "vue-create-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-eslint": "^4.2.0",
    "@vue/cli-service": "^4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

4.vue add element—— import on demand——zh-CN

babel.config.js

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
+ "plugins": [
+   [
+     "component",
+     {
+       "libraryName": "element-ui",
+       "styleLibraryName": "theme-chalk"
+     }
+   ]
+ ]
}

package.json

{
  "name": "vue-create-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
+   "element-ui": "^2.4.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-eslint": "^4.2.0",
    "@vue/cli-service": "^4.2.0",
    "babel-eslint": "^10.0.3",
+   "babel-plugin-component": "^1.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
+   "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

解决方式1——安装插件，配置babel

"vue create projectName后vue add element"这种方式中的区别，主要在于多配置了babel插件

# 1.建立环境：（同上）
#   新建文件夹  `vue-serve-app` 
#   新建 `main.js` 文件
#   初始化 package.json 
$ package init -y

# 2.npm 下载element-ui包：（同上）
$ npm i element-ui -S

# 3.main.js 中引入element-ui（同上）

# 4.安装babel插件
$ vue add @vue/babel

# 安装好后发现，插件为我们创建了babel.config.js文件,同时package.json中可以看到为我们安装了依赖包
# babel.config.js
module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ]
}
# package.json
"dependencies": {
    "core-js": "^3.6.4",
    "element-ui": "^2.13.0"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.3"
}

# 运行后依然报错，于是在babel.config.js中增加插件配置
module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
# 再运行，报错提示缺少包 babel-plugin-component，于是下载安装
$ npm i babel-plugin-component -D
# 再运行，就可以正常执行了

解决方式2——vue add element

# 1.建立环境：（同上）
#   新建文件夹  `vue-serve-app` 
#   新建 `main.js` 文件
#   初始化 package.json 
$ package init -y

# 3.main.js 中引入element-ui（同上）

# 2.vue add element，安装element插件
$ vue add element

# 安装好后发现，插件在package.json中不但增加了element-ui开发，还增加了babel-plugin-component和vue-cli-plugin-element构建依赖，更值得一提的是，增加了非常关键的babel配置
# package.json
{
  "name": "vue-serve-app",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "main": "main.js",
  "dependencies": {
    "element-ui": "^2.4.5"
  },
  "devDependencies": {
    "babel-plugin-component": "^1.1.1",
    "vue-cli-plugin-element": "^1.0.1"
  },
  "keywords": [],
  "license": "ISC",
  "babel": {
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }
}

# 4.运行vue serve，成功！

总结

element-ui主要依赖两个构建包和babel配置， 可以自己安装， 也可以通过vue add element一键生成

  "dependencies": {
    "element-ui": "^2.4.5"
  },
  "devDependencies": {
    "babel-plugin-component": "^1.1.1",
    "vue-cli-plugin-element": "^1.0.1"
  },
  
"babel": {
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }

感悟

@vue/cli为我们提供了很方便的开发方式，但当你不明白一些cli插件内部原理时，遇到问题很可能会到处乱撞，不得要领。 插件内部包含一个文件生成器和一个运行时插件，通过对比的方式，我们可以知道cli插件的文件生成器对我们的文件做了什么，至于运行时插件（用来调整 webpack 核心配置和注入命令），可能就需要阅读文档加上自己的摸索来了解了