Heim > Artikel > Web-Frontend > So installieren Sie vue.js
So installieren Sie vue.js
- 藏色散人Original
- 2020-12-21 09:26:572096Durchsuche
So installieren Sie vue.js: 1. Laden Sie vue.js direkt von der offiziellen Website von Vue.js herunter und importieren Sie es mit dem <script>-Tag. 2. Verwenden Sie die CDN-Methode, um vue.js zu installieren . Verwenden Sie Taobaos Spiegel und seinen Befehl cnpm, um vue.js zu installieren. </script>
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.0. Diese Methode ist für alle Computermarken geeignet.
Verwandte Empfehlungen: „vue.js Tutorial“
Vue.js-Installation
1. Unabhängige Version
Wir können vue.min.js direkt von der offiziellen Website von Vue.js herunterladen und Tag-Einführung.
Download-Adresse: https://vuejs.org/js/vue.min.js
2. Verwenden Sie die CDN-Methode. Die folgenden zwei relativ stabilen CDNs werden im Ausland empfohlen. Ich habe kein besseres gefunden In China wird derzeit noch empfohlen, es lokal herunterzuladen.
Staticfile CDN (inländisch): https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg: https://unpkg.com/vue/dist/vue.js, ja Achten Sie darauf, dass es mit der neuesten von npm veröffentlichten Version konsistent ist.
cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
Staticfile CDN (inländisch)
<!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-Methode
Aufgrund der langsamen Installation Geschwindigkeit von npm, dieses Tutorial verwendet das Image von Taobao und seinen Befehl cnpm. Anweisungen zur Installation und Verwendung finden Sie unter: Verwenden des Taobao NPM-Image.
Die NPM-Version muss größer als 3.0 sein. Wenn sie niedriger als diese Version ist, müssen Sie sie aktualisieren:
# 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g
Es wird empfohlen, die NPM-Installation zu verwenden, wenn Sie große Anwendungen mit Vue.js erstellen:
# 最新稳定版 $ cnpm install vue
Befehlszeile Tool
Vue.js bietet ein offizielles Befehlszeilentool, mit dem schnell große Einzelseitenanwendungen erstellt werden können.
# 全局安装 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/webpackGeben Sie das Projekt ein, installieren Sie es und führen Sie es aus:
$ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms > Listening at http://localhost:8080
Nachdem Sie den obigen Befehl erfolgreich ausgeführt haben, greifen Sie auf http://localhost:8080/ zu. Das Ausgabeergebnis lautet wie folgt:
Hinweis: Vue.js funktioniert nicht Unterstützt IE8 und niedrigere IE-Versionen.
Das obige ist der detaillierte Inhalt vonSo installieren Sie vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!