Vue.js 시작하기
- 高洛峰원래의
- 2016-11-30 16:53:371734검색
소개
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에 있는 시작 코드에 구성 요소 코드가 있습니다. 보기:
파일은 세 부분으로 나누어져 있습니다. d477f9ce7bf77f53fbcf36bec1b69b7a 태그는 js 코드로 둘러싸여 있으며 ES6 구문을 사용할 수 있습니다. c9ccee2e6ea535a969eb3f532ad9fe89 내의 콘텐츠는 CSS 코드입니다. 이 구성 요소를 사용하는 코드는 app.vue에 있습니다. 스크립트에서 먼저<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style> 태그를 선언한 다음 HTML import Hello from './components/Hello'
export default {
components: {
Hello
}
}에서 태그를 사용하면 됩니다. 매우 큰 하이라이트입니다! vue 파일에는 모든 내부 js, css 및 html이 포함되어 있으며 완전한 자체 포함 구성 요소로 사용할 수 있습니다. 제가 개인적으로 매우 존경하는 매우 흥미로운 웹 구성 요소가 여기에 있습니다. <hello></hello>
vue文件内的语法，当然不是浏览器所可以支持的，浏览器不认识它！魔术在于webpack+vue-loader+babel 。webpack加载vue文件首先调用vue-loader，vue-loader会调用babel转换ES6代码为ES5代码，把css和html作为模块也转换为客户端js代码。这些js代码浏览器就可以识别了。
另外，我们看看热加载。把hello组件的msg值改改。然后保存。浏览器会自动刷新的。这就是热加载了。对于频繁修改调试的程序员，有了热加载，得轻松不少。
安装chrome开发工具
我习惯使用的浏览器是chrome，可以安装vue的开发工具到chrome插件内。在chrome市场内查询vue-developertools 。有了它，可以在chrome console内看到更加友好的vue错误提示。
回归日常
我们所有的编辑修改一旦完成需要更新网站时，最终需要把所有的vue，ES6代码等编译出来到ES5的js文件。现在可以构建这些webpack代码：
npm run build
此命令会把我们已经有的开发成果，编译到dist目录下，就是说编译成前端可以直接使用的html、js、css。
有了它们，我就可以使用一个http 静态服务器，在dist目录内执行：
cd dist npm install http-server -g http-server
然后，到http://localhost:8080查看效果。和运行npm run dev看到的一模一样。
更多
vue还有两个插件，对开发者很有价值
加强版 ，访问服务器
npm install vue-resource --save
安装路由
npm install vue-router --save
细节展开
我们走马观花的看了webpack、vue-loader、babel 、vue组件，未来需要一些篇幅去详细说明它们。