Practices for using Webpack to build Vue projects, and using webpack to build vue

Practices for using Webpack to build Vue projects, and using webpack to build vue

Recently, some vue + webpack-based attempts have been made in internal projects. After a small scope of discussions with colleagues, many people agree and like it. So I will share this article with more people.

Install the node environment before you start. (The installation process is not too long here)

1. Create a basic structure. First, create an empty folder (todos here, you can name it as needed) as the root directory of the project. Create a package. json without any dependency. You can use the command line npm init to create a package. json.

Configure the basic information. Create an index.html file, which is displayed in the browser.

Note: 1. This field does not exist for the time being. 2. The data will be filled in by the vue file. Create a src folder and create a main. js file in the folder:

In this way, we have completed a vuejs skeleton, but how can we make it run in a browser? At this time, we need to use webpack to package it into a js file.

2. Create a webpack. config. js file based on the Basic webpack:

Install webpack in the command line:

To install the local library (as dev dependencies), add the devDependencies section in package. js:

Save and run: npm install. Then, the vuejs library is installed in your dependencies:

Finally, run webpack for packaging:

3. What are vue-loader and. vue files? Vue-loader is the loader plug-in webpack. You can output the. vue file as a component. Create a folder named component and create a new app. vue file in the folder. The content of app. vue is as follows:

Modify the main. js Code as follows:

Run it again and we can see an error:

Webpack

I don't know how to deal with the new syntax of. vue. Therefore, you need to modify the webpack configuration file:

At the same time, add some libraries to package. json:

After the new library is added, re-install npm to download the dependency package and re-package it:

Refresh the browser to view the latest page. 4. Hot module substitution/hot update hot module substitution or hot update is the most popular technology today. It allows you to save JavaScript files and update the corresponding components in real time. First, we need to use the webpack dev server. Modify Your devDependencies in package. json.

Then run cnpm install in the Command window. Download the dependency package, download webpack-dev-server, execute the command line cnpm install-g webpack-dev-server, and add the script to package. json.

Run the command line npm run dev:

Here we can see a large part of content. We need to run http: // localhost: 8080/to see the effect. It is worth mentioning that we used webpack. config. the publicPath is not set in js, but if you use webpack-dev-server, you will find that this will not be updated. Let's test: comment out the publicPath in the package. json file:

The app. vue code is as follows:

Enter the npm run dev command and display it in the browser:

When you change the page:

Refresh the browser and the display remains unchanged. In this case, if you cancel the publicPath annotation, re-enter the command line, refresh the browser, and the update is displayed:

You do not need to re-enter the command line. After the code is modified, it will be updated. At this time, you will find that if we modify the html in the template, the browser will change in seconds and do not need to refresh the browser. For example:

However, if you update data, you must refresh the browser. (It took me almost half an hour to know about this situation. I thought it was because I had a problem with the code. I found that I didn't need to refresh the template when I updated it, the data in the update must be refreshed. I don't know why .)

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.