vue-cli3.0 설치 및 구성 튜토리얼(그림 및 텍스트)

이 기사는 vue-cli3.0의 설치 및 구성에 대한 튜토리얼(그림 및 텍스트)을 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

최근 회사에서 새로운 프로젝트를 시작해서 vue-cli3.0으로 구성해서 기록을 하게 되네요.

Installation

먼저 cli3.0으로 업그레이드해야 하며, 명령은 다음과 같습니다. (공식 홈페이지에 가서 cli3.0 문서를 직접 읽어보는 것이 가장 좋습니다)

npm install -g @vue/cli-service-global

설치가 완료된 후 아래 그림과 같이 설치가 성공했는지 확인하세요.

3.0 이상이면 설치 성공입니다.

프로젝트 만들기

vue create hello-world

생성 과정에서 일련의 구성을 선택하라는 메시지가 표시됩니다. 키보드의 위쪽 및 아래쪽 키로 전환하고 스페이스바로 선택한 다음 Enter 키로 확인할 수 있습니다. 아래에서 하나씩 설명하겠습니다.

첫 번째 기본 구성은 babel과 eslint만 설치하며 나머지는 직접 구성해야 합니다. 여기서는 두 번째 수동 구성을 선택하지 않습니다. Enter 키를 누릅니다(키보드의 위쪽 및 아래쪽 키를 사용하여 선택 항목을 위아래로 전환할 수 있음) 手动配置。按回车（键盘上下键可以上下切换选择）

从上往下分别为（注：空格键可以选定）

babel：用来将es6的代码编译为es5
typescript：javascript的一个超集，我这里没选
Progressive Web App (PWA) Support： pwa技术
Router：路由
Vuex：全局状态管理
CSS Pre-processors： css预处理
Linter / Formatter： 风格检查器
Unit Testing：单元测试
E2E Testing：e2e测试

这里选择可以根据个人需求来进行选择

下一步，选择eslint的风格，这里不多啰嗦，直接选择第三个standard（应为前几个我也不了解-_-）

这里是问你，要在保存时设置lint还是在提交是设置lint，我这里设置保存时lint（第一个）

这里是问你将babel，eslint，postcss这些配置放在那里

In dedicated config files：放在相应的文件中
In package.json：放在package.json中

这里是问你是否保存预设，当你选择是的时候，下次你在执行vue create xxx的时候，会默认选择这些设置，建议选否

위부터 아래까지입니다(참고: 스페이스바를 선택할 수 있습니다)

rrreee여기서 선택하는 것은 개인의 필요에 따라 할 수 있습니다

다음 단계, 여기가 아닌 eslint 스타일을 선택하세요. 너무 길면 세 번째 표준을 선택하세요. (처음 몇 개는 모르겠습니다 -_-)

🎜🎜저장할 때나 제출할 때 린트를 설정할 것인지 묻고 있습니다. 여기에 저장할 때 린트를 설정했습니다.(첫번째)
🎜🎜🎜🎜이것은 babel, eslint 및 postcss 구성을 어디에 둘 것인지 묻는 메시지입니다.
🎜🎜🎜rrreee🎜여기서 기본값을 저장할지 묻는 메시지가 나타납니다. yes를 선택하면 다음에 vue create를 실행할 때 xxx, 이 설정은 기본적으로 선택되어 있습니다. 아니요를 선택하는 것이 좋습니다🎜🎜 이 단계에서 구성이 완료되고 설치가 완료될 때까지 기다립니다. 🎜🎜이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 🎜JavaScript Video Tutorial🎜 칼럼을 주목하세요! 🎜🎜🎜

위 내용은 vue-cli3.0 설치 및 구성 튜토리얼(그림 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!