0x00. Project initialization

Since the entire process copies elements at the pixel level, the vue-CLI project will not be initialized.

Create a project

Create an empty folder, initialize the project with NPM init, and install the VUE module.

Modifying the directory Structure

Add folders to the root directory

Create the project configuration file in the.gitignore readme. md public directory. Create the template page file in the favicon.ico index.html examples directory. App.vue main.js logo.png

0x01.wepack installation and configuration

Projects use WebPack for modular management and packaging.

Partial installation of webpack

The latest version of webpack-CLI is 4.X. Webpack-dev-server cannot run properly. You need to specify the version during installation (ensure that the versions of both modules are 3.X).

Webpack – CLI provides a number of commands to make Webpack’s work easy. Webpack-dev-server provides you with a simple Web server with live reloading. The official documentation

Install webpack loaders

Webpack uses loader to preprocess files. You can build any static resource, including JavaScript. Official plug-in list WebPack plug-in Chinese document

Reference the vue – loader a: segmentfault.com/a/119000002… HTML – webpack – plugin a: www.cnblogs.com/wonyun/p/60…

Webpack configuration

Create webpack configuration file webpack.config.js in build directory to provide entry, Mode, output, Module, Plugins, DevServer and other configuration options. The official documentation

0x02. Project running

NPM scripts to configure

Add webpack command to NPM script, the command will be automatically searched for node_modules, no directory added.

Modify package.json configuration

."scripts": { 
    "build:dist": "webpack --config build/webpack.config.js"."dev": "webpack-dev-server --config build/webpack.config.js"},... .Copy the code

Cross – env configuration

Cross-env is a script that runs cross-platform Settings and uses environment variables, using unique directives for different platforms without worrying about cross-platform issues.

Modify package.json configuration

."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"},... .Copy the code

Run the test

In the command line window, enter NPM run dev in the root directory of the project to perform local development debugging.

After successful operation, the result of the first page of the project is as follows:

Final directory structure

0x03. Sample code

Github Repo

0x04. Link summary

Click on the links below for a quick look at other articles in this series:

ElementUI 2.X source code learning: build from scratch Vue component library summary

Column /ElementUI 2.X source code learning