vue-cli+webpack을 사용하여 Vue 개발 환경을 구축하는 방법

이번에는 vue-cli+webpack으로 vue 개발 환경을 구축하는 방법과 vue-cli+webpack으로 vue 개발 환경 구축 시 주의사항에 대해 알려드리겠습니다. 바라보다.

여기서는 node를 기반으로 하는 npm 패키지 다운로드를 사용해야 하기 때문에 먼저 node를 다운로드해야 합니다

더 이상 고민하지 말고 바로 본론으로 들어가겠습니다

노드를 다운로드하고 동시에 git도 다운로드해야 합니다. 이제부터 vue 환경을 구축하기 위해 git에 명령을 입력하겠습니다

git은 linux명령

을 사용합니다. 왜 그런지 묻지 마세요. 작동하는 한 그렇게 생각하지 않나요?

Windows 시스템에서는 git을 다운로드한 후 바탕 화면을 마우스 오른쪽 버튼으로 클릭하면 git Bash가 표시되고 이를 클릭한 다음 git을 엽니다.

Git에는 많은 기능이 있습니다. 동시에 Git은 파일을 github에 푸시할 수 있습니다. Github는 매우 훌륭한 창고 관리 도구입니다

자, git을 열면 바로 시작하겠습니다

그런 다음 npm inst<a href="http://www.php.cn/wiki/1483.html" target="_blank">all<code>npm inst<a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a> webpack

就会自动下载webpack最新版本了

在这里我们直接进入正题，怎么使用vue-cli搭建vue的开发环境

在这里我们需要全局安装vue-cli

在git里执行npm install vue-cli -g  安装vue命令环境

执行vue --verson查看是否安装成功，

显示vue的版本，就是安装成功了

这样就是全局安装了

现在我们再命令行输入vue init webpack-simple<模板名，就是你的项目的名称>，

在这里我们用webpack-simple搭建，因为他没有严格的规范，相对于大多数程序员来说比较好，他与webpack的区别在这里我就不细说了，如果需要的话大家可以在下面留言，我们给大家分享

在这里我的项目名称为myvue

所以我执行vue init webpack-simple myvue

桌面会有一个myvue的文件夹

我们执行cd myvue进入到我们的项目下

会发现文件夹下会有这些文件，这就是vue-cli自动为我们搭建的环境了

我们执行npm install

这时候我们需要等待一小会，npm在为我们下载基于node的一些文件，

然后你会发现多了一个node——modules文件，里面是node的一些模块

然后我们再命令行执行npm run dev webpack

을 실행합니다. 최신 버전의 webpack이 자동으로 다운로드됩니다

여기서는 vue-cli를 사용하여 vue 개발 환경을 구축하는 방법에 대한 주제로 직접 이동합니다

여기서는 전역적으로

vue-cli

를 설치해야 합니다. vue 명령 환경을 설치하려면 git에서 npm install vue-cli -g를 실행하세요
vue --verson을 실행하여 설치가 성공했는지 확인하세요.

vue 버전이 표시되면 설치가 성공적이라는 의미입니다 이것은 글로벌 설치입니다

이제 명령줄에 vue init webpack-simple<프로젝트 이름인 템플릿 이름>을 입력합니다. 여기서는 webpack-simple을 사용하여 작성합니다. 왜냐하면 엄격한 사양이 없고 대부분의 프로그래머보다 우수하기 때문입니다. 여기에서는 webpack과의 차이점에 대해 자세히 설명하지 않겠습니다. 필요한 경우 아래에 메시지를 남길 수 있습니다. 당신과 공유하세요 <!--content end-->🎜 내 프로젝트 이름은 myvue🎜🎜입니다. 그래서 <code>vue init webpack-simple myvue🎜🎜를 실행합니다. 바탕화면에 myvue 폴더가 있을 거예요🎜🎜 cd myvue를 실행하여 프로젝트에 들어갑니다🎜🎜 이 파일들은 폴더에서 찾을 수 있습니다. 이것은 vue-cli가 자동으로 구축하는 환경입니다🎜🎜 npm install🎜🎜을 실행합니다. 지금은 잠시 기다려야 합니다. npm이 노드 기반의 일부 파일을 다운로드하고 있습니다. 🎜🎜 그러면 node🎜의 일부 모듈이 포함된 노드 module🎜s 파일이 하나 더 있다는 것을 알 수 있습니다. 🎜 그런 다음 명령줄에서 npm run dev를 실행합니다🎜🎜 vue는 자동으로 브라우저를 열고 vue 프로젝트를 실행했습니다.🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜JS에서 Ajax 요청 기능을 구현하는 방법🎜🎜🎜🎜🎜Angular는 테이블 필터링 및 삭제 기능을 구현합니다🎜🎜🎜🎜

위 내용은 vue-cli+webpack을 사용하여 Vue 개발 환경을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!