How to install vue.js-Vue.js-php.cn

How to install vue.js

藏色散人

Release： 2020-12-21 09:26:57

Original

2160 people have browsed it

How to install vue.js: 1. Download vue.min.js directly from the Vue.js official website and introduce it with the <script> tag; 2. Use the CDN method to install vue.js; 3. Use Taobao's image and its command cnpm to install vue.js. </script>

The operating environment of this tutorial: windows7 system, vue version 2.0. This method is suitable for all brands of computers.

Related recommendations: "vue.js Tutorial"

Vue.js installation

1, independent version

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

Download address: https://vuejs.org/js/vue.min.js

2. Using CDN method

The following are two relatively stable foreign CDNs recommended , I haven’t found any one that is better in China, and it is still recommended to download it locally.

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

unpkg: https://unpkg.com/vue /dist/vue.js, will remain consistent with the latest version released by npm.

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

Staticfile CDN (domestic)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>
unpkg（推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>
cdnjs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>

Copy after login

3. NPM method

Due to the slow installation speed of npm, this tutorial uses Taobao’s image and its command cnpm. For an introduction to installation and use, please refer to: Using 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:

# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g

Copy after login

It is recommended to use NPM installation when building large applications with Vue.js:

# 最新稳定版
$ cnpm install vue

Copy after login

Command Line tool

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

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install 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 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

Copy after login

Enter the project, install and run:

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms
 > Listening at http://localhost:8080

Copy after login

After successfully executing the above command, access http://localhost:8080/, the output result is as follows:

How to install vue.js

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

The above is the detailed content of How to install vue.js. For more information, please follow other related articles on the PHP Chinese website!