Échafaudage Vue-cli3.0 pour créer les étapes et le processus du projet Vue

Vue-cli 3.0 est un nouvel outil d'échafaudage basé sur Vue.js. Il peut nous aider à créer rapidement un projet Vue et fournit de nombreux outils et configurations pratiques.

Présentons étape par étape les étapes et le processus de création d'un projet à l'aide de Vue-cli 3.0.

Installer Vue-cli 3.0

Vous devez d'abord installer Vue-cli 3.0 globalement, qui peut être installé via npm :

npm install -g @vue/cli

Vous pouvez utilisez-le une fois l'installation terminée. La commande suivante vérifie si l'installation est réussie :

vue -V

Si le numéro de version est affiché, l'installation est réussie.

Créer un projet Vue

Exécutez la commande suivante dans la ligne de commande pour créer un nouveau projet :

vue create my-project

où "mon-projet" est le Nom du projet, modifiez-le selon vos besoins.

Après avoir exécuté cette commande, certaines options de configuration du projet apparaîtront, comme si vous devez utiliser Babel, si vous devez utiliser Vuex, si vous devez utiliser ESlint, etc. Vous pouvez choisir en fonction de vos besoins. Si vous n'êtes pas sûr, vous pouvez simplement appuyer sur Entrée et utiliser les options par défaut.

Une fois la sélection terminée, l'installation du projet sera effectuée. L'attente de la fin de l'installation peut prendre un certain temps.

Exécuter le projet

Une fois l'installation du projet terminée, entrez dans le dossier du projet et utilisez la commande suivante pour l'exécuter :

cd my-project
npm run serve

Cette commande démarrez un serveur local, vous pouvez visiter http://localhost:8080 via le navigateur pour voir l'effet en cours d'exécution du projet.

Structure des répertoires du projet

Après avoir utilisé Vue-cli 3.0 pour créer le projet, la structure des répertoires du projet est la suivante :

|--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 配置文件

Parmi eux, src Le répertoire est le fichier de code source du projet, et le répertoire public est le dossier où les ressources statiques sont stockées. main.js est le fichier d'entrée du projet, et App.vue est le fichier d'entrée de la page. Sous le répertoire src, le répertoire assets stocke les fichiers de ressources statiques, tels que les images, les feuilles de style, etc. Dans le répertoire src, components stocke les fichiers de composants et le répertoire views stocke les fichiers de page. src 目录下是项目的源码文件，public 目录下是存放静态资源的文件夹。main.js 是项目的入口文件，App.vue 是页面的入口文件。在 src 目录下，assets 目录存放的是静态资源文件，例如图片、样式表等。在 src 目录下，components 存放的是组件文件，views 目录存放的是页面文件。

配置文件

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

Fichier de configuration

Lors du processus de création du projet, Vue-cli 3.0 génère également des fichiers de configuration par défaut, qui sont tous situés dans le répertoire racine du projet. Parmi eux, package.json est le fichier de configuration du projet, qui contient la déclaration des dépendances, les commandes de script et d'autres informations requises par le projet. babel.config.js contient les informations de configuration de Babel. vue.config.js contient des informations de configuration de Vue.

Summary#🎜🎜##🎜🎜#Vue-cli 3.0 nous permet de créer, de développer et de maintenir plus efficacement et plus simplement des projets Vue en fournissant des outils et des configurations pratiques. Ce qui précède sont les étapes et le processus de création d'un projet Vue à l'aide de Vue-cli 3.0. J'espère que cela pourra être utile à tout le monde. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!