초보 vue 구축 단일 페이지 응용 인 스 턴 스 코드
단계:
1.vue-cli 로 프로젝트 만 들 기
2.vue-router 를 사용 하여 단일 페이지 경로 구현
3.vuex 로 데이터 흐름 관리
4.vue-resource 를 사용 하여 node 서버 에 요청
5.vue 파일 을 사용 하여 구성 요소 화 된 개발
1.디 렉 터 리 구조:
2.건설 프로젝트
vue-cli:sudo npm install-g vue-cli 먼저 설치
vue-cli 를 사용 하여 초기 화 프로젝트 구축:vue init webpack project(webpack 프로젝트 를 만 들 고 다운로드 의존)
입력 명령 진입 항목:cd my-project
설치 의존:npm install
npm i
실행 시작:npm run dev(또는 입력http://localhost:8080),열 로드 에서 우리 의 응용 을 실행 합 니 다.
package.json 의 scripts 대상 을 찾 아 node bulid/dev-server.js 를 실행 합 니 다.
이 파일 에 웹 팩 을 설정 하면 프로젝트 파일 을 컴 파일 하고 서버 를 실행 할 수 있 습 니 다.
이것들 이 모두 준 비 된 후에 우 리 는 우리 의 루트,XHR 요청,데이터 관 리 를 위해 세 개의 라 이브 러 리 를 다운로드 해 야 한다.우 리 는 vue 의 홈 페이지 에서 그들 을 찾 을 수 있다.그리고 저 희 는 boottstrap 을 제 UI 라 이브 러 리 로 사용 합 니 다.
npm i vue-resource vue-router vuex bootstrap --save
3.프로젝트 시작
항목 초기 화(main.js)
응용 파일 을 보면 src 디 렉 터 리 에서 App.vue 와 main.js 파일 을 찾 을 수 있 습 니 다.Vue 와 App 을 도입 하고 vue 의 인 스 턴 스 를 만 들 었 습 니 다.(router 줄 에 App 구성 요소 router.start(App,'\#app')가 도입 되 었 기 때 문 입 니 다.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
<body>
<div id="app"></div>
</body>
<template>
<div id="app">
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Router Basic - 01</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<ul class="list-group">
<!-- v-link -->
<a class="list-group-item"><router-link to="/home">Home</router-link></a>
<a class="list-group-item"><router-link to="/about">About</router-link></a>
<a class="list-group-item"><router-link to="/contact">Contact</router-link></a>
</ul>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<template id="contact">
<div>
<h1>Home</h1>
<p>This is the tutorial about Contact.</p>
</div>
</template>
<script>
export default {
'/hello': 'Hello'
}
</script>
<template id="about">
<div>
<h1>About</h1>
<p>This is the tutorial about vue-router.</p>
</div>
</template>
<script>
export default {
'/about': 'About'
}
</script>
<template id="contact">
<div>
<h1>Contact</h1>
<p>This is the tutorial about Contact.</p>
</div>
</template>
export default {
'/contact': 'contact'
}
</script>
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Home from '@/components/Home'
import About from '@/components/About'
import Contact from '@/components/Contact'
import 'bootstrap/dist/css/bootstrap.css'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/contact',
name: '/Contact',
component: Contact
}
]
})
자세 한 동작:
git clone https://github.com/cinderellastory415/vue-demo/tree/master/spa
npm install
npm run dev
이상 명령 을 입력 하면 효 과 를 볼 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
