组件封装小试：使用Vue CLI3基于Element-ui进行组件封装

由于很多组件需要在不同的项目中复用，考虑到维护成本，这段时间写了个vue cli3进行组件封装，并上传到npm；

环境搭建和项目初始化

1）若电脑上没有安装过nodejs，首先需要从官网下载https://nodejs.org/安装包，并进行安装

检查电脑是否有安装nodejs，打开命令行工具，输入node -v,例如如下，代表已经安装了node：

 

 

 

2）安装vue/cli

 

 

 

 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

 

 

3）使用Vue CLI3来初始化项目

 

 

 按住键盘的上下箭头可以选择，但是我的电脑上选择不了，查了下资料众说纷纭，一个简单的办法是在vscode的终端执行，便可以进行选择；

4）安装element ui

执行命令 vue add element

 

 

 按照自己的需求是选中按需引入还是全部引入，由于我们是基于element-ui的部分组件做的二次封装，所以最好还是按需引入所依赖的组件比较好；

这样在项目中src下，就会新建一个plugins文件夹，里面有个element.js 文件，如果想手动引入，就在这里添加要依赖的组件，这里是为了调试组件：

import Vue from 'vue'
import { 
  Button, 
  Dialog 
} from 'element-ui'

Vue.use(Button)
Vue.use(Dialog)

View Code