Vue development framework (detailed version)

Environment set up

  1. Installation node. Js:

    You can download the installation packages for various systems from the official website at nodejs.cn/download/

    1) If you are running Windows, simply download the.mSI installation file and install it

    2) If you are running Linux, there are many ways to install it. For details, see:

    Nodejs.org/en/download…

Check whether the installation is successful:

$node -v
Copy the code

  1. Install the NPM

    Nodejs has been integrated with the NPM package management tool, so no additional installation is required. Check whether the installation is successful:

    $npm -v                          
Copy the code

    Note: The NPM installation package is usually slow and frustrating. In this case, you can either FQ or install it from a domestic NPM source, such as: For convenience, taobao https://npm.taobao.org can install their customized CNPM command line tool to replace NPM (if you can’t access the Taobao domain name in your current environment, you can use other domestic sources provided later to install NPM package). The installation of the rear bread is based on the CNPM command

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

    The YARN management tool is recommended

    Yarn is a new JavaScript package management tool developed by Facebook, Google, Exponent and Tilde. As we can see from the official documentation, it is intended to address a few of the issues these teams face using NPM, namely:

    There is no guarantee of speed/consistency security during installation, because NPM allows code to run during installation. We can download YARN using NPM

    npm install -g yarn
Copy the code

Obtain framework

Now that the basic tools and requirements environment are covered, it is time to get the Vue scaffolding and enter the magical world of Vue + WebPack building by installing the NPM module VUE-CLI:

  1. Install vuE-CLI command line package module

    $ cnpm install -g vue-cli;
Copy the code

  2. Get vue+ WebPack infrastructure

    $vue init webpack <my-project-name> 
Copy the code

    When you get the frame, some options will appear, so press Enter to select the default value;

    That completes the basic framework, but it’s just a skeleton, like a human skeleton, and now we need to add some colorful content to the skeleton.

    The frame structure is as follows:

  3. Go to the framework directory you just created and install the required packages and all dependencies:

    $cd myvue
$cnpm install
Copy the code

    Quietly waiting to download the dependency packages required by the project

    After downloading the NPM module package, in the package.json file you can see which modules you have downloaded and their version numbers

    Note: If an error occurs during the module package installation process, it is best to delete the entire module directory node_modules/ and install again, because many dependencies if not successfully installed ok, easy to cause puzzling problems.

Vue $NPM run Dev = vue $NPM run dev = vue $NPM run dev