vue learning

Build a memo app with Vue + Webpack

The project framework mainly builds the process

1. Initialize the project

npm init
Copy the code

Generate package.json file

2. Install the basic package

npm i webpack vue vue-loader
Copy the code

Generate the node-modules folder and the packes-lock. json file

3. Create a SRC folder in the root directory

src

App.vue (top-level VUE component)

Main.js (entry file)

Create the webpack.config.js file

Configuration files used to package front-end resources

5. Add the “build” configuration to the scripts in the package.json file

"build":"webpack --config webpack.config.js"
Copy the code

Represents a call to the webpack in the project, not the global webPack.

6. Generate a package file

npm run build
Copy the code

7. Install packages or plug-ins to generate working HTML

npm i cross-env html-webpack-plugin webpack-dev-server
Copy the code

8. Change the “build” configuration and add the “dev” configuration in pack.json

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
Copy the code

9. Add relevant plug-ins to webpack.config.js and set the project access address

Const HTMLPlugin=require('html-webpack-plugin') // Generate HTML page plugin if(isDev){// facilitate code debugging Config. DevServer ={port:8091, // host:'localhost', Overlay :{errors:true, // overlay:{errors:true, // open:true // automatically open hot in browser: True // Implement hot loading, Local update} code changes after the implementation of the page config. Plugins. Push (new webpack. HotModuleReplacementPlugin (), new webpack. NoEmitOnErrorsPlugin ())}Copy the code

10. Run projects

npm run dev
Copy the code

Different VUE components are created for different projects, and various packages or plug-ins are installed as needed