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 depackage.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: '', components: { App } })

接下来，在src

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

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

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

3. Vuex

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!