Starting from scratch using VUE-CLI to build a simple music website (i)

Recently, after learning the Vue framework and practicing some examples, I wanted to build a Vue project and learn about the official offer of a VUE-CLI tool to build scaffolding, try it, write a blog to record it.

First, the tool environment

1. Node. js 6.10.0, the latest version of node. JS is 8.7.0 and can be downloaded to the official website for installation. Links: http://nodejs.cn/download/

2, editor, Hbuilder 8.8.4

3. Windows 8.1

Ii. Creation of the project

1, install node. js, installed by default in "C:\Program Files\nodejs", The Package management tool NPM (for more information about node. js and NPM) is installed with node. JS and opens its own command-line editor, node. js command Prompt (with Windows cmd), Because NPM default global installation path is "C:\Users\dippe_000\AppData\Roaming\npm\node_modules", do not want to install on the C-drive, you can be modified by the following command:

NPM config set cache "E:\nodeJs\cache"

NPM config set prefix "E:\nodeJs"

2. Installation of VUE-CLI and Webpack

To the E-disk directory, enter the Run "NPM install-g vue-cli" and "NPM install-g Webpack" respectively, after the installation is completed in the "E:\nodeJs\node_modules" directory should be able to see "vue-cli" and " Webpack "folder, instructions have been installed successfully, if the installation error here, you can try the following two ways:

First: Run the command line as an administrator

The second type: Enter the following command directly in the current directory

　　　　NPM config set http-proxy null

NPM Config Set Registry http://registry.cnpmjs.org/

3. Build the project with VUE-CLI

Create a new working directory on the E-disk as a project directory, such as "E:\workspaces\Hbuilder", and then enter "CD E:\workspaces\Hbuilder" into the directory under the command line, enter "Vue Init Webpack vuetest"Initializes a Vue project. As follows:

The meanings of all the above choices are:

Project name

Project description (item description)

Author (author)

Here is an option (I choose the first one)

Runtime + compiler:recommended for most users (run plus compile)

runtime-only:about 6KB Lighter min+gzip, but templates (or any vue-specifichtml)is only allowed in. Vue Files-render functions is required elsewhere  run-time only

Install Vue-router? (y/n) (if Vue-router is installed, I choose to install)

Use ESLint to lint your code? (y/n) (whether to use Eslint to manage code, I choose No)

Setup unit tests with Karma + Mocha? (y/n) (whether to install unit tests, I choose to install)

Setup e2e tests with Nightwatch (y/n)? (If I install E2E test, I choose to install)

here, the construction completed, the use of VUE-CLI construction project information, you can refer to: http://www.jianshu.com/p/2769efeaa10a, Xuan Mu

4. Install Node_modules and run the project

Execute the following command, respectively:

CD Vuetest

NPM Install

NPM Run Dev

The first line is in the new Vuetest directory, and the second line of NPM install creates a new Node_modules directory under the current directory and installs all dependent kits. Because the toolkit is large, it takes a long time. The third sentence is to run the project on the local server, which can be accessed via the browser, the default address is: "http://localhost:8080"

If the last step is an error, you can try the following methods:

First: Port 8080 is occupied, open project "config\index.js" file modified port:8080 to other port

Second: The computer cannot find the default browser, try to change the default browser to another browser

If successful, you will see the following results in your browser:

PostScript: This article mainly records how to use VUE-CLI to generate a Vue project, the following article will be recorded how to use the scaffold to build a music website, because I do not have much experience, all the implementation is their own step-by-step groping, there may be many places did not consider good, I hope you can put forward your views and exchanges.

Reference Links:

node. js Download: http://nodejs.cn/download/

Use of VUE-CLI: http://www.jianshu.com/p/2769efeaa10a

VUE-CLI build project in detail: http://blog.csdn.net/hongchh/article/details/55113751

Starting from scratch using VUE-CLI to build a simple music website (i)