vue-cli quickly builds vue applications and implements webpack packaging detailed explanation

What is Vue? It is a progressive framework for building user interfaces (explanation on the official website). What is a progressive framework? The simple answer is that it is the least advocated. These concepts can only be seen and understood by yourself. There are a thousand of them. The reader has a thousand Hamlets, but not too many explanations. The official Vue documentation is very comprehensive. This article mainly introduces the detailed explanation of vue-cli to quickly build vue applications and implement webpack packaging. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help everyone.

The two core ideas of Vue are componentization and data-driven. Componentization is to reasonably split the whole into small pieces (components). The components can be reused. Data-driven is the future development direction of the front-end. It releases the operation of the DOM, allowing the DOM to change naturally as the data changes (You Shen's original words). You don't need to pay too much attention to the DOM, you just need to organize the data.

1. What is vue-cli

vue-cli is a scaffolding officially released by vue to quickly build a vue single page. See vue-cli official website. http://vuejs-templates.github.io/webpack/

Before, you needed to use the single-file component function of vue, that is, to separate different templates into different files with the .vue suffix. To do so, you need to use webpack packaging.

Then there are many tutorials on the Internet about using webpack to package files

The method introduced in the above article is generally used. This requires you to configure a lot of files yourself, and the operation is complicated. Later I discovered that using vue-cli can achieve fast packaging with webpack. The specific operations will be introduced later

2. Install vue-cli (based on ubuntu operation)

1. Install node

sudo apt-get install nodejs

2. Install npm

sudo apt-get install npm

2. Use npm to install vue-cli

npm install --global vue-cli

Use vue -V to check whether the installation is successful.

#When installing vue-cli, webpack has been installed.

In this step, it may be slow, so you can use Taobao's image file. Please refer to: http://riny.net/2014/cnpm/

Set as follows:

npm install -g cnpm --registry=https://registry.npm.taobao.org

Then use cnpm to install vue-cli

cnpm install -g vue-cli

3. Generate project template vue init webpack vuedemo

webpack is the template name, here we need to use the packaging function of webpack, so use webpack, other more templates

vuedemo is the project name

After pressing Enter in the above command, the following settings will appear:

##Project description: Project description

Author: Author

Vue build: Packaging method (just press Enter)

Install ESL TO lint your code? Whether to use ESL code detection

Pick an ESLint preset? standard (set encoding The style is stardard)

Setup unit tets with Kara + mocha? Whether to install unit tests, I choose to install

Setup e2e tests with Nightwatc? Whether to install e2e tests, I choose to install

Enter the created project:

cd vuedemo (vuedemo here is the project name entered before)

Use the tree command to view the project directory structure as follows: (If there is no tree command , use sudo apt install tree to install)

#Install dependent libraries:

npm install

Compile program

npm run dev

At the same time, the following interface appears in the browser:

If it does not appear, your 8080 port may be occupied. , you can try changing the port in dev to other values ​​in config/index.js

4. Webpack packaging

The knowledge required here involves webpack

Compared with the tutorial about webpack mentioned above, we need to pay attention to the build/webpack.base.conf.js file under the project file

Here, we only need to pay attention to the two parameters of the annotation. As for where is the specific value of config.build.assetsRoot set? The third line:

var config = require('../config')

indicates where the introduction file of the config variable is added. The value of build.assetsRoot is defined in config/index under the project folder

where: __dirname is the absolute path to the folder of the project where the current file is located

At this time, we view the file directory as follows:

Run: npm run build. In this way, the resource files can be packaged into the ones we set above In the folder dist/

Check the directory structure of the project folder again:

The dist folder has been automatically generated at this time, and there is index under this folder .html file and public folder. The files stored in the public folder are the files packaged by webpack.

5. Summary:

In general, you can quickly use vue-cli to build a vue single page using webpack in just a few steps. Project:
1, sudo apt-get install nodejs

2, sudo apt-get install nmp

3, nmp install -g vue-cli

4, vue init webpack vuedemo

5、cd vuedemo

6、npm run dev

7、npm run bulid

Related recommendations:

Share an example tutorial on building a vue-cli project.

Summarize relevant examples about Vue-cli

Solution to the problem that stylus cannot be used in vue-cli

The above is the detailed content of vue-cli quickly builds vue applications and implements webpack packaging detailed explanation. For more information, please follow other related articles on the PHP Chinese website!