Vue-cli3.0-Gerüst zum Erstellen von Vue-Projektschritten und -Prozessen

Vue-cli 3.0 ist ein neues Gerüsttool, das auf Vue.js basiert. Es kann uns helfen, schnell ein Vue-Projekt zu erstellen und bietet viele praktische Tools und Konfigurationen.

Jetzt werden wir Schritt für Schritt die Schritte und den Prozess zum Erstellen eines Projekts mit Vue-cli 3.0 vorstellen.

Installieren Sie Vue-cli 3.0

Zuerst müssen Sie Vue-cli 3.0 global installieren, das über npm installiert werden kann:

npm install -g @vue/cli

Nach Abschluss der Installation können Sie mit dem folgenden Befehl überprüfen, ob die Installation erfolgreich ist:

vue -V

Wenn die Versionsnummer ausgegeben wird, bedeutet dies, dass die Installation erfolgreich war.

Erstellen Sie ein Vue-Projekt

Führen Sie den folgenden Befehl in der Befehlszeile aus, um ein neues Projekt zu erstellen:

vue create my-project

wobei „mein-projekt“ der Projektname ist, ändern Sie ihn entsprechend Ihren Anforderungen.

Nach dem Ausführen dieses Befehls werden einige Projektkonfigurationsoptionen angezeigt, z. B. ob Babel verwendet werden soll, ob Vuex verwendet werden soll, ob ESlint verwendet werden soll usw. Sie können entsprechend Ihren Anforderungen auswählen. Wenn Sie sich nicht sicher sind, können Sie einfach die Eingabetaste drücken und die Standardoptionen verwenden.

Nachdem die Auswahl abgeschlossen ist, wird das Projekt installiert. Es kann eine gewisse Zeit dauern, bis die Installation abgeschlossen ist.

Führen Sie das Projekt aus

Nachdem die Projektinstallation abgeschlossen ist, geben Sie den Projektordner ein und führen Sie den folgenden Befehl aus:

cd my-project
npm run serve

Dieser Befehl startet einen lokalen Server, auf den über den Browser http://localhost zugegriffen werden kann: 8080, um den Projektlaufeffekt anzuzeigen.

Projektverzeichnisstruktur

Nachdem Sie Vue-cli 3.0 zum Erstellen des Projekts verwendet haben, ist die Verzeichnisstruktur des Projekts wie folgt:

|--node_modules          // 存放项目运行所需的模块
|--public                // 存放静态资源文件
|  |--favicon.ico        // 网站图标
|  |--index.html         // 网站入口文件
|--src                   // 存放项目源码文件
|  |--assets             // 存放静态资源文件
|  |--components         // 存放组件文件
|  |--views              // 存放页面文件
|  |--App.vue            // 页面入口文件
|  |--main.js            // 项目入口文件
|--.gitignore            // Git 版本库忽略文件列表
|--babel.config.js       // Babel 配置文件
|--package.json          // 项目配置文件
|--README.md             // 项目说明文件
|--vue.config.js         // Vue 配置文件

Unter diesen ist das Verzeichnis src die Quellcodedatei von Das Projekt und das public Das Code>-Verzeichnis ist ein Ordner, in dem statische Ressourcen gespeichert werden. <code>main.js ist die Eintragsdatei des Projekts und App.vue ist die Eintragsdatei der Seite. Unter dem Verzeichnis src speichert das Verzeichnis assets statische Ressourcendateien wie Bilder, Stylesheets usw. Im Verzeichnis src speichert components Komponentendateien und im Verzeichnis views werden Seitendateien gespeichert. src 目录下是项目的源码文件，public 目录下是存放静态资源的文件夹。main.js 是项目的入口文件，App.vue 是页面的入口文件。在 src 目录下，assets 目录存放的是静态资源文件，例如图片、样式表等。在 src 目录下，components 存放的是组件文件，views 目录存放的是页面文件。

配置文件

在创建项目过程中，Vue-cli 3.0 同时也生成了一些默认的配置文件，它们都位于项目的根目录下。其中，package.json 是项目的配置文件，它包含了项目所需的依赖、脚本命令等信息的声明。babel.config.js 中包含了 Babel 的配置信息。vue.config.js

Konfigurationsdateien

Während des Projekterstellungsprozesses generiert Vue-cli 3.0 auch einige Standardkonfigurationsdateien, die sich im Stammverzeichnis des Projekts befinden. Darunter ist package.json die Projektkonfigurationsdatei, die die Deklaration von Abhängigkeiten, Skriptbefehlen und anderen für das Projekt erforderlichen Informationen enthält. babel.config.js enthält die Konfigurationsinformationen von Babel. vue.config.js enthält Vue-Konfigurationsinformationen.

Zusammenfassung🎜🎜Vue-cli 3.0 macht es für uns effizienter und einfacher, Vue-Projekte zu erstellen, zu entwickeln und zu warten, indem es praktische Tools und Konfigurationen bereitstellt. Im Folgenden sind die Schritte und der Prozess zum Erstellen eines Vue-Projekts mit Vue-cli 3.0 aufgeführt. Ich hoffe, dass es für alle hilfreich sein kann. 🎜

Das obige ist der detaillierte Inhalt vonVue-cli3.0-Gerüst zum Erstellen von Vue-Projektschritten und -Prozessen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!