vscode+vue 환경 구축 에 대한 상세 한 튜 토리 얼

vue.js 설치
1.프로필
Vue.jsː/, view 와 유사)는 사용자 인터페이스 를 구축 하 는 점진 적 인 프레임 워 크 입 니 다.다른 헤비급 프레임 워 크 와 달리 Vue 는 밑 에서 위로 증 량 개발 한 디자인 을 채택 했다.Vue 의 핵심 라 이브 러 리 는 그림 층 에 만 관심 을 가지 고 학습 하기 쉬 우 며 다른 라 이브 러 리 나 기 존 프로젝트 와 통합 하기 쉽다.다른 한편,Vue 는 단일 파일 구성 요소 와 Vue 생태 시스템 이 지원 하 는 라 이브 러 리 개발 의 복잡 한 단일 페이지 응용 을 구동 할 수 있 습 니 다.
Vue.js 의 목 표 는 가능 한 한 간단 한 API 를 통 해 응답 하 는 데이터 바 인 딩 과 조 합 된 보기 구성 요 소 를 실현 하 는 것 입 니 다.
Vue.js 는 MVVM 모델 의 구조 로 독자 가 angular 경험 이 있다 면 곧 Vue 에 입문 할 수 있 을 것 이다.
vue.js 의 특징:
사용 하기 쉬 운:HTML,CSS,JavaScript 를 이미 알 고 있 습 니까?즉시 안내 서 를 읽 으 면 응용 프로그램 을 구축 할 수 있 습 니 다!
유연성:간단 하고 작은 핵심,점진 적 인 기술 창고 로 그 어떠한 규모 의 응용 에 도 대처 할 수 있 습 니 다.
고 효율:16kb min+gzip 의 운행 크기,초고 속 가상 DOM,가장 안심 할 수 있 는 최적화
2.환경 구축
vue 추천 개발 환경:
Node.js:javascript 실행 환경(runtime),서로 다른 시스템 에서 각종 프로 그래 밍 언어 를 직접 실행 합 니 다.
npm:Nodejs 의 패키지 관리자.국내 에 서 는 npm 사용 이 느 리 기 때문에 타 오 바 오 NPM 미 러 사용 을 추천 합 니 다(http://npm.taobao.org/）$ npm install -g cnpm --registry=https://registry.npm.taobao.org웹 팩:이 주요 용 도 는 CommonJS 의 문법 을 통 해 모든 브 라 우 저 에서 발표 해 야 할 정적 자원 을 해당 하 는 준 비 를 하 는 것 입 니 다.예 를 들 어 자원 의 합병 과 포장 등 입 니 다.
vue-cli:사용자 가 Vue 프로젝트 템 플 릿 을 생 성 합 니 다.
3.node.js 설치
node.js 홈 페이지 에서 node 를 다운로드 하고 설치 합 니 다.설치 과정 은 간단 합 니 다.'다음'으로 가면 됩 니 다.(바보 식 설치)
설치 가 완료 되면 명령 행 도 구 를 열 고 node-v 를 입력 하 십시오.다음 그림 은 해당 버 전 번호 가 나타 나 면 설치 에 성공 한 것 을 설명 합 니 다.

npm 패키지 관리 자 는 node 에 통합 되 어 있 기 때문에 npm-v 를 직접 입력 하면 다음 그림 과 같이 npm 버 전 정 보 를 표시 합 니 다.

4.cnpm 설치
일부 npm 의 일부 자원 이 차단 되 거나 외국 자원 의 원인 으로 인해 npm 로 의존 가방 을 설치 하 는 데 실패 할 수 있 습 니 다.모든 저 는 npm 의 국내 미 러 인 cnpm 가 필요 합 니 다.
명령 행 에 npm install -g cnpm --registry=http://registry.npm.taobao.org 을 입력 하고 기다 리 십시오.설치 가 완료 되 었 습 니 다.아래 그림 과 같 습 니 다.

완성 되면 npm 대신 cnpm 로 의존 팩 을 설치 할 수 있 습 니 다.cnpm 에 대해 더 알 고 싶 으 면 타 오 바 오 npm 미 러 홈 페이지 를 보 세 요.
5.vue-cli 비계 구축 도구 설치
명령 행 에서 명령 npm install -g vue-cli 을 실행 한 후 설치 가 완료 되 기 를 기 다 립 니 다.
상기 세 부 를 통 해 우리 가 준비 해 야 할 환경 과 도 구 는 모두 준비 되 었 고 그 다음 에 vue-cli 를 사용 하여 프로젝트 를 구축 하기 시작 했다.
6.vue-cli 로 프로젝트 구축
항목 을 만 들 려 면 먼저 디 렉 터 리 를 선택 한 다음 명령 행 에서 디 렉 터 리 를 선택 한 디 렉 터 리 로 옮 겨 야 합 니 다.새 항목 을 저장 하기 위해 데스크 톱 을 선택 하면 디 렉 터 리 cd 를 데스크 톱 으로 옮 겨 야 합 니 다.다음 그림 입 니 다.

데스크 톱 디 렉 터 리 에서 명령 행 에서 명령 vue init webpack firstVue 을 실행 합 니 다.이 명령 을 설명 하 십시오.이 명령 은 프로젝트 를 초기 화 하 는 것 입 니 다.그 중에서 웹 팩 은 구축 도구,즉 전체 프로젝트 는 웹 팩 을 기반 으로 한 것 입 니 다.그 중에서 firstVue 는 전체 프로젝트 폴 더 의 이름 입 니 다.이 폴 더 는 지정 한 디 렉 터 리 에 자동 으로 생 성 됩 니 다.(제 인 스 턴 스 에 서 는 데스크 톱 에서 이 폴 더 를 생 성 합 니 다)다음 그림 입 니 다.

초기 화 명령 을 실행 할 때 항목 이름,설명,작성 자 등 기본 적 인 옵션 을 입력 하 게 합 니 다.

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

이것 이 바로 전체 프로젝트 의 디 렉 터 리 구조 입 니 다.그 중에서 저 희 는 주로 src 디 렉 터 리 에서 수정 합 니 다.이 프로젝트 는 아직 구조 구조 구조 일 뿐 전체 프로젝트 에 필요 한 의존 자원 이 설치 되 지 않 았 습 니 다.다음 과 같 습 니 다.

7.설치 항목 에 필요 한 의존
의존 패 키 지 를 설치 하려 면 먼저 cd 에서 프로젝트 폴 더(firstVue 폴 더)로 이동 한 다음 명령 cnpm install 을 실행 하여 설 치 를 기다 리 십시오.

설치 가 완료 되면 프로젝트 디 렉 터 리 firstVue 폴 더 에 node 가 하나 더 생 깁 니 다.modules 폴 더,이 안 은 우리 프로젝트 에 필요 한 의존 패키지 자원 입 니 다.

의존 패 키 지 를 설치 하면 모든 항목 을 실행 할 수 있 습 니 다.
8.실행 항목
프로젝트 디 렉 터 리 에서 명령 npm run dev 을 실행 하면 열 로 딩 방식 으로 응용 프로그램 을 실행 합 니 다.열 로 딩 은 코드 를 수정 한 후에 수 동 으로 브 라 우 저 를 새로 고치 지 않 아 도 수 동 으로 수 정 된 효 과 를 볼 수 있 습 니 다.

여기 서 npm run dev 명령 을 간단하게 소개 합 니 다.그 중에서'run'은 package.json 파일 에서 scripts 필드 의 dev,즉 node build/dev-server.js 명령 의 단축 키 입 니 다.
프로젝트 가 실 행 된 후 브 라 우 저 는 자동 으로 localhost:8080 을 엽 니 다.(브 라 우 저가 자동 으로 열 리 지 않 으 면 수 동 으로 입력 할 수 있 습 니 다.)실행 에 성공 하면 다음 과 같은 화면 을 볼 수 있 습 니 다.

2.설치 설정 vscode
1.Visual Studio Code 편집 기 는 Windows 에 설치 하기 쉬 우 며,직접 setup.exe 를 설치 합 니 다.설치 후 처음으로 설정 플러그 인 을 시작 합 니 다.플러그 인 설정 은 반드시 인터넷 에 연결 되 어 인터넷 에서 다운로드 해 야 합 니 다.아래 그림 에서 왼쪽 확장 을 누 르 십시오:

2.설정
파일->첫 번 째 옵션->설정

{
 "workbench.iconTheme": "vscode-icons",
 "editor.fontSize": 20,
 "editor.renderIndentGuides": false,
 "files.autoSave": "afterDelay",
 "liveSassCompile.settings.formats":[
  {
   "format": "expanded",
   "extensionName": ".css",
   "savePath": "/css"
  },
  {
   "extensionName": ".min.css",
   "format": "compressed",
   "savePath": "/css"
  }
 ],
 "liveSassCompile.settings.excludeList": [
  "**/node_modules/**",
  ".vscode/**"
 ],
 "liveSassCompile.settings.generateMap": true,
 "easysass.formats": [
  {
   "format": "expanded",
   "extension": ".css"
  },
  {
   "format": "compressed",
   "extension": ".min.css"
  }
 ],
 "easysass.targetDir": "./css/",
 "background.customImages": [
  "file:///D://222.png"
 ],
 "background.useDefault": false,
 "background.style": {
  "content": "''",
  "pointer-events": "none",
  "position": "absolute",
  "z-index": "99999",
  "width": "102%",
  "height": "100%",
  "background-position": "0%",
  "background-repeat": "no-repeat",
  "opacity": 0.3
 },
 "editor.quickSuggestions": {
  "strings": true
 },
 "cssrem.rootFontSize": 12,
 "cssrem.autoRemovePrefixZero": false,
 "cssrem.fixedDigits": 3,
 "beautify.language": {
  "js": {
   "type": [
    "javascript",
    "json"
   ],
   "filename": [
    ".jshintrc",
    ".jsbeautify"
   ]
  },
  "css": [
   "css",
   "scss"
  ],
  "html": [
   "htm",
   "vue",
   "html"
   
  ]
 },
 "workbench.colorTheme": "Dark-Dracula",
 "vetur.format.defaultFormatter.html": "js-beautify-html"
 // "emmet.syntaxProfiles":{
 //  "vue-html":"html",
 //  "vue":"html"
 // },
 // "files.associations": {
 //  "*.vue":"html"
 // },
 // "eslint.validate":["javascript","javascriptreact","html"]
}

3.집적 요소
nodejs 의 모든 것 을 설치 하고 전체 프로젝트 를 정상적으로 실행 한 후 element 를 프로젝트 에 통합 하 는 절 차 는 다음 과 같 습 니 다.
1.cmd 명령 행 에서 프로젝트 루트 디 렉 터 리 에 들 어가 cnpm i element-ui -S 을 입력 하 십시오.
2.설치 가 완료 되면 package.json 파일 은 element-ui 의존 도 를 증가 시 킵 니 다.

3.main.js 에 전체 도입 방식 으로 다음 내용 을 기록 합 니 다.

여기 서 특히 주의해 야 할 것 은 앞에서 언급 한 새로운 주석 이 떨 어 진 문 구 는 주석 이 필요 하지 않 습 니 다.그 는 스타일 파일 입 니 다.주석 이 떨 어 지면 이 프레임 스타일 을 참조 할 수 없습니다.설치 할 때 오류 가 발생 한 것 은 안의 경로 와 인터넷 에서 제공 하 는 일치 하지 않 고 실제 적 으로 자신의 프로젝트 아래 의 경로 이름 에 따라 정 의 됩 니 다.내 프로젝트 아래 이 프레임 의 스타일 경 로 는 다음 과 같 습 니 다.
element-ui/lib/theme-chalk/index.css
4.설치 의존 cnpm install 사용 가능
5.마지막 으로 npm run dev 실행
6.App.vue 파일 에 추가 하 는 것 을 테스트 할 수 있 습 니 다.

효과 표시

vscode+vue 환경 구축 에 관 한 상세 한 튜 토리 얼 을 소개 합 니 다.vscode+vue 환경 구축 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!