[프론트엔드 개발환경 설치, 구성, 프로젝트 구축 전체 튜토리얼]

프론트 엔드 개발 환경 설치, 구성, 프로젝트 구축 전체 튜토리얼

1.노드 환경 설치

简单的说 Node.js 就是运行在服务端的 JavaScrip，基于 Chrome JavaScript 运行时建立的一个平台，Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

1. Node.js 공식 홈페이지 다운로드: 다운로드 링크

2. 컴퓨터에 따라 설치하도록 선택합니다. Windows, macOS:

3. 다운로드가 완료되면 설치 과정에 따라 원클릭 설치를 진행하세요. 그런 다음 cmd 명령줄 창을 열고 Enter를 눌러 node -v노드가 성공적으로 설치되었는지 확인합니다.

2. VsCode 개발 도구 설치

VS Code是这两年非常热门的一款开发工具，它不仅有提升开发体验的界面、轻量化的编辑器，还有丰富而强大的插件，这些优秀的插件使得VS Code生态体系更加吸引人，让开发效率大大提升

1. Vscode 공식 웹사이트 다운로드: 다운로드 주소

컴퓨터 시스템에 따라 다운로드할 해당 버전을 선택한
다음 한 번의 클릭으로 설치하십시오.

2. Vscode에서 흔히 사용하는 필수 기본 플러그인

1. Visual Studio Code용 중국어(간체) 언어 팩.

기능: 컴파일러 중국화

2.Prettier - 코드 포맷터

기능: 코드 형식을 빠르게 지정

3.자동 이름 바꾸기 태그

역할: HTML/XML 태그 이름을 자동으로 바꿉니다.

4.자동 닫기 태그

역할: HTML/XML 태그를 자동으로 닫습니다.

5.Git 역사

기능: VS 코드에 git 도구 통합, git 레코드 보기, 파일 기록 보기, 브랜치 비교 및 ​​코드 제출 등.

vscode의 다른 훌륭하고 효율적인 플러그인은 댓글 영역에서 공유할 수 있습니다.

3. Git 도구 설치

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目

1. Git 공식 홈페이지 다운로드 다운로드 주소

컴퓨터 시스템에 따라 해당 다운로드를 선택하세요.
바보들을 위한 원클릭 설치

설치 후 cmd 명령 창에 입력하여 git --version확인하세요.

2. 힘내 구성

설치 후 바탕화면 아무데나 마우스 오른쪽 버튼을 클릭한 후 아이콘을 클릭 Git bash here하면 명령창이 뜹니다.

사용자 정보 구성

$ git config --global user.name ""
$ git config --global user.email ""

힘내 공통 명령

git init                                                  # 初始化本地git仓库（创建新仓库）
git status                                                # 查看当前版本状态（是否修改）
git add .                                                 # 增加当前子目录下所有更改过的文件
git commit -m 'xxx'                                       # 提交
git branch                                                # 显示本地分支
git push origin master                                    # 将当前分支push到远程master分支
git pull origin master                                    # 获取远程分支master并merge到当前分支

4. 프런트엔드 프레임워크 스캐폴딩 설치(예: 기술적 스택 vite+vue3+ts 구성)

vite+vue3+ts为目前最新技术栈，很有可能也是今后vue前端趋势，接下来则手把手教你学会构建一个项目

Vite 빠른 빌드

1. 명령줄 창을 엽니다.

2. npm 또는 원사를 사용하세요.

npm

npm init @vitejs/app

실

yarn create @vitejs/app

1. 프로젝트 이름을 입력하세요
2. 뷰를 선택하세요
3. TS 선택
4. 프로젝트 입력
5. npm 설치
6. 위의 npm run dev는
   
   
   vue3 프로젝트의 초기 구성을 완료했습니다.

5. 통합 라우팅, Vuex, Axios(예: 기술 스택 vite+vue3+ts 구성)

참고자료 : vite + vue3 + ts로 프로젝트를 구축하는 전 과정을 경험해보세요

통합 라우팅

1. vue3(vue-router@4)을 지원하는 경로를 설치합니다.

npm i vue-router@4

2. src/router/index.ts 파일 생성

import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '@/views/home.vue')
  },
  {
    
     path: '/', redirect: {
    
     name: 'Home' } }
]

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})

export default router

3. main.ts 파일에 마운트

import {
    
     createApp } from 'vue'
import App from '@/App.vue'

import router from '@/router/index'

createApp(App).use(router).mount('#app')

Vuex 통합

1. vue3 상태 관리 도구 vuex@next 설치

npm i vuex@next

2. src/store/index.ts 파일 생성

import {
    
     createStore } from 'vuex'

const defaultState = {
    
    
  count: 0
}

// Create a new store instance.
export default createStore({
    
    
  state() {
    
    
    return defaultState
  },
  mutations: {
    
    
    increment(state: typeof defaultState) {
    
    
      state.count += 1
    }
  },
  actions: {
    
    
    increment(context) {
    
    
      context.commit('increment')
    }
  },
  getters: {
    
    
    double(state: typeof defaultState) {
    
    
      return 2 * state.count
    }
  }
})

3. main.ts 파일에 마운트

import {
    
     createApp } from 'vue'
import App from '@/App.vue'

import router from '@/router/index'
import store from '@/store/index'

createApp(App).use(router).use(store).mount('#app')

통합 HTTP 도구

1. 액시오스 설치

npm i axios

2. Axios 구성

src/utils/http.ts에 저장된 도구 메서드를 캡슐화합니다.

import axios from 'axios'
import {
    
     Message } from 'element-plus'
// 创建axios实例
// 创建请求时可以用的配置选项

const instance = axios.create({
    
    
  withCredentials: true,
  timeout: 1000,
  baseURL: ''
})
// axios的全局配置
instance.defaults.headers.post = {
    
    
  'Content-Type': 'application/x-www-form-urlencoded'
}
instance.defaults.headers.common = {
    
    
  'Auth-Type': 'company-web',
  'X-Requested-With': 'XMLHttpRequest',
  token: 'sdfjlsdfjlsdjflsjflsfjlskd'
}

// 添加请求拦截器(post只能接受字符串类型数据)
instance.interceptors.request.use(
  (config) => {
    
    
    return config
  },
  (error) => {
    
    
    return Promise.reject(error)
  }
)

const errorHandle = (status, other) => {
    
    
  switch (status) {
    
    
    case 400:
      Message.error('信息校验失败')
      break
    case 401:
      Message.error('认证失败')
      break
    case 403:
      Message.error('token校验失败')
      break
    case 404:
      Message.error('请求的资源不存在')
      break
    default:
      Message.error(other)
      break
  }
}

// 添加响应拦截器
instance.interceptors.response.use(
  // 响应包含以下信息data,status,statusText,headers,config
  (res) => (res.status === 200 ? Promise.resolve(res) : Promise.reject(res)),
  (err) => {
    
    
    Message.error(err)
    const {
    
     response } = err
    if (response) {
    
    
      errorHandle(response.status, response.data)
      return Promise.reject(response)
    }
    Message.error('请求失败')
    return true
  }
)

export default instance

3. 사용해야 하는 http.ts 파일을 소개합니다.

import Http from '@/utils/http'
export default defineComponent({
    
    
  setup() {
    
    
    const store = useStore()
    const getData = () => {
    
    
      Http.get('url').then((res: Object) => {
    
    
        console.log(res)
      })
    }
    return {
    
    
      store,
      getData
    }
  }
})

이상이 프론트엔드 환경 구성 및 프로젝트 구축의 전 과정입니다. 혹시 부족한 부분이 있으면 정정 부탁드립니다.