프로젝트 단계 만들기
node.js와 VsCode를 설치했다면 Vue 지식을 배우기 전에 프로젝트를 만들어 보겠습니다.
npm install -g vue-cli, 그런 다음 설치를 기다립니다 (vue-cli는 Vue 프로젝트를 빠르게 빌드하는 데 도움이됩니다).npm install -g webpack명령, 설치 대기 (js 패키징 용 도구)- hellovue라는 프로젝트를 만들고 아무 이름이나 입력 한 다음 Enter 키를 누릅니다.
vue init webpack hellovue - 터미널에서 만든 프로젝트를 vscode로 엽니 다. 디렉토리 구조는 왼쪽에 표시됩니다.
5. package.json에서 프로젝트를 시작하는 명령을 찾습니다. npm run dev
6. 터미널의 마지막 레벨은 프로젝트 이름입니다.hellovue
7.보기 :http://localhost:8083/#/
디렉토리 구조 분석
Vue 프로젝트 구조 시작 원칙
Vue 호출 순서 : index.html → main.js → app.vue → index.js → 구성 요소 / 구성 요소
일반적으로 프로젝트 생성 후 index.html, main.js, app.vue의 세 파일이 있습니다.
1. index.html : 모든 vue 파일은 단일 페이지 형식으로 개발되고 모든 vue 구성 요소는 index.html을 통해 렌더링 및로드됩니다.
2. main.js : vue 프로젝트가 처음 시작될 때로드되는 컴포넌트를 제어하는 java의 입력 함수와 동일
3. el : '# app'은 index.html의 앱 컴포넌트에 후크됩니다. . 공식 웹 사이트는 다음 模板将会替换挂载的元素됩니다과 같이 ..
4. App.vue는 기본적으로 루트 구성 요소입니다.
생성 된 내보내기의 이름 속성 구성 요소 이름 : 라이프 사이클 함수
HelloWorld 프로젝트
샘플 페이지를 Hello 단어 페이지로 수정하십시오.
프로젝트 항목 파일 App.vue를 열고 다음과 같이 수정합니다.
<template>
<div class="hello">
<h1>{
{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Hello World！'
}
}
}
</script>
페이지 새로 고침 : 파일에 페이지
를 계속 app.vue쓸 수는 없지만 우리 index.html의 용도는 무엇입니까? , 웹 페이지의 Title 부분에는에서 index.html정의 된 Title 이로드되고 본문 부분에는 App.vue에서 정의 된 부분이 로드되어 꼼꼼하게 분석 합니다.
실행 프로젝트에서 main.js프로젝트로 入口文件실행, 找到其实例需要挂载的位置시작 부분에서, index.html을,이다, index.html을의 마운트 지점의 내용이 표시되지만 다음 인스턴스의 구성 요소에있을 것입니다 模板中的内容所取代우리가, index.html의 본문 내용이 잠시 표시됩니다.
index.html의 내용을 홈페이지에 표시하는 방법 main.js의 템플릿을 주석 처리하면됩니다.
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App }
// template: '<App/>'
})
브라우저 콘솔 index.html을 보면 페이지의 내용을 볼 수 있습니다 .
index.html페이지
기타 문서에 대한 설명 :
-build
-build.js 生产环境构建脚本
-utils.js 构建相关工具方法
-webpack.base.conf.js webpack基础配置
-webpack.dev.conf.js webpack开发环境配置
-webpack.prod.conf.js 生产环境配置
-confg 项目配置
--dev.env.js 开发环境变量
--index.js 项目配置文件
--prod.env.js 生产环境变量
--test.env.js 测试环境变量
-package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
-src 源码目录
--main.js 入口js文件
--app.vue 根组件
--components 公共组件目录
--title.vue
프로젝트 프레임 워크를 이해하고 함께 vue의 구문을 배우기 시작하겠습니다.