Utilisation de l'outil d'échafaudage Vue-cli et instructions de configuration du projet

Utilisation de l'outil d'échafaudage Vue-cli et instructions de configuration du projet

Avec le développement continu de la technologie front-end, les frameworks front-end attirent de plus en plus l'attention des développeurs. En tant que leader des frameworks front-end, Vue.js a été largement utilisé dans le développement de diverses applications Web. Vue-cli est un échafaudage basé sur une ligne de commande officiellement fourni par Vue.js. Il peut aider les développeurs à initialiser rapidement la structure du projet Vue.js, nous permettant ainsi de nous concentrer davantage sur le développement commercial. Cet article présentera l'installation et l'utilisation de Vue-cli, ainsi que la configuration de base du projet.

1. Installez Vue-cli

Si vous n'avez pas encore installé Node.js, vous devez d'abord installer Node.js. Veuillez rechercher comment installer Node.js vous-même.

Après avoir installé Node.js, entrez la commande suivante sur la ligne de commande pour installer Vue-cli :

npm install -g vue-cli

Cette commande installera vue-cli dans l'environnement global.

Remarque : si des autorisations insuffisantes se produisent pendant le processus d'installation, veuillez utiliser la commande sudo ou exécuter la ligne de commande en tant qu'administrateur.

2. Utilisez Vue-cli pour créer des projets

Après avoir installé Vue-cli, nous pouvons commencer à l'utiliser pour créer des projets. Entrez la commande suivante sur la ligne de commande pour créer un projet Vue.js basé sur le modèle webpack :

vue init webpack my-project

Une fois cette commande exécutée, quelques questions vous seront posées, telles que le nom du projet, la description du projet, l'auteur, etc. peut suivre le vôtre. Remplissez les exigences. Une fois rempli, il créera un modèle de projet pour nous.

Installer les dépendances :

npm install

Après avoir exécuté la commande ci-dessus, les dépendances seront installées à partir de package.json. 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

Exécutez le projet :

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

3. Configuration de base du projet

1. Structure du projet

• build : dossier de configuration associé à la construction et à l'empaquetage du projet
< li>config : dossier de configuration du projet
• node_modules : dossier du package de dépendances du projet
• src : dossier de code du projet, comprenant les composants, les modèles, les ressources statiques, etc.
• static : dossier de ressources statiques du projet, telles que des images, des polices, etc.
• test : dossier de test du projet
• .babelrc : fichier de configuration Babel
• .editorconfig : fichier de configuration du style de code
• .gitignore : fichier ignoré du contrôle de version Git
• .postcssrc.js : fichier de configuration PostCSS
• index.html : fichier d'entrée de la page du projet
• package.json : fichier de configuration du projet

2. Configuration des variables d'environnement

Différents environnements peuvent être définis dans le projet Variables telles que l'environnement de développement, l'environnement de test et l'environnement de production. Vue-cli propose trois modes d'environnement par défaut : développement (environnement de développement), test (environnement de test) et production (environnement de production).

Dans le dossier config du répertoire racine du projet, il existe un fichier index.js, qui contient des informations de configuration pour divers environnements. Nous pouvons modifier les informations de configuration correspondantes si nécessaire.

Par exemple, nous pouvons définir différentes adresses API pour l'environnement de développement et l'environnement de production dans le fichier index.js : 🎜

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

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

🎜Dans le code, nous pouvons obtenir l'environnement actuel via process.env. NODE_ENV , pour obtenir l'adresse API correspondante : 🎜rrreee

3. Vuex

🎜Vuex est un mode de gestion d'état spécialement développé pour les applications Vue.js et peut être utilisé Gérer statut global, tel que le statut de connexion, la langue, le thème, etc. 🎜🎜Lors de la création d'un modèle de projet, vous pouvez choisir d'utiliser Vuex, et vous pouvez ajouter ou supprimer Vuex à tout moment dans le projet. 🎜🎜Installer Vuex : 🎜rrreee🎜Pour utiliser Vuex dans le projet, vous devez d'abord introduire Vuex dans le fichier main.js et l'enregistrer dans l'instance Vue : 🎜rrreee🎜Ensuite, dans src Créez un nouveau répertoire de magasin sous le répertoire et écrivez la gestion des statuts de chaque module dans ce répertoire. 🎜🎜Par exemple, nous devons gérer un module qui stocke le statut de connexion dans le projet : 🎜rrreee🎜Lorsque nous avons besoin d'utiliser cette gestion des statuts, nous pouvons obtenir et modifier le statut des manières suivantes : 🎜rrreee🎜Résumé🎜🎜Vue -cli fournit La fonction d'échafaudage prête à l'emploi nous aide à créer et développer rapidement des projets Vue.js. Cet article présente l'installation et l'utilisation de Vue-cli, ainsi que la configuration de base du projet, y compris la structure du projet, la configuration des variables d'environnement, Vuex, etc. J'espère que cet article pourra vous aider à mieux utiliser Vue-cli et à développer de meilleures applications Web. 🎜

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!