Anweisungen zur Verwendung des Vue-cli-Gerüstwerkzeugs und zur Projektkonfiguration

Vue-cli-Gerüsttool-Nutzung und Projektkonfigurationsanweisungen

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie ziehen Front-End-Frameworks immer mehr Aufmerksamkeit von Entwicklern auf sich. Als führender Anbieter von Front-End-Frameworks wird Vue.js häufig bei der Entwicklung verschiedener Webanwendungen eingesetzt. Vue-cli ist ein befehlszeilenbasiertes Gerüst, das offiziell von Vue.js bereitgestellt wird. Es kann Entwicklern helfen, die Vue.js-Projektstruktur schnell zu initialisieren, sodass wir uns mehr auf die Geschäftsentwicklung konzentrieren können. In diesem Artikel werden die Installation und Verwendung von Vue-cli sowie die grundlegende Projektkonfiguration vorgestellt.

1. Installieren Sie Vue-cli

Wenn Sie Node.js noch nicht installiert haben, müssen Sie zuerst Node.js installieren. Bitte suchen Sie nach Möglichkeiten, Node.js selbst zu installieren.

Geben Sie nach der Installation von Node.js den folgenden Befehl in die Befehlszeile ein, um Vue-cli zu installieren:

npm install -g vue-cli

Dieser Befehl installiert vue-cli in der globalen Umgebung.

Hinweis: Sollten während des Installationsvorgangs unzureichende Berechtigungen auftreten, verwenden Sie bitte den Befehl sudo oder führen Sie die Befehlszeile als Administrator aus.

2. Verwenden Sie Vue-cli, um Projekte zu erstellen

Nach der Installation von Vue-cli können wir damit beginnen, Projekte zu erstellen. Geben Sie in der Befehlszeile den folgenden Befehl ein, um ein Vue.js-Projekt basierend auf der Webpack-Vorlage zu erstellen:

vue init webpack my-project

Nachdem dieser Befehl ausgeführt wurde, werden Ihnen einige Fragen gestellt, z. B. Projektname, Projektbeschreibung, Autor usw. Sie Sie können Ihren eigenen Anforderungen folgen. Nach dem Ausfüllen wird eine Projektvorlage für uns erstellt.

Abhängigkeiten installieren:

npm install

Nach der Ausführung des obigen Befehls werden die Abhängigkeiten von package.json installiert. package.json中安装依赖。

运行项目：

npm run dev

三、基本项目配置

1. 项目结构

• build：项目构建打包相关配置文件夹
• config：项目配置文件夹
• node_modules：项目依赖包文件夹
• src：项目代码文件夹，包括组件、模板、静态资源等
• static：项目静态资源文件夹，例如图片、字体等
• test：项目测试文件夹
• .babelrc：Babel 配置文件
• .editorconfig：代码风格配置文件
• .gitignore：Git 版本控制忽略文件
• .postcssrc.js：PostCSS 配置文件
• index.html：项目页面入口文件
• package.json：项目配置文件

2. 环境变量配置

项目中可以设置不同环境变量，如开发环境、测试环境和生产环境。Vue-cli 默认提供了三种环境模式，分别是：development（开发环境）、testing（测试环境）和 production（生产环境）。

在项目根目录下的 config 文件夹中，有一个 index.js 文件，里面包含了各种不同环境下的配置信息。我们可以根据需要修改对应的配置信息。

比如，我们可以在 index.js 文件中为开发环境和生产环境分别设置不同的 API 地址：

module.exports = {
  // 开发环境
  dev: {
    env: require('./dev.env'),
    port: 8080,
    api: 'http://localhost:3000'
    ...
  },
  // 生产环境
  build: {
    env: require('./prod.env'),
    api: 'http://api.example.com'
    ...
  }
}

在代码中我们可以通过 process.env.NODE_ENV 来获取当前环境，从而获取对应的 API 地址：

const API_URL = process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/api/'

3. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，可以用于管理全局状态，比如登录状态、语言、主题等等。

在创建项目模板时，可以选择是否使用 Vuex，在项目中也可以随时添加或移除 Vuex。

安装 Vuex：

npm install vuex --save

在项目中使用 Vuex，首先需要在main.js文件中引入 Vuex，并注册到 Vue 实例中：

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

