소개
vue.js는 단일 페이지 애플리케이션을 개발하는 데 사용할 수 있는 클라이언트측 JS 라이브러리입니다. 프로젝트를 선택하기 위해 Angular, React, Vuejs를 차례로 살펴보았는데 처음 두 개는 감탄했고 후자는 마음에 들었습니다. 간단하고 깔끔하며 고급 웹 구성 요소 구현도 포함되어 있기 때문입니다. 서류가 많지 않더라도 저는 그것을 선택하겠습니다. 다음으로, 먼저 시작 프로젝트를 생성하고 개발 프로세스와 관련된 개념과 구성 요소를 살펴봅니다.
vue.js
괜찮은 vuejs의 개발 과정은 거의 항상 webpack과 babel과 결합됩니다. 처음부터 해킹하는 것을 좋아하는 분들을 위해 구성이 매우 번거롭다는 점을 알려드립니다. 다행히 vue.js는 vue-cli라는 도구를 제공합니다. 단일 페이지 애플리케이션의 시작 코드를 빠르게 빌드하는 데 사용할 수 있습니다. 일반적으로 사용되는 개발 기능을 단 1분 만에 실행하세요.
스캐폴딩 코드를 사용할 수 있습니다.
핫 리로드. 구성 요소 코드가 업데이트된 후 자동으로 다시 로드
정적 코드 검사.
ES6 언어 기능
도구 준비
스캐폴딩 프로젝트를 생성하려면 vue-cli를 사용해야 합니다.
vue-cli 설치
$ npm install -g vue-cli
노드 버전 확인
내 버전은
$ node -v
v5입니다.
$ npm -v
3.10.6
문제가 많이 발생할 경우 해당 버전과 관련이 있을 수 있습니다. 내 거.
새 프로젝트 생성
실행:
$ vue init webpack my-project
두 번째 매개변수 webpack은 "webpack" 템플릿을 기반으로 vuejs 프로젝트를 생성하도록 지정합니다. 이 템플릿은 webpack 스캐폴딩 코드를 생성합니다.
그런데 웹팩이란 무엇일까요? 그 자체는 js, css, 이미지를 하나 이상의 js 파일로 패키징할 수 있는 패키징 도구이며, 다양한 유형의 파일을 변환하는 플러그인으로 다양한 로더를 지원할 수 있습니다. 실제로 webpack은 Vue 유형의 파일을 로드할 때 플러그인인 vue-loader를 사용하여 형식 변환을 수행하고, Vue 유형의 파일을 브라우저가 인식할 수 있는 js 파일로 변환합니다.
중국 사용자를 위한 주의 사항: vue init 명령은 npm을 사용합니다. npm 웨어하우스는 종종 느리거나 차단됩니다. ~/.npmrc를 편집하고 다음 내용을 추가하면 됩니다. >
이 작업은 훨씬 더 빠르게 수행될 수 있습니다.registry = https://registry.npm.taobao.org
현재 사용 가능한 템플릿은 다음과 같습니다.
webpack - webpack 및 vue-loader 플러그인을 통해 babel을 호출하여 .vue 파일을 다음에서 인식할 수 있는 js 파일로 컴파일할 수 있습니다. 고객. 핫 로딩, 코드 검사 및 테스트도 기본적으로 제공될 수 있습니다.
webpack-simple - 가장 간단한 웹팩 및 vue-loader 플러그인입니다.
browserify - Browserify + vueify의 조합을 통해 babel을 호출하여 .vue 파일을 클라이언트가 인식할 수 있는 js 파일로 컴파일할 수 있습니다. 핫 로딩, 코드 검사 및 테스트도 기본적으로 제공될 수 있습니다.
browserify-simple - 가장 간단한 Browserify + vueify 플러그인입니다.
이론적으로 webpack과 browserify는 기능이 유사하며 둘 다 패키징 도구로 사용할 수 있습니다. 그러나 webpack은 문서가 거의 없는 인기 도구이지만 모두가 이를 사용하려고 경쟁하고 있습니다. 그러니 걱정하지 말고 먼저 webpack을 사용해 보세요.
종속성을 설치하려면
$ cd my-project $ npm install $ npm run dev
http://localhost:8080으로 이동하여 효과를 확인하세요.
vue 파일 보기
vue 파일은 삼위일체입니다. 즉, css, html, js가 모두 하나의 파일에 있고 태그로 구분되어 있습니다. 구조를 더 잘 보려면 먼저 편집기에 해당하는 하이라이트 플러그인을 설치하는 것이 좋습니다.
구문 강조 표시 설치
저에게 익숙한 편집기는 숭고한 텍스트입니다. 플러그인을 설치하면 확장자가 .vue인 모든 vuejs 구성 요소 코드를 식별하고 코드 읽기를 용이하게 하는 강조 표시를 제공할 수 있습니다. 그리고 쓰세요. 이 플러그인은 vue-syntax-highlight라고 하며 vuejs에서 공식적으로 제공합니다. github.com에 있습니다. Sublime 패키지 디렉터리에 복제하면 됩니다. 내 컴퓨터에서 Sublime 패키지 디렉터리는 /Users/lcj/Library/Application Support/Sublime Text 3/Packages이므로 설치 프로세스는
cd /Users/lcj/Library/Application\ Support/Sublime\ Text\ 3/Packages git clone https://github.com/vuejs/vue-syntax-highlight
후 다시 시작할 수 있습니다. . 코드를 읽은 후 확장자가 .vue인 모든 파일에는 해당 하이라이트가 표시됩니다.
View vue
src/hello.vue에 있는 시작 코드에 구성 요소 코드가 있습니다. 보기:
파일은 세 부분으로 나누어져 있습니다. 태그는 js 코드로 둘러싸여 있으며 ES6 구문을 사용할 수 있습니다.
