Home > Article > Web Front-end > How to install vue.js
How to install vue.js
- 藏色散人Original
- 2020-12-21 09:26:572134browse
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: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</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: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</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: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>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
It is recommended to use NPM installation when building large applications with Vue.js:
# 最新稳定版 $ cnpm install vue
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/webpackEnter 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, access http://localhost:8080/, the output result is as follows:
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!