Vue-cli (1) Building the project

vue-cli is an official release vue.js project scaffolding, you can use vue-cli to quickly create vue projects.

The GitHub address is: https://github.com/vuejs/vue-cli

Install node.js

The premise of installing vue-cli is that you have installed npm. To install npm, you can directly download the installation package of node for installation, and you can directly go to the Chinese official website http://nodejs.cn/ to download the installation package.

After the installation is complete, you can enter node -v and npm -v in the command line tool. If the version number is displayed, the installation is successful.

Install vue-cli

With node installed, we can directly install vue-cli globally:

npm install -g vue-cli

However, this installation method is relatively slow, and it is recommended to use domestic mirrors to install, so we first set up cnpm and use cnpm to install

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

If the installation fails, you can use npm cache clean to clean the cache before reinstalling. In the subsequent installation process, if the installation fails, you also need to clear the cache first.

You can also use cnpm -v to see if the installation was successful

Then use cnpm to install vue-cli and webpack. The latest vue project templates all have webpack plugins, so you don't have to install webpack here.

cnpm install -g vue-cli

After the installation is complete, you can use vue -V (note the capital V) to see if the installation was successful.

build project

We use the vue init command to initialize the project, and let's take a look at how this command is used.

vue init <template-name> <project-name>

init: Indicates that I want to use vue-cli to initialize the project

<template-name>: Indicates the template name, vue-cli officially provides us with 5 templates,

    webpack - A comprehensive webpack+vue-loader template with features including hot loading, linting, detection and CSS extensions.

    webpack-simple-a simple webpack+vue-loader template that does not contain other functions, allowing you to quickly build a vue development environment.

    browserify - A comprehensive Browserify+vueify template with features including hot loading, linting, unit detection.

    browserify-simple- a simple Browserify+vueify template that does not contain other functions, allowing you to quickly build a vue development environment.

    simple - One of the simplest single page application templates.

<project-name>: identifies the project name, you can name it according to your own project.

In actual development, we generally use the webpack template, then we also install this template here, enter the following command on the command line:

vue init webpack vuecliTest

After entering the command, we will be asked a few simple options, we can fill in according to our needs.

• Project name : The project name, if you don't need to change it, just press Enter. Note: no uppercase is allowed here, so I changed the name to vueclitest
• Project description: The project description, the default is A Vue.js project, press Enter directly, no need to write.
• Author: Author, if you have an author who configures git, he will read.
• Install vue-router? Whether to install the vue routing plugin, we need to install it here, so choose Y
• Use ESLint to lint your code? Whether to use ESLint to limit your code errors and style. We don't need to enter n here, if you are developing in a large team, it is best to configure it.
• setup unit tests with Karma + Mocha? Do you need to install the unit test tool Karma+Mocha, we don't need it here, so enter n.
• Setup e2e tests with Nightwatch? Whether to install e2e for user behavior simulation test, we don't need it here, so enter n

The above text appears on the command line, indicating that we have initialized the first step. The command line suggests three things we can do now.

1. cd vuecliTest to enter our vue project directory.

2. cnpm install installs our project dependency packages, that is, installs the packages in package.json. If your network speed is not good, you can also use cnpm install to install.

3. Run our program in npm run dev development mode. It automatically builds a development server environment for us and opens it in a browser, and monitors our code changes in real time and presents them to us in real time.

This page appears, indicating that our initialization has been successful, and now we can play happily.

Project packaging and online

Packaging with npm run build from the command line

npm run build

After the package is completed, there will be an additional dist directory in the project directory. This is the packaged code, which can be directly deployed.

Before packaging, it should be noted that the absolute path needs to be changed to a relative path. The change method is as follows:

Open config/index.js and you will see a build property, here is the basic configuration we packaged. You can modify the packaged directory and packaged filename here. The most important thing is to change the absolute directory to the relative directory.

assetsPublicPath:'./'