0x00.项目初始化
由于整个过程像素级 copy element，所以将不使用 vue-cli 初始化项目。
创建项目
新建一个空的文件夹，使用 npm init 来初始化项目，并安装vue模块。
修改目录结构
根目录中添加文件夹
根目录下创建项目配置文件: .gitignore README.md
public目录下，创建模板页文件: favicon.ico index.html
examples目录下，创建示例入口文件: App.vue main.js logo.png
0x01.wepack安装与配置
项目使用webpack实现模块化管理和打包。
局部安装webpack
webpack-cli 最新为 4.X 版本， webpack-dev-server 无法正常运行，安装时需要指定版本（确保两模块版本皆为 3.X ）。
webpack-cli 提供了许多命令来使 webpack 的工作变得简单。 官方文档
webpack-dev-server 为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能。 官方文档
安装 webpack loaders
webpack 使用 loader 对文件进行预处理。可以构建包括 JavaScript 在内的任何静态资源。
官方插件列表
webpack 插件中文文档
参考
vue-loader详解： https://segmentfault.com/a/1190000020629508
html-webpack-plugin详解： https://www.cnblogs.com/wonyun/p/6030090.html
webpack配置
在 build 目录下创建webpack配置文件 webpack.config.js ,提供 入口(entry) 、 模式（Mode） 、 输出(output) 、 模块（Module） 、 插件(Plugins) 、 开发服务器(DevServer) 等配置选项。
0x02.项目运行
npm scripts 配置
在npm脚本中新增webpack命令，执行的命令会自动去 node_modules 寻找，不用加上目录。
修改 package.json 配置
.
...
"scripts": {
"build:dist": "webpack --config build/webpack.config.js",
"dev": "webpack-dev-server --config build/webpack.config.js"
},
...
.
cross-env配置
cross-env是一款运行跨平台设置和使用环境变量的脚本，不同平台使用唯一指令，无需担心跨平台问题。
修改 package.json 配置
.
...
"scripts": {
"build:dist": "cross-env NODE_ENV=development webpack --config build/webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
},
...
.
运行测试
命令行窗口中，在该项目根目录下输入 npm run dev 即可进行本地开发调试。
成功运行后，项目第一个页面结果如下：
最终目录结构：
0x03.示例代码
https://github.com/andurils/code-examples/tree/main/learning-element2/step00
码字不易，如果觉得本篇文章对你有用的话，请给我点赞！后续会有更多的干货分享，请持续关注！
