Today I’m going to talk about the construction of my first VUE scaffolding project. A lot of people are probably thinking, what is there to say about vue scaffolding? A vue init command is done. Having said that, a complete project should be more than just commands. Let’s cut to the chase.
The first step is to install the Node environment, download the Node installation package, and then install it on your computer. If the version is too low, you will need to download the latest Node installation package on your Windows system, and then reinstall it to the original installation path.
NPM install vue
Step 3: Install vue-cli NPM install –global vue-cli
Vue list init webpack project vue list init webpack project vue list
Browserify – Full featured Browserify + vueify, including hot loading, static detection, and unit testing browserify- Simple – an easy browserify + vueify for a quick start. Webpack — Fully featured Webpack + Vueify, including hot loading, static detection, unit testing WebPack-Simple — an easy webpack + Vueify for a quick start. Pwa – progressive web applications (and deep knowledge: https://blog.csdn.net/dadadeganhuo/article/details/78195634)
My project template is Webpack, project is the name of the project, but also the folder of the project development. Do you think that I should execute NPM install here? No! There is a lot to think about when building a complete project
Json. Add Route, vuex, JSON-server, AXIos, and less to devDependencies. Error: NPM ERR! Code EINTEGRITY… Error handling perform the following steps: NPM audit fix // Scans the project for vulnerabilities and automatically installs any compatible updates to vulnerable dependencies NPM audit fix -force Not only the Semver-compatible NPM Audit fix // scans the project for vulnerabilities and displays details without fixing anything at this point the VUE development environment is installed.
Step 6: Revise the project architecture according to the needs of the project. 1. Do you need to develop the project architecture as it is installed? Definitely not. From the perspective of long-term maintenance of the project. HTTP request processing, VUEX data processing and router management are best managed separately from templates. So I created an API folder, a Router folder, and a Store folder. Create folders for route components and common widgets to manage them separately. 2. Test the HTTP request to see if it works. Configure the JSON-server file and start it to see if it works. 3. Specify the HTTP request address in the development environment. You need to configure proxyTable parameters in config/index.js. Configuration items are proxyTable: {‘/API: {target: ‘http://172.16.124.43:8088’, changeOrigin: true, pathRewrite: {‘ ^ / API: “‘}}}
Step 7: Write a demo page test 1) Write a random demo component 2) create an initial-style CSS file (public static resources are best placed directly in the static folder, imported directly in index.html). 3) Package the project and browse the packaged project to see whether it can be displayed normally (mainly whether there is any error in the path after packaging). If some or all of the files are in error, you can change the value of the assetsPublicPath field.)
After the test is developed and packaged, the page is displayed as normal, and the construction of a project is complete.
Thank you for reading here, if you feel that the article is still ok, manually set the public number as a star, so that you can see our content for the first time, Thanksgiving ~. I hope to help you with your actual work. Thank you for your corrections.
