Vue.js는 개발자가 대화형 프런트 엔드 애플리케이션을 빠르게 구축할 수 있는 경량 JavaScript 프레임워크입니다. 이번 글에서는 Vue 프로젝트를 생성하는 방법에 대한 자세한 과정을 다루겠습니다.
1단계: Node.js 설치
Vue.js는 JavaScript 기반 프레임워크이므로 먼저 Node.js를 설치해야 합니다. Node.js가 이미 설치되어 있으면 이 단계를 건너뛸 수 있습니다.
공식 웹사이트 https://nodejs.org/en/에서 사용 중인 운영체제에 맞는 Node.js를 다운로드할 수 있습니다.
설치가 완료된 후 명령줄에 다음 명령을 입력하여 Node.js가 제대로 작동하는지 확인할 수 있습니다.
node -v
올바른 버전 번호가 출력되면 Node.js가 성공적으로 설치된 것입니다.
2단계: Vue CLI 설치
Vue CLI는 Vue.js 프로젝트 생성 시 템플릿을 빠르게 생성하고 개발에 필요한 서비스를 제공하는 데 사용되는 명령줄 인터페이스 도구입니다. 명령줄에 다음 명령을 입력하여 Vue CLI를 설치할 수 있습니다.
npm install -g @vue/cli
3단계: 새 프로젝트 만들기
Vue CLI를 설치한 후 create
명령을 사용하여 새 프로젝트를 만들 수 있습니다. . 명령줄을 열고 프로젝트를 생성하려는 디렉터리로 변경합니다. create
命令创建新项目。打开命令行,并进入您要创建项目的目录。
输入以下命令:
vue create my-project
其中 my-project
是项目名称。在执行该命令后,Vue CLI 将提示您选择项目所需的核心集合和其他特定的插件和功能。
您可以使用上下箭头键浏览所提供的选项,使用空格键进行选择,并按下 Enter 键。
步骤4:启动应用程序
一旦创建应用程序完成,您可以在应用程序的根目录中使用以下命令启动应用程序:
npm run serve
此命令将启动一个本地服务器,并使用默认端口 8080 将应用程序部署到该服务器上。在浏览器中打开 http://localhost:8080/
,您将看到 Vue 应用程序的欢迎页面。
步骤5:使用 Vue CLI 为项目添加依赖项
Vue CLI 通过内置的依赖项管理器可以极大地帮助我们简化开发流程。在创建 Vue 项目之后,您可以使用该命令为项目添加新的依赖项:
npm install --save <dependency>
其中 <dependency>
是您要安装的依赖项名称。在添加依赖项后,您可以在项目目录中的 package.json
文件中查看所有项目依赖项。
步骤6:构建应用程序
使用 Vue CLI 创建的项目包括自动化构建工具,用于在工作流程中构建、测试和打包 Vue 应用程序。
要构建应用程序,请在项目的根目录中输入以下命令:
npm run build
此命令将在 dist/
rrreee
여기서my-project
는 프로젝트 이름입니다. 이 명령을 실행하면 Vue CLI는 프로젝트에 필요한 핵심 컬렉션과 기타 특정 플러그인 및 기능을 선택하라는 메시지를 표시합니다. 위쪽 및 아래쪽 화살표 키를 사용하여 사용 가능한 옵션을 탐색하고, 스페이스바를 사용하여 선택한 다음 Enter 키를 누를 수 있습니다. 🎜🎜4단계: 애플리케이션 시작🎜🎜애플리케이션 생성이 완료되면 애플리케이션의 루트 디렉터리에서 다음 명령을 사용하여 애플리케이션을 시작할 수 있습니다. 🎜rrreee🎜이 명령은 로컬 서버를 시작하고 기본 포트 8080을 사용합니다. 응용 프로그램을 시작하려면 프로그램이 이 서버에 배포됩니다. 브라우저에서 http://localhost:8080/
를 열면 Vue 애플리케이션의 시작 페이지가 표시됩니다. 🎜🎜5단계: Vue CLI를 사용하여 프로젝트에 종속성 추가🎜🎜Vue CLI는 내장된 종속성 관리자를 통해 개발 프로세스를 단순화하는 데 큰 도움이 됩니다. Vue 프로젝트를 생성한 후 다음 명령을 사용하여 프로젝트에 새 종속성을 추가할 수 있습니다. 🎜rrreee🎜여기서 <dependent>
는 설치하려는 종속성의 이름입니다. 종속성을 추가한 후 프로젝트 디렉터리의 package.json
파일에서 모든 프로젝트 종속성을 볼 수 있습니다. 🎜🎜6단계: 앱 빌드🎜🎜Vue CLI를 사용하여 생성된 프로젝트에는 워크플로에서 Vue 애플리케이션을 빌드, 테스트 및 패키징하기 위한 자동화된 빌드 도구가 포함되어 있습니다. 🎜🎜애플리케이션을 빌드하려면 프로젝트의 루트 디렉터리에 다음 명령을 입력하세요. 🎜rrreee🎜이 명령은 dist/
디렉터리에 완전히 최적화된 프로덕션 등급 버전의 애플리케이션을 빌드합니다. 🎜🎜Summary🎜🎜위는 Vue 프로젝트를 생성하는 세부 과정입니다. Vue는 개발자가 강력한 클라이언트 애플리케이션을 빠르게 구축할 수 있는 간단하고 유연하며 강력한 도구를 제공합니다. 지금 Vue CLI를 사용하여 애플리케이션 생성 및 디버깅을 시작하세요! 🎜위 내용은 vue 프로젝트 생성 프로세스에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!