Build Vue-webpack project with VUE-CLI Scaffolding tool (Turn)

For Vue.js, if you want to get started quickly, you just need to introduce a tag into your HTML <script> , plus the address of the CDN. However, this is not considered a complete Vue practical application. In the practical application, we must have a series of tools, including: Modularization, translation, pretreatment, thermal loading, static testing and automated testing. These tools are essential for a long-term maintenance and large-scale project, but it is painful to try to configure initialization. That's why we're releasing the scaffolding tools that Vue officially provides, a simple build tool that helps you build vue.js projects quickly with several default steps.

1. Installing the Node environment

You can use your own terminal cmd command-line tool; Windows recommends installing Git bash, which can be used with Linux commands;

The first step is to detect if node is installed, and if you do not install node, please download and install https://nodejs.org/en/download/

After the installation succeeds, view the node version on the command line if there is a description to install successfully.

2. Installing the Vue Scaffolding tool VUE-CLI

When you install node, you will automatically install NPM;

The NPM version can be viewed in advance;

To install VUE-CLI with NPM:

1	npm install vue-cli -g

3. The preparatory work has been completed, the following direct use of VUE-CLI to initialize the Webpack project;

Vue Init webpack yourprojectname (project name)

The middle will enter the project name, project description, author and other information;

Return

You can see that the Webpack project we just created has been built:

4. View the directory structure

Installation dependencies

1	$ npm install

Some of the domestic packages NPM cannot be installed and can be installed using CNPM

1	$ cnpm install

5. Start the Local development

1	npm run dev

　　

The local node server is running and the port is the port in the configuration file.

6. Configure Routing

Create a new page component, point the route to the. Vue file

Here, the Vue project created with VUE-CLI can be used to develop the basics, congratulations!

7. Package Online

1	$ npm run build

　

See build complete, proof of package success;

Look at the directory structure, found a dist folder, this is the Webpack packaging files, will be changed files and backstage consultation, in what form put to the server, on-line success.

This article from: http://www.cnblogs.com/tjyoung/p/6832234.html

Build Vue-webpack project with VUE-CLI Scaffolding tool (Turn)