Vue---我们一起用Vue-cli3.0改造升级ElementUI组件库

前言

这篇文章主要讲述我们如何利用现有的Vue脚手架去搭建并升级Elemen的组件库,适合利用Vue改造和升级自己的组件库的小伙伴.
话不多说,我们开始吧~

一. 环境配置

话说磨刀不费砍材功,在做所有的事情之前,我们都要准备好我们的工具

• nodeJs
  如果你还没有准备好nodeJs,那么笔者已经为小伙伴们准备好了链接, 推荐使用.msi安装(笔者在成百上千次的安装过程中,知道了.msi安装才会自动配置小伙伴电脑的环境变量,什么是环境变量,这个暂时不说)
• Vue CLI
  安装Vue CLI ,命令如下

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果小伙伴的电脑里面没有yarn这个命令,那么试试下面这个命令,全局安装我们的yarn

npm install -g yarn

到了这一步,我们已经可以使用vue 命令了

二.创建项目

我们使用以下命令创建我们的项目

yarn create 项目名称

接下来就是项目的配置

第一个选项是默认的配置,第二个选项是vue3的配置,第三个配置是手动配置.我们在这里选择手动配置,方便我们处理项目的细节.

我们使用空格键完成选项的选择与取消,回车键完成选取项的确定,以下是笔者的项目配置

接下来选择具体的选项配置,如vue的版本,是否使用css编译器等等

选择vue的版本号

因为笔者的配置项中选择了vue-router配置项,故此处告诉我们是否启用history模式的路由,关于路由的模式有两种,有兴趣的小伙伴可以去了解下路由模式

选择css预编译处理器,更好的编写我们的css样式, 笔者选择第二选项

接下来选择单元测试,笔者也选择第二选项

最后一步选择配置文件是否分开,还是全部集中在package.json里面.笔者选择配置文件分开,更便于配置

接下来将会根据你对项目的配置下载对应的依赖包

还需要在我们的项目中安装ElementUI,使用以下命令安装好你的ElementUI

npm install -S element-ui
项目创建到此处就算完成了,接下来我们来改造我们的项目

三.改造项目

(1)改造第一步 创建vue.config.js 完成更详细的配置

关于vue.config.js更为详细的配置 请小伙伴们看 vue.config.js 以下是笔者的配置

module.exports = {
   
    /*如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建*/
    //productionSourceMap: false,
    /*设置dev服务端口*/
    devServer: {
   
        port: 8080,
    },
    /*
     * 应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/ 或者 ./
     */
    publicPath: './',
    /*当运行 vue-cli-service build 时生成的生产环境构建文件的目录*/
    outputDir: 'dist',
    /*放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录*/
    assetsDir: 'assets',
    /*指定生成的 index.html 的输出路径 (相对于 outputDir)*/
    indexPath: 'index.html',
    /*
     * 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。
     * 然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。
     * 如果你无法使用 Vue CLI 生成的 index HTML࿰