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
    }
  }
}

1. 프로젝트 구조

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

2. 환경 변수 구성

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

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

3. Vuex

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