Shulou(Shulou.com)06/03 Report--

This article focuses on "Vue Hello World application development steps", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the steps of developing Vue Hello World applications.

Install nodejs and npm, needless to say, a lot of tutorials online.

Create a new folder locally, run the command npm init after entering, and next all the way down to generate package.json automatically.

Run the command npm install-save-dev webpack-dev-server to install a lightweight server for local testing after the vue application has been developed.

Repeat the command npm install-save-dev, that is, paste the following command into cmd to execute:

Npm install-save-dev css-loadernpm install-save-devvue- template-compilernpm install-save-dev webpacknpm install-save-devvue- loadernpm install-save-devvue-router

The effect of the parameter-save-dev is to have these installed module appear in the devDependencies area of package.json, as shown in the red area in the following figure:

These are all development-time dependencies. We then install the runtime dependency with the following command:

Npm install-save vue vuex

Then manually add the following paragraph to package.json:

The goal is to use the command npm run dev to launch webpack-dev-server and run our vue application with the parameter-inline-hot after the development is complete.

Create a folder named src under the root directory of the project folder, create a new file index.vue in the folder, and copy the following:

H3 {color: red;} Jerry: Hello, Worldkeeper module.module = {data: function () {return {};}}

Go back to the root directory and create a new file, main.js:

Import Vue from 'vue';import AppJerry from'. / src/index.vue'new Vue ({el: "# demo", components: {app: AppJerry}})

This code first exports the application we implemented in the index.vue in the src folder, stores it in the variable AppJerry, and then installs the application in the div tag of the html page id as demo. Installation is done by creating an instance of Vue and passing the id of the div element into the constructor. Of course, we haven't created the html file yet, so create a file called index.html right away:

Hello world

We noticed that a dist/build.js file is referenced in this index.html. What is this file for?

Here we have to mention the important role of webpack in modern front-end development technology. WebPack can be thought of as a modular baler: what it does is analyze our front-end project structure, find JavaScript modules and other extension languages that browsers can't run directly, such as Scss,TypeScript, and package them into an appropriate format for browsers to use. For our example, webpack packages and converts the index.vue under our src folder into js files that the browser can recognize, and the output of webpack is the build.js file under the dist folder.

To give webpack a clear idea of what it wants to accomplish, we complete the webpack task assignment by creating a configuration file, webpack.config.js.

The contents of this configuration file:

Var path = require ('path') Module.exports = {entry:'. / main.js',output: {path: path.resolve (_ _ dirname,'. / dist'), publicPath:'/ dist/',filename: 'build.js'}, resolve: {alias: {' vue$': 'vue/dist/vue.esm.js'}}, module: {loaders: [{test: /\ .vue $/, loader:' vue-loader'}, {test: /\. (png | jpg | eot | svg | ttf | woff) / Loader: 'url?limit=40000'}]}}

It defines that the entry of webpack to execute the task is the main.js file, the output folder of the task is the dist directory in the project folder, the output file is build.js, and the file scanned by webpack is specified by vue-loader, characterized by files ending in .vue.

So far, the development and configuration of this Vue-based hello world application is over, isn't it easy?

We can test it.

If you type the webpack command directly on the command line, the packaging operation will be performed automatically, and you will see the message that the build.js file was successfully generated on the console:

The size of the packaged file is very large, with 323KB, which contains the content of vue.js itself and the converted content in our index.vue. The highlighted area below is the corresponding JavaScript code generated after the implementation in our index.vue is processed by webpack.

Launch webpack-dev-server using npm run dev and see a prompt that our application can be accessed on localhost:8080.

Visiting the browser and seeing the output of Hello World shows that we have successfully completed a webpack-based Vue application development process.

At this point, I believe that everyone on the "Vue Hello World application development steps" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.