接下来，在 src

Führen Sie das Projekt aus:

export default {
  state: {
    isLogged: false,
    user: {}
  },
  mutations: {
    SET_LOGIN_STATUS (state, payload) {
      state.isLogged = payload.isLogged
      state.user = payload.user
    }
  }
}

3. Grundlegende Projektkonfiguration

1. Projektstruktur

• build: Projekt-Build- und Verpackungs-bezogener Konfigurationsordner
config: Projektkonfigurationsordner
• node_modules: Projektabhängigkeitspaketordner
• src: Projektcodeordner, einschließlich Komponenten, Vorlagen, statischer Ressourcen usw.
• statisch: statischer Projektressourcenordner, wie Bilder, Schriftarten usw.
• test: Projekttestordner
• .babelrc: Babel-Konfigurationsdatei
• .editorconfig : Codestil-Konfigurationsdatei
• .gitignore: Git-Versionskontroll-Ignorierungsdatei
• .postcssrc.js: PostCSS-Konfigurationsdatei
• index.html: Projektseiteneintragsdatei
• package.json: Projektkonfigurationsdatei

2. Umgebungsvariablenkonfiguration

Verschiedene Umgebungen können festgelegt werden im Projekt Variablen wie Entwicklungsumgebung, Testumgebung und Produktionsumgebung. Vue-cli bietet standardmäßig drei Umgebungsmodi: Entwicklung (Entwicklungsumgebung), Testen (Testumgebung) und Produktion (Produktionsumgebung).

Im Ordner config im Projektstammverzeichnis befindet sich eine Datei index.js, die Konfigurationsinformationen für verschiedene Umgebungen enthält. Wir können die entsprechenden Konfigurationsinformationen nach Bedarf ändern.

Zum Beispiel können wir in der Datei index.js unterschiedliche API-Adressen für die Entwicklungsumgebung und die Produktionsumgebung festlegen: 🎜

// 获取状态
this.$store.state.isLogged

// 修改状态
this.$store.commit('SET_LOGIN_STATUS', {
  isLogged: true,
  user: {
    name: 'Tom',
    age: 18
  }
})

🎜Im Code können wir die aktuelle Umgebung über process.env abrufen. NODE_ENV, um die entsprechende API-Adresse zu erhalten: 🎜rrreee

3. Vuex

🎜Vuex ist ein Statusverwaltungsmodus, der speziell für Vue.js-Anwendungen entwickelt wurde und mit dem verwaltet werden kann globaler Status, wie Anmeldestatus, Sprache, Thema usw. 🎜🎜Beim Erstellen einer Projektvorlage können Sie wählen, ob Sie Vuex verwenden möchten, und Sie können Vuex jederzeit im Projekt hinzufügen oder entfernen. 🎜🎜Vuex installieren: 🎜rrreee🎜Um Vuex im Projekt zu verwenden, müssen Sie zunächst Vuex in der Datei main.js einführen und in der Vue-Instanz registrieren: 🎜rrreee🎜Als nächstes in src Erstellen Sie ein neues Speicherverzeichnis unter dem Verzeichnis und schreiben Sie die Statusverwaltung jedes Moduls in dieses Verzeichnis. 🎜🎜Zum Beispiel müssen wir ein Modul verwalten, das den Anmeldestatus im Projekt speichert: 🎜rrreee🎜Wenn wir diese Statusverwaltung verwenden müssen, können wir den Status auf folgende Weise abrufen und ändern: 🎜rrreee🎜Zusammenfassung🎜🎜Vue -cli bietet eine sofort einsatzbereite Gerüstfunktion, mit der wir Vue.js-Projekte schnell erstellen und entwickeln können. In diesem Artikel werden die Installation und Verwendung von Vue-cli sowie die grundlegende Projektkonfiguration, einschließlich Projektstruktur, Umgebungsvariablenkonfiguration, Vuex usw., vorgestellt. Ich hoffe, dieser Artikel kann Ihnen helfen, Vue-cli besser zu nutzen und bessere Webanwendungen zu entwickeln. 🎜

Das obige ist der detaillierte Inhalt vonAnweisungen zur Verwendung des Vue-cli-Gerüstwerkzeugs und zur Projektkonfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!