본문 최초 발표https://www.telerik.com/blogs/a-first-look-at-the-vue-cli
안녕하십니까?😃
나는 최근에 파렴치한 자기 판매를 하나 완성했다.😅), 이 글에서 우리는 Vue의 작업 원리에 대한 모든 기초 지식을 복습했다.
그러나 정적 HTML 파일에 <script> 태그를 추가하고 페이지의 JS에 직접 설정하는 차원에서만 Vue를 볼 수 있습니다.
이제 빅걸 도구를 배울 때가 됐어요. Vue를 사용하는 가장 즐거운 부분 중 하나인 CLI(명령줄 인터페이스)를 보세요.
두려워하지 마라, 이것은 너무 쉽다!

Sadly, for this tutorial i'm going to have to assume that you have a little knowledge of how to navigate inside the terminal with basic cd commands, because this is way out of scope of what Vue CLI is or does. The cd command is super basic though, and you can easily google for a video or quick tutorial if you need a refresher

설정 중

시작하기 전에, 우리는 당신의 컴퓨터에 몇 가지 내용을 설정해야 합니다.만약 네가 이미 가지고 있다면, 그중의 일부를 뛰어넘을 수 있지만, 특히 조심해야 한다. 중요한 것은 뛰어넘지 마라.

노드 JS

CLI가 우리 시스템에서 작동하기 위해서는 먼저 Node를 설치해야 합니다. 특히 본문을 작성할 때 최소한 8.9 버전이 필요하지만 8.11 이상의 버전을 사용하는 것을 권장합니다.
이전에 Node를 설치한 적이 있지만 어떤 버전을 사용했는지 알 수 없는 경우 터미널을 열고 다음 명령node -v을 실행하십시오.오류가 발생하면 기계에 노드가 설치되지 않을 수도 있습니다.
nodehttps://nodejs.org/en/의 공식 페이지로 가면 홈페이지에서 다운로드용 녹색 단추 두 개를 볼 수 있습니다.계속해서 v11.9.0 (장기 지원) 라고 적힌 버전을 누르십시오. 당신이 무엇을 하고 있는지 알고 최신 버전을 원하지 않으면.
현재 운영 체제에서 다운로드를 받고 두 번 클릭하여 설치 마법사를 완료합니다.완료 후 터미널을 다시 시작하고 다시 실행LTS을 시도하여 모든 것이 정상인지 확인합니다.
그리고 하나 더, Node를 설치할 때 컴퓨터에 무료로 설치할 수 있습니다 node -v(Node package manager)!우리는 잠시 후에 그것을 사용할 것이니, 당신이 이것이 어디에서 왔는지 알고 싶지 않도록 이 점을 기억해 주십시오.

사선(옵션)

어떤 사람들은 NPM 대신 yarn 패키지 관리자로 선택하는 것을 더 좋아한다. 개인적으로 나는 선호하지 않고 프로젝트와 팀의 요구에 따라 두 가지를 사용할 것이다. 그러나 한번 시도해 보고 싶다면 https://yarnpkg.com/en/ 로 돌아가서 npm 단추를 누르면 된다.
파일을 다시 다운로드하고 설치 마법사를 따르십시오.완료되면 터미널에서 실행 Install Yarn 을 통해 yarn 이 시스템에 제대로 추가되었는지 확인할 수 있습니다.

CLI 설치

설탕의를 함유한다이제 우리는 필요한 모든 것을 갖추고 있으며, 컴퓨터에 Vue CLI를 계속 설치할 수 있습니다.
터미널을 열고 다음 명령을 실행합니다.(NPM과 YARN 명령을 동시에 표시합니다. 두 명령을 동시에 실행할 필요가 없습니다. 사용할 명령과 이전 절에 설치한 명령을 선택하십시오.)

npm install -g @vue/cli

yarn global add @vue/cli

터미널에서 이 명령을 실행할 때, 스크립트를 실행하고, 아주 신비한 출력을 얻을 수 있습니다.걱정하지 말고 가서 자신에게 커피를 좀 구해 주고 모든 것이 다 설치되면 다시 이야기하자.
이 두 명령의 yarn -v 및 -g 플래그를 주의하십시오. 이것은 컴퓨터에 이 패키지global를 설치하고 있다는 것을 의미합니다.즉, 특정 폴더로 이동하지 않고도 파일 시스템의 모든 위치에서 이러한 명령을 사용할 수 있습니다.
다시 한 번 터미널에서 실행globally을 통해 모든 내용이 제대로 설치되어 있는지 확인하면 CLI 버전 번호가 있는 출력을 얻을 수 있습니다.

첫 번째 프로젝트 만들기

우리 손을 더럽히고 이 물건을 실제로 사용할 때가 되었다.터미널이 시작되지 않으면 터미널을 시작하고 항목을 만들 폴더로 이동합니다.
현재 실행할 명령은 vue --version 이며, 이 중 vue create <name> 은 프로젝트의 이름이자 만들 폴더입니다.
첫 번째 프로젝트를 만들고 실행합니다.

vue create avocados

