Vue.js Installation

1. Standalone Version

We can directly download vue.min.js from the official Vue.js website and include it using the <script> tag.

Download Vue.js

2. Using CDN Method

Here are two recommended stable foreign CDNs. No particularly good domestic CDNs have been found yet, so it is currently recommended to download locally.

-

Staticfile CDN (China): https://cdn.staticfile.org/vue/2.2.2/vue.min.js

-

unpkg: https://unpkg.com/[email protected]/dist/vue.min.js

-

cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

Staticfile CDN (China)

<div id="app">
  <p>{{ message }}</p>
</div>

unpkg (Recommended)

<div id="app">
  <p>{{ message }}</p>
</div>

cdnjs

<div id="app">
  <p>{{ message }}</p>
</div>

3. NPM Method

Due to the slow speed of npm installation, this tutorial uses Taobao's mirror and its command cnpm. For installation instructions, refer to: Using Taobao NPM Mirror.

The npm version needs to be greater than 3.0, and if it is lower, it needs to be upgraded:

# Check version
$ npm -v
2.3.0

# Upgrade npm
cnpm install npm -g

# Upgrade or install cnpm
npm install cnpm -g

It is recommended to use cnpm for installing Vue.js when building large applications:

# Latest stable version
$ cnpm install vue

Command Line Tool

Vue.js provides an official command line tool that can be used to quickly set up large single-page applications.

# Globally install vue-cli
$ cnpm install --global vue-cli
# Create a new project based on the webpack template
$ vue init webpack my-project
# Some configuration is required here, press Enter for default settings
This will install the Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author tutorialpro <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

Enter the project, install, and run:

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

After successfully executing the above commands, visit http://localhost:8080/, and the output will be as follows:

>

Note: Vue.js does not support IE8 and below.

Vue Project Packaging

To package a Vue project, use the following command:

npm run build

After execution, a dist directory will be generated under the Vue project, typically containing an index.html file and a static directory. The static directory includes static files such as js, css, and an images directory.

If you directly double-click index.html to open it in a browser, the page might be blank. To display it correctly, you can modify the paths of the js and css files in the index.html file.

For example, if we open the dist/index.html file and see that the paths are absolute:

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>

We can change the js and css paths to relative paths:

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

This way, you can double-click the dist/index.html file and see the effect in the browser.