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