Vue 프로젝트 단계 및 프로세스를 생성하는 Vue-cli3.0 스캐폴딩

Vue-cli 3.0은 Vue.js를 기반으로 한 새로운 스캐폴딩 도구로 Vue 프로젝트를 빠르게 생성하는 데 도움이 되며 다양한 편리한 도구와 구성을 제공합니다.

이제 Vue-cli 3.0을 사용하여 프로젝트를 생성하는 단계와 과정을 단계별로 소개하겠습니다.

Vue-cli 3.0 설치

먼저 npm을 통해 설치할 수 있는 Vue-cli 3.0을 전역적으로 설치해야 합니다.

npm install -g @vue/cli

설치가 완료된 후 다음 명령을 사용하여 설치가 성공했는지 확인할 수 있습니다.

vue -V

버전번호가 출력되면 설치 성공입니다.

Vue 프로젝트 만들기

명령줄에서 다음 명령을 실행하여 새 프로젝트를 만듭니다.

vue create my-project

여기서 "my-project"는 프로젝트 이름이므로 필요에 따라 수정하세요.

이 명령을 실행하면 Babel 사용 여부, Vuex 사용 여부, ESlint 사용 여부 등 일부 프로젝트 구성 옵션이 나타납니다. 필요에 따라 선택할 수 있습니다. 확실하지 않은 경우 Enter 키를 누르고 기본 옵션을 사용할 수 있습니다.

선택이 완료되면 프로젝트가 설치됩니다. 설치가 완료될 때까지 기다리는 데 일정 시간이 걸릴 수 있습니다.

프로젝트 실행

프로젝트 설치가 완료된 후 프로젝트 폴더에 들어가서 다음 명령을 사용하여 실행합니다.

cd my-project
npm run serve

이 명령은 브라우저 http://localhost를 통해 액세스할 수 있는 로컬 서버를 시작합니다. 8080 프로젝트 실행 효과를 확인하세요.

프로젝트 디렉토리 구조

Vue-cli 3.0을 사용하여 프로젝트를 생성한 후 프로젝트의 디렉토리 구조는 다음과 같습니다.

|--node_modules          // 存放项目运行所需的模块
|--public                // 存放静态资源文件
|  |--favicon.ico        // 网站图标
|  |--index.html         // 网站入口文件
|--src                   // 存放项目源码文件
|  |--assets             // 存放静态资源文件
|  |--components         // 存放组件文件
|  |--views              // 存放页面文件
|  |--App.vue            // 页面入口文件
|  |--main.js            // 项目入口文件
|--.gitignore            // Git 版本库忽略文件列表
|--babel.config.js       // Babel 配置文件
|--package.json          // 项目配置文件
|--README.md             // 项目说明文件
|--vue.config.js         // Vue 配置文件

그 중 src 디렉토리는 의 소스코드 파일입니다. 프로젝트, public 코드> 디렉터리는 정적 리소스를 저장하는 폴더입니다. <code>main.js는 프로젝트의 항목 파일이고, App.vue는 페이지의 항목 파일입니다. src 디렉터리 아래의 assets 디렉터리에는 그림, 스타일 시트 등과 같은 정적 리소스 파일이 저장됩니다. src 디렉터리에서 comminents는 구성 요소 파일을 저장하고 views 디렉터리는 페이지 파일을 저장합니다. src 目录下是项目的源码文件，public 目录下是存放静态资源的文件夹。main.js 是项目的入口文件，App.vue 是页面的入口文件。在 src 目录下，assets 目录存放的是静态资源文件，例如图片、样式表等。在 src 目录下，components 存放的是组件文件，views 目录存放的是页面文件。

配置文件

在创建项目过程中，Vue-cli 3.0 同时也生成了一些默认的配置文件，它们都位于项目的根目录下。其中，package.json 是项目的配置文件，它包含了项目所需的依赖、脚本命令等信息的声明。babel.config.js 中包含了 Babel 的配置信息。vue.config.js

구성 파일

프로젝트 생성 프로세스 중에 Vue-cli 3.0은 프로젝트의 루트 디렉터리에 있는 일부 기본 구성 파일도 생성합니다. 그 중 package.json은 프로젝트 구성 파일로, 종속성 선언, 스크립트 명령 및 프로젝트에 필요한 기타 정보가 포함되어 있습니다. babel.config.js에는 Babel의 구성 정보가 포함되어 있습니다. vue.config.js에는 Vue 구성 정보가 포함되어 있습니다.

요약🎜🎜Vue-cli 3.0을 사용하면 편리한 도구와 구성을 제공하여 Vue 프로젝트를 더욱 효율적이고 간단하게 생성, 개발 및 유지 관리할 수 있습니다. 위 내용은 Vue-cli 3.0을 사용하여 Vue 프로젝트를 만드는 단계와 과정입니다. 모든 분들께 도움이 되기를 바랍니다. 🎜

위 내용은 Vue 프로젝트 단계 및 프로세스를 생성하는 Vue-cli3.0 스캐폴딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!