머리말:
플랫폼을 개발하려면 백엔드 기술을 숙달해야 할 뿐만 아니라 프론트엔드 페이지를 통해 표시해야 합니다. 이렇게 하면 미적 효과를 달성할 뿐만 아니라 작업을 용이하게 하여 좋은 결과를 얻을 수 있습니다. 인터랙티브 효과.
여기에서 Vue 프런트 엔드 프레임워크를 접하게 되었으며, 앱용 Ele.me Mint UI, 웹 페이지용 We UI 및 Tencent WeChat의 WeChat 애플릿과 같이 시장에 유용한 Vue 기반 프런트 엔드 구성 요소 라이브러리가 많이 있습니다. , 및 PC 인터페이스 제공 iView UI, 모든 수준의 layUI 및 지금 배우려는 Ele.me에서 시작한 요소 UI는 주로 브라우저 인터페이스 디스플레이 프레임 워크에 사용됩니다.
1. node.js 설치
"소프트웨어 설치 패키지" 디렉터리에 node-v12.18.2-x64.msi를 설치합니다.
다운로드 주소: https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi
터미널 창에서 해당 노드 또는 npm이 설치되어 있는지 확인합니다.
노드 -v
npm -v
2. 타오바오 cnpm 설치
NPM 미러_NPM 다운로드 주소_NPM 설치 튜토리얼-Alibaba Open Source Mirror Station
터미널을 열고 다음 명령을 실행합니다.
npm 설치 -g cnpm --registry= https://registry.npm.taobao.org
cnpm 정보 조회: cnpm -v
3. vue-cli 스캐폴딩 설치
#使用npm
npm install -g @vue/cli
#或者使用淘宝npm镜像源（建议使用cnpm）
cnpm install -g @vue/cli설치 프로세스 중에 다음 오류가 보고되는 경우:
설치하려면 다음을 실행할 수 있습니다. npm install --save vue-runtime-helpers
다음 명령을 실행합니다.
npm 설치 --vue-runtime-helpers 저장
4. vs code 또는 webstorm을 사용하여 엔지니어링 프로젝트 생성
소스코드 관리를 위해 git 설치를 권장합니다.
#创建项目
vue create 项目名
或者在webstorm里新建一个vue.js的项目
#如果使用gitbash
winpty vue.cmd create 项目名
#或者创建默认工程目录
vue create 项目名 --default
#用命令vue init webpack+项目名称
#来生成和初始化项目，推荐初始化项目名称到加入路由那处选择默认，之后全选no，之后npm初始化那里选推荐默认选项npm就好;
如下图所示： 
터미널 창에 vue 입력
생성된 프로젝트 디렉토리를 편집기로 열기
5. 프로젝트 시작
방법 1:
터미널을 열고 다음 명령을 실행합니다.
cnpm 실행 서브
방법 2:
지정된 프로젝트 디렉토리로 이동하여 프로젝트를 실행합니다.
cd 프로젝트 디렉토리(cd my_vue)
cnpm 실행 서브
구성 요소 관계:
구성요소 디렉토리 - 하위 구성요소 파일 저장
App.vue----부모 컴포넌트 파일
- 상위 구성 요소가 하위 구성 요소를 사용하려는 경우 다음 사항에 주의하십시오.
- <script>에서 하위 구성 요소 모듈 가져오기
- 내보내기 기본값에서 구성 요소의 하위 구성 요소 선언
- 템플릿에서 참조
디렉터리 확인
| 디렉토리/파일 | 설명하다 |
|---|---|
| 구성 | 포트 번호 등을 포함한 구성 디렉토리 초보자를 위해 기본값을 사용할 수 있습니다. |
| node_modules | npm에 의해 로드된 프로젝트 종속성 |
| 소스 | 다음은 우리가 개발하고자 하는 디렉토리입니다. 기본적으로 수행할 모든 작업은 이 디렉토리에 있습니다. 여기에는 여러 디렉토리와 파일이 포함되어 있습니다.
|
| 공전 | 그림, 글꼴 등과 같은 정적 리소스 디렉토리 |
| 시험 | 초기 테스트 디렉토리, 삭제 가능 |
| .xxxx 파일 | 구문 구성, git 구성 등을 포함한 일부 구성 파일입니다. |
| index.html | 홈 항목 파일에는 일부 메타 정보 또는 통계 코드를 추가할 수 있습니다. |
| 패키지.json | 프로젝트 구성 파일. |
| README.md | 프로젝트 문서, 마크다운 형식 |