转载：ElementUI源码系列一 - 从零搭建项目架构，项目准备、项目打包、项目测试流程

标签：文件 vue ElementUI 项目 js webpack 源码 组件

创建入口文件

首先，在你的电脑里寻找一个风水宝地，创建一个文件夹，通过 npm init -y
，初始化 package.json
文件；创建 src
文件夹，在它下面创建 src/index.js
入口文件，它是我们项目的总入口文件。

 

 

 

创建第一个组件

其次，我们来创建项目的第一个组件，先在 src
文件夹 同级 下创建 packages
文件夹，它后续会存放我们项目中的每一个组件源码；再创建第一个组件 button
的结构目录，具体如下：

 

 

 后续每个组件都会在 package
文件夹下有对应名称的文件夹，它主要由一个 index.js
主文件，和 src
文件夹组成，这和 element-ui 源码结构是一样的，都是基操，就不多说了，看着建就完事。

编写入口文件与组件内容

入口文件（src/index.js
）的工作就是引入注册所有组件，并对外提供 install()
方法，供给 Vue.use()
方法使用。

import Button from '../packages/Button/index.js'

const components = [Button]

const install = (Vue) => {
    components.forEach(component=>{
        Vue.component(component.name, component) // 每个组件需提供name属性
    })
}

export default {
    install,
    Button
}

　　

button.vue
组件我们先简单随便写点东西。

<template>
  <div>
    第一个button组件
  </div>
</template>

<script>
export default {
    name: 'ElButton'
}
</script>

　　

button/index.js
组件名称我们先按 element-ui
本身的名称来，当然，你也能随便改，这不是重点，代码如下：

import ElButton from './src/button.vue' // .vue后缀不可省略

ElButton.install = (Vue) => {
    Vue.component(ElButton.name, ElButton);
}

export default ElButton

　　

在编写 button/index.js
文件的时候，有两个需要注意的地方：一就是文件后缀的问题，因为我们项目是从零开始搭建的，没有任何其他辅助工具，所以在引入一个文件的时候，必须提供一个完整的路径。很多时候，我们已经习惯了引入文件时，省略 .js
、 .vue
和 .ts
等后缀，但这不是一个与生俱来的“能力”，那是因为我们有各种 cli
工具的集成辅助，当然，后面我们集成 webpack
后也能配置该能力；第二个需要注意的地方是在组件身上挂载 install()
方法，它的作用提供组件的 按需加载 能力，后续文章会写到，可以先不管。

打包

通过上面步骤，项目的准备工作就做完了，下面需要对项目进行打包操作，我们和 ElementUI
一样采用 webpack
来打包。

引入webpack

我们会用到两个 webpack
相关的包，为了保证不会出现不必要的麻烦，你可以先和我保持一样的版本：

安装命令，在项目根目录下执行：npm install webpack@4.14.0 webpack-cli@3.0.8 -D 或者 yarn add webpack@4.14.0 webpack-cli@3.0.8 -D

之后在项目根目录下，新建 build
文件夹，它存放项目打包的一切相关配置文件，再创建 build/webpack.common.js
配置文件，如下：

 

 

 编写 webpack
的基本配置：

const path = require('path')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(process.cwd(), './lib'),
        filename: 'element-ui.common.js',
        libraryTarget: 'commonjs2', // 将库的返回值分配给module.exports
    }
}

　　

处理 .vue文件

因为我们编写的组件用的是 .vue
后缀的文件， webpack
可不认识这类型的文件，webpack
只识别 .js
与 .json
文件，其他所有类型的文件，都需要找到相关的 loader
处理后才能交给 webpack
。
（loader
是 webpack
的核心内容，这里就不多讲了，不懂的可以先找些文章瞅瞅）

处理 .vue
文件我们主要会用到两个包：npm install vue-loader@15.7.0 vue-template-compiler@2.6.14 -D 或者 yarn add vue-loader@15.7.0 vue-template-compiler@2.6.14 -D

编写配置文件：

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(process.cwd(), './lib'),
        filename: 'element-ui.common.js',
        libraryTarget: 'commonjs2', // 将库的返回值分配给module.exports
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        preserveWhitespace: false, // 打包后清除多余的空格
                    }
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

　　

配置命令行打包

写好配置文件后，我们再配置打包命令，方便后续的打包工作。

package.json 文件内容如下：

{
  "name": "ele_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config build/webpack.common.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "15.7.0",
    "vue-template-compiler": "2.6.14",
    "webpack": "4.14.0",
    "webpack-cli": "3.0.8"
  }
}

　　

执行打包命令

配置完打包命令后，我们执行它（npm run build 或者 yarn build），在项目的根目录下的 lib文件夹应该可以生成一个 element-ui.common.js文件。

 

 

 

测试

做到这里到这里，项目前期的工作就做完了，下面我们步入测试阶段，写了那么多，是骡子是马要拉到页面上遛遛。

下面会介绍两种测试项目的方式：

方式一：项目打包成本地npm包

• 修改 package.json
  文件的 main
  配置项，改成打包后生成的文件。

{
  "name": "ele_study",
  "version": "1.0.0",
  "description": "",
  "main": "lib/element-ui.common.js",
  "scripts": {
    "build": "webpack --config build/webpack.common.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "15.7.0",
    "vue-template-compiler": "2.6.14",
    "webpack": "4.14.0",
    "webpack-cli": "3.0.8"
  }
}

　　

执行 npm pack 或者 yarn pack 命令，生成 .tgz包。

 

 

下载本地的 npm

包到实际项目中使用。我们先随便初始化一个 Vue项目，在D:\vuepro下执行

vue create uitest(项目名，可以随意取)

然后我们在新项目中下载我们刚刚生成的本地 npm包。

npm install D:\vuepro\ele_study\ele_study-v1.0.0.tgz(本地放置tgz包的全路径)

下完后，你的 Vue项目的 package.json文件会多一个包，之后就能和正常下载的 npm 包一样使用了。

 

 

 在项目的 main.js文件中全局导入。

import juejinElementUI from 'juejin-element-ui';
Vue.use(juejinElementUI);

　　

在页面中具体使用。

<template>
  <div id="app">
    <el-button></el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

　　

能看到组件被正常识别，就大功告成了。这过程还是比较容易出错，多注意是否有重新打包、重新下载、重新启动项目等。٩(๑❛ᴗ❛๑)۶

方式二：html文件快速测试.vue文件

创建一个 .html文件。我们在项目中创建 examples文件夹，在它下面创建一个 .html文件。

 

 

主要是借用 http-vue-loader 包来处理 .vue文件，对它不熟悉的小伙伴可以自行了解一下。

把 button.vue文件 export default改成 module.exports = {}形式。

<template>
    <div>第一个组件-button组件</div>
  </template>
  
  <script>
  // export default {
  module.exports = {
    name: 'ElButton'
  };
  </script>
  
  <style scoped>
  </style>

　　

在index.html根目录启动一个http服务器，访问index.html即可

 

原文链接：https://www.modb.pro/db/467535

标签：文件,vue,ElementUI,项目,js,webpack,源码,组件
From： https://www.cnblogs.com/fanqieyuanzi/p/16792488.html