Vue-cli 스캐폴딩 도구 사용법 및 프로젝트 구성 지침

Vue-cli 스캐폴딩 도구 사용법 및 프로젝트 구성 지침

프론트엔드 기술의 지속적인 발전과 함께 프론트엔드 프레임워크는 개발자들로부터 점점 더 많은 관심을 받고 있습니다. 프런트 엔드 프레임워크의 선두주자로서 Vue.js는 다양한 웹 애플리케이션 개발에 널리 사용되었습니다. Vue-cli는 Vue.js에서 공식적으로 제공하는 명령줄 기반 스캐폴딩으로 개발자가 Vue.js 프로젝트 구조를 신속하게 초기화하여 비즈니스 개발에 더 집중할 수 있도록 도와줍니다. 이번 글에서는 Vue-cli의 설치와 사용법, 기본적인 프로젝트 구성에 대해 소개하겠습니다.

1. Vue-cli 설치

아직 Node.js를 설치하지 않았다면 먼저 Node.js를 설치해야 합니다. Node.js 설치 방법은 직접 검색해 보세요.

Node.js를 설치한 후 명령줄에 다음 명령을 입력하여 Vue-cli를 설치합니다.

npm install -g vue-cli

이 명령은 전역 환경에 vue-cli를 설치합니다.

참고: 설치 과정에서 권한 부족이 발생하는 경우 sudo 명령을 사용하거나 관리자 권한으로 명령줄을 실행하세요.

2. Vue-cli를 사용하여 프로젝트 만들기

Vue-cli를 설치한 후 이를 사용하여 프로젝트를 만들 수 있습니다. webpack 템플릿을 기반으로 Vue.js 프로젝트를 생성하려면 명령줄에 다음 명령을 입력하세요:

vue init webpack my-project

이 명령이 실행되면 프로젝트 이름, 프로젝트 설명, 작성자 등과 같은 몇 가지 질문을 받게 됩니다. 요구 사항을 직접 입력할 수 있습니다. 작성이 완료되면 프로젝트 템플릿이 생성됩니다.

종속성 설치:

npm install

위 명령을 실행하면 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

프로젝트 실행:

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

3. 기본 프로젝트 구성

1. 프로젝트 구조

• 빌드: 프로젝트 빌드 및 패키징 관련 구성 폴더
< li>config: 프로젝트 구성 폴더
• node_modules: 프로젝트 종속성 패키지 폴더
• src: 구성 요소, 템플릿, 정적 리소스 등을 포함한 프로젝트 코드 폴더
• static: 그림, 글꼴 등과 같은 프로젝트 정적 리소스 폴더.
• test: 프로젝트 테스트 폴더
• .babelrc: Babel 구성 파일
• .editorconfig : 코드 스타일 구성 파일
• .gitignore: Git 버전 제어 무시 파일
• .postcssrc.js: PostCSS 구성 파일
• index.html: 프로젝트 페이지 항목 파일 < /li>
• package.json: 프로젝트 구성 파일

2. 환경 변수 구성

다양한 환경 설정 가능 개발 환경, 테스트 환경, 프로덕션 환경 등 프로젝트 변수에 포함됩니다. Vue-cli는 기본적으로 개발(개발 환경), 테스트(테스트 환경), 프로덕션(프로덕션 환경)의 세 가지 환경 모드를 제공합니다.

프로젝트 루트 디렉터리의 config 폴더에는 다양한 환경에 대한 구성 정보가 포함된 index.js 파일이 있습니다. 필요에 따라 해당 구성 정보를 수정할 수 있습니다.

예를 들어 index.js 파일에서 개발 환경과 프로덕션 환경에 대해 서로 다른 API 주소를 설정할 수 있습니다. 🎜

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

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

🎜코드에서는 process.env를 통해 현재 환경을 얻을 수 있습니다. NODE_ENV, 해당 API 주소를 얻으려면: 🎜rrreee

3. Vuex

🎜Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 모드이며 관리에 사용할 수 있습니다. 로그인 상태, 언어, 테마 등과 같은 글로벌 상태 🎜🎜프로젝트 템플릿 생성 시 Vuex 사용 여부를 선택할 수 있으며, 프로젝트 내에서 언제든지 Vuex를 추가하거나 제거할 수 있습니다. 🎜🎜Vuex 설치: 🎜rrreee🎜프로젝트에서 Vuex를 사용하려면 먼저 main.js 파일에 Vuex를 도입하고 Vue 인스턴스에 등록해야 합니다. 🎜rrreee🎜다음, src 해당 디렉토리 아래에 새로운 저장소 디렉토리를 생성하고, 이 디렉토리에 각 모듈의 상태 관리를 작성합니다. 🎜🎜예를 들어 프로젝트에서 로그인 상태를 저장하는 모듈을 관리해야 합니다. 🎜rrreee🎜이 상태 관리를 사용해야 하는 경우 다음과 같은 방법으로 상태를 얻고 수정할 수 있습니다. 🎜rrreee🎜Summary🎜🎜Vue -cli는 즉시 사용 가능한 스캐폴딩 기능을 제공하여 Vue.js 프로젝트를 빠르게 구축하고 개발하는 데 도움이 됩니다. 이 글에서는 Vue-cli의 설치 및 사용법은 물론, 프로젝트 구조, 환경 변수 구성, Vuex 등 기본적인 프로젝트 구성에 대해 소개합니다. 이 글이 여러분이 Vue-cli를 더 잘 사용하고 더 나은 웹 애플리케이션을 개발하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 Vue-cli 스캐폴딩 도구 사용법 및 프로젝트 구성 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!