home PYTHONJAVA
 

Vue.js installation

1, standalone version

We can download vue.min.js directly from Vue.js' official website and introduce it with the <script> tag.

Download Vue.js


2, using the CDN method

The following two CDNs that are relatively stable abroad are recommended. It has not been found in China. It is recommended to download them locally.

Staticfile CDN (domestic)

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

unpkg(recommend)

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

cdnjs

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


3, NPM method

Because npm installation is slow, this tutorial uses Taobao's image and its command cnpm, installation and use reference: Use Taobao NPM image.

The npm version needs to be greater than 3.0, if it is lower than this version you need to upgrade it:

# View version
$ npm -v
2.3.0

#Upgrade npm
Cnpm install npm -g


# Upgrade or install cnpm
Npm install cnpm -g

The NPM installation is recommended when building large apps with Vue.js:

# Latest Stable Edition
$ cnpm install vue

Command line tool

Vue.js provides an official command line tool for quickly building large single page applications.

# Global Installation vue-cli
$ cnpm install --global vue-cli
# Create a new project based on webpack template
$ vue init webpack my-project
# Here you need to do some configuration, you can press Enter by default
This will install Vue 2.x version of the template< Span class="pun">.

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

? Project Name my-project
? Project Description A Vue.js project
? Author Runoob <test@runoob.com>
? 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

Go to 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 command, visit http://localhost:8080/ and the output is as follows:

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


Run Vue.js in Cloud Studio

The following describes how to install and use Vue.js in Cloud Studio:

Ul>
  • step1: Visit the Tencent Cloud Developer Platform to sign up/login.

  • step2: In the context menu on the right, select: "Node.js"

  • step3: in the code listing on the left Create a new html directory and write your HTML code, such as index.html

  • step4: We recommend linking to a specific version number that you can manually update:

    <script src< /span>="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"< /span>></script>

    You can browse the source of the NPM package at cdn.jsdelivr.net/npm/vue Code. Vue is also available at cdnjs gets (the version update of cdnjs may be slightly delayed).

  • step5: NPM installation is recommended when building large apps with Vue:

    # Latest Stable Edition
    $ npm install vue
  • step6: Vue.js provides an official command line tool for quickly building large single-page applications.

    # Global Installation vue-cli
    $ cnpm install --global vue-cli
    # Create a new project based on webpack template
    $ vue init webpack my-project
    # Here you need to do some configuration, you can press Enter by default

    Go into the project, install and run:

    $ cd my-< /span>project
    $ cnpm install
    $ cnpm run dev
     DONE Compiled successfully in 4388ms
    
    > Listening at http://localhost:8080
  • step6: Click the [Access Link] tab on the far right, fill in the port number in the access link panel: 8080 (consistent with the port number in the previous configuration file), click the Create link, and click The generated link accesses the code we just wrote to see the Vue.js effect.

  • Now CODING is hosting a [My Favorite Cloud Studio Plugin Selection Contest] based on the Cloud Studio workspace. Go to the event website: https://studio.qcloud.coding. Net/campaign/favorite-plugins/index for more event information.






    welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.