Vue 및 Element 구성 요소를 설치하는 방법

이번에는 Vue 및 Element 컴포넌트 설치 방법을 알려드리겠습니다. Vue 및 Element 컴포넌트 설치 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

1. 새로운 vue 프로젝트를 생성하세요

1. 먼저 nodejs를 다운로드해야 합니다. 설치 후 명령 창을 열고 npm 패키지 관리 도구를 사용하세요

npm은 노드에 통합되어 있으므로 npm-v를 직접 입력하면 npm 버전 정보를 볼 수 있습니다

2. 일부 npm 리소스가 차단되거나 외부 리소스이므로 npm을 사용하여 종속 패키지를 설치할 때 종종 실패하므로 npm의 국내 미러인 cnpm도 필요합니다.

3. 명령줄에 npm install -g를 입력하세요. cnpm--registry=http://registry.npm.taobao.org 그런 다음 설치가 완료될 때까지 기다린 다음 cnpm을 사용하여 종속 패키지를 설치할 수 있습니다. 여기서는 npm을 사용하여 설치하는 것이 가장 좋다고 말씀드립니다. . 때때로 cnpm이 모든 종속성을 다운로드하지 못하는 경우 npm이 느리게 다운로드되는 경우 cnpm을 사용해 종속 패키지를 설치할 수 있습니다.

4. vue-cli 비계 구축 도구를 설치합니다. 명령줄에서 npm install -g vue-cli 명령을 실행하고 설치가 완료될 때까지 기다립니다.

5. vue-cli를 사용하여 프로젝트를 빌드합니다. 새 프로젝트를 저장할 디렉터리를 선택하세요

6. 데스크탑 디렉토리의 명령줄에서 vue init webpack firstVue 명령을 실행합니다. 이 명령어에 대해 설명해주세요. 이 명령어는 webpack이 빌드 도구인 프로젝트, 즉 전체 프로젝트가 webpack을 기반으로 하는 프로젝트를 초기화한다는 의미입니다. 여기서 firstVue는 전체 프로젝트 폴더의 이름입니다.

7. 초기화 명령을 실행할 때 사용자에게 프로젝트 이름, 설명, 작성자 및 기타 정보와 같은 몇 가지 기본 옵션을 입력하라는 메시지가 표시됩니다. 필드를 채우지 않으려면 Enter 키를 누르고 기본값을 누르십시오.

8. firstVue 폴더를 엽니다. 프로젝트 파일은 다음과 같습니다.

9. npm install 명령

을 통해 종속성 패키지를 설치합니다(새로 생성된 프로젝트 폴더에 있어야 함). 10. 종속성을 설치한 후 npm run dev를 통해 프로젝트를 실행합니다. 기본 포트는 일반적으로 8080입니다. 브라우저를 열고 localhost:8080

를 입력합니다. 11. 포트 8080이 사용 중이라면 구성 파일config/index.js

을 수정해야 합니다.

둘째, Element를 소개합니다

1 현재 디렉터리에서 npm i element-ui -S

을 실행합니다.

2. src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'	//手动变红
import '../node_modules/element-ui/lib/theme-chalk/index.css'	//手动变红
//具体路径有的不同，vue运行报错请看第五点
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)	//手动变红
new Vue({
 el: '#app',
 router,
 template: '<app></app>',
 components: { App }
})

에 코드(빨간색)를 추가하세요.

3. 그런 다음 .vue 파일에서 직접 사용할 수 있습니다. 흥미로운 내용이 있으니 온라인에서 PHP 중국어 기타 관련 기사를 주목해 주세요! 추천 자료:

JS에서 WeChat ID의 무작위 전환을 구현하는 방법

vue.js 하단 탐색 모음에 하위 경로가 표시되지 않는 경우 해야 할 일

다운로드 방법 섹션

의 Nginx 구성 파일

위 내용은 Vue 및 Element 구성 요소를 설치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!