Vue-cli 3.0은 Vue.js를 기반으로 한 새로운 스캐폴딩 도구로 Vue 프로젝트를 빠르게 생성하는 데 도움이 되며 다양한 편리한 도구와 구성을 제공합니다.
이제 Vue-cli 3.0을 사용하여 프로젝트를 생성하는 단계와 과정을 단계별로 소개하겠습니다.
먼저 npm을 통해 설치할 수 있는 Vue-cli 3.0을 전역적으로 설치해야 합니다.
npm install -g @vue/cli
설치가 완료된 후 다음 명령을 사용하여 설치가 성공했는지 확인할 수 있습니다.
vue -V
버전번호가 출력되면 설치 성공입니다.
명령줄에서 다음 명령을 실행하여 새 프로젝트를 만듭니다.
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
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!