몸에 맞죠?
너는 한 무더기의 문제에 부딪힐 것이다. 이 문제들은 너의 프로젝트를 설정하는 데 도움을 줄 것이다. 그러나 당황하지 마라. 그것들은 모두 말하지 않아도 안다.
첫 번째 화면에서는 기본 설정 (초보자에게는 가능) 을 선택하거나 수동 설정 옵션을 통해 수동으로 옵션을 선택할 수 있습니다.
프로젝트 설정에서 옵션 (예: Vuex) 을 선택하지 않으면 걱정하지 마십시오. 나중에 언제든지 프로젝트 맨 위에 이 옵션을 다시 설치할 수 있습니다.
수동 설정을 선택한 경우 옵션 마법사가 사용자의 항목에 대한 옵션을 설정합니다.화살표 키를 사용하여 탐색하고, 스페이스 바를 사용하여 옵션을 선택하거나 선택 취소하고, Enter 키를 사용하여 다음 화면으로 이동할 수 있습니다.
여기에서 TypeScript 지원, 라우터 기본 구성, 심지어 Vuex를 추가하여 글로벌 상태 관리를 할 수 있습니다.
완료되면 CLI가 작업을 완료하고 몇 초 후 새 프로젝트가 완료됩니다.계속 <name> 폴더 구조를 살펴봅시다.

폴더 구조

그래나는 VS 코드에서 이 새 항목을 열 것이다. 나는 당신이 알고 싶지 않도록 재료 아이콘 테마를 사용하여 아이콘을 예쁘게 할 것이다.

빨리 뛰어내려!

node_모듈: 의존항 코드를 저장합니다. cd 및 npm 을 사용하여 코드를 설치하거나 삭제할 수 있습니다.

public: 응용 프로그램의 URL을 탐색할 때, 이 폴더는 웹 서버가 불러올 yarn 을 저장합니다.필요한 모든 파일은 Vue에서 자동으로 주입되므로 여기서 무슨 일이 일어날지 걱정할 필요가 없습니다.

src: 당신은 여기에 모든 코드, 구성 요소, 자산 등을 배치할 것입니다

루트 파일: 프로젝트 루트에서 ES Lint 구성index.html, GIT.eslintrc.js, 패키지 관리.gitignore 및 package.json 또는 package-lock.json 파일 및 이전에 선택한 파일에 따라 다양한 구성 파일을 볼 수 있습니다.

그럼 그래, 이제 어떡하지?
좋은 경험법은 새로운 프로젝트가 있다면, 사용 가능한 스크립트를 보고 싶으면, yarn.lock 파일을 검사해야 한다는 것이다.계속 열면 JSON에서 package.json라는 항목을 볼 수 있습니다.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

왼쪽에서 스크립트의 이름을 얻을 수 있습니다. 키: 값이 맞는 오른쪽에서 이 스크립트가 실제로 해 주는 일을 얻을 수 있습니다.
어떻게 사용해야 합니까?사실 간단해요.
NPM을 사용하는 경우 터미널에서 scripts, 예를 들어 npm run <scriptname> 를 입력할 수 있습니다.사선을 사용하는 경우 npm run serve 를 입력할 수 있습니다.

서비스 및 건설

Vue CLI를 사용할 때 두 개의 주요 스크립트를 사용합니다. 하나는 yarn serve, 다른 하나는 serve 입니다.
터미널에서 계속 build 또는 npm run serve (이전에 프로젝트 디렉터리에 있어야 함) 을 실행하고 마술을 수행하는 데 몇 초의 시간을 주십시오.그것은 당신의 모든 유동 자산을 번역하고 묶어서 최종적으로 이 전설을 쓸 것이다.

지금 몇 가지 일이 생겼어요.

이 명령은 터미널 창의 yarn serve 을 누르기 전에 서버를 시작합니다. 종료하지 않습니다.

서버는 코드에 대한 변경 사항을 주목하고 저장할 때 자산을 즉시 다시 처리합니다. (오류가 있으면 소리를 질렀을 것입니다.)

이 URL을 제공합니다. 이 URL을 복사해서 붙여넣거나 명령/제어를 브라우저에 눌러서 서비스하고 항목을 볼 수 있습니다.

핫 로드 기능은 특정 컨텐트가 변경되면 브라우저에서 응용 프로그램의 일부 컨텐트를 동적으로 다시 로드하므로 예를 들어 CSS를 조금 변경한 경우 CLI 재컴파일이 완료되면 브라우저가 자동으로 업데이트됩니다.

그래서 밑줄은 프로젝트를 하고 있다면 백그라운드에서 계속 실행하기를 바라는 것이다.
다른 한편, 당신은 control + c 명령을 가지고 있습니다.
계속 localhost 또는 build 을 실행하고 자산을 컴파일하는 데 몇 초의 시간을 주십시오.
루트 디렉터리에 npm run build 라는 새 폴더가 있습니다. 이 폴더에는 yarn build 의 복사본이 포함되지만, 이번에는 축소되어 불러올 삽입식 스크립트와 스타일이 포함됩니다.
이 폴더에는 컴파일된 항목이 포함된 dist 및 index.html 폴더도 있습니다.
요컨대, 이것은 응용 프로그램을 배치하기 위해 웹 서버에 넣으려는 폴더입니다.

보너스

Vue CLI에는 실제로 GUI가 있습니다.🤯
터미널에서 프로젝트 루트 디렉터리로 이동하여 명령css을 실행하고 놀랄 준비를 하십시오.완전한 웹 응용 프로그램 GUI를 얻을 수 있습니다. 플러그인을 보거나 삭제하거나 설치하고, 의존 관계를 확인하고, 프로젝트 설정을 조작하고, 이전에 배운 스크립트를 실행할 수 있습니다!

결론

Vue CLI를 이해하고 사용하는 것은 Vue를 사용하여 SPA를 제작하고자 하는 모든 개발자에게 없어서는 안 될 것입니다.나는 단말기를 처음 사용하는 사람에게 단말기는 어둡고 무서운 신세계일 수도 있다는 것을 알고 있지만, 이 절차를 몇 번 통과하면 점점 두려워하지 않게 될 것이라고 보증한다.(만약 다른 모든 것이 실패한다면, 당신은 웹 UI를 가지고 당신을 지지할 것입니다!)