-- 1. nodejs 다운로드 v16.13.1
https://nodejs.org/ko/
-- 2. CMD를 열고 Node.js 기반 vue 프로젝트 생성 프로그램 설치
CMD> npm i vue -g
CMD> npm i @vue/cli -g
-- 3. 설치 확인
CMD> vue --version
4.5.15설치됨.
-- 프로젝트 생성(node_modules가 자동으로 생성)
-- **** 중요) Vue3를 선택해서 설치
CMD> vue create vue_20211223
-- 프로젝트를 실행하기 위한 폴더 이동
CMD> cd vue_20211223
-- 필요한 모듈 설치
CMD> npm install axios --save
CMD> npm install vue-router@next --save
CMD> npm install element-plus --save
-- 서버구동
CMD> npm run serve
-- git에서 소스코드 clone
-- node_modules 복원
CMD> npm install
-- 서버구동
CMD> npm run serve
// 파일명 : src/routes/index.js
// node_module로 부터 필요한 라이브러리 import
import { createWebHistory, createRouter } from "vue-router";
// 추가하고자 하는 컴포넌트들..
import Home from '@/components/Home.vue';
import Join from '@/components/Join.vue';
// URL과 컴포넌트의 연결
const routes = [
{path : '/', redirect:'/home'},
{path : '/home', name:'Home', component:Home},
{path : '/join', name:'Join', component:Join},
]
// 실제 라우트 적용
const router = createRouter({
history : createWebHistory(),
routes,
});
// 프로젝트에서 적용하기 위해
export default router;
// 파일명 : src/main.js
// App.vue가 시작파일
import { createApp } from 'vue';
import App from './App.vue';
// UI Framework
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
// axios restful 호출
import axios from 'axios';
// routes 설정파일 위치 가져오기
import routes from './routes/index.js';
const app = createApp(App);
// 이 위치가 설정파일들의 적용
app.use( routes);
app.use( ElementPlus);
app.config.globalProperties.axios = axios;
app.mount('#app');
// 파일명 : App.vue
<el-container>
<el-header>
<el-menu :default-active="activeIndex" class="el-menu-demo"
mode="horizontal" @select="handleSelect" router="true">
<el-menu-item index="home">홈</el-menu-item>
<el-menu-item index="login" v-if="!logged">로그인</el-menu-item>
<el-menu-item index="logout" v-if="logged">로그아웃</el-menu-item>
<el-menu-item index="mypage" v-if="logged">마이페이지</el-menu-item>
<el-menu-item index="join">회원가입</el-menu-item>
</el-menu>
</el-header>
<el-main>
<router-view @changeLogged="changeLogged"></router-view>
</el-main>
<el-footer>© 2021.12.08</el-footer>
</el-container>// 파일명 : components/Join.vue
<div>
<el-card shadow="always">
{{member}}
<h3>회원가입</h3>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="아이디" label-width="120px">
<el-input v-model="member.userid" size="mini" placeholder="아이디"></el-input>
</el-form-item>
<el-form-item >
<el-button size="mini" >중복확인</el-button>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="암호" label-width="120px">
<el-input v-model="member.userpw" size="mini" placeholder="암호" show-password></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="암호확인" label-width="120px">
<el-input v-model="member.userpw1" size="mini" placeholder="암호확인" show-password></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="나이" label-width="120px">
<el-input v-model="member.userage" type="number" size="mini" placeholder="나이"></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="생년월일" label-width="120px">
<el-date-picker v-model="member.date" type="date" size="mini"
placeholder="날짜를 선택 하세요" style="width: 100%">
</el-date-picker>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="이메일" label-width="120px">
<el-input v-model="member.useremail" size="mini" placeholder="이메일"></el-input>
</el-form-item>
<el-form-item >@</el-form-item>
<el-form-item >
<el-select v-model="member.useremail1" size="mini" placeholder="선택">
<el-option v-for="tmp in emailoption" :key="tmp"
:label="tmp" :value="tmp"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="관심분야" label-width="120px">
<el-checkbox-group v-model="member.type">
<el-checkbox v-for="tmp in typeoption" :key="tmp"
:label="tmp"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="성별" label-width="120px">
<el-radio-group v-model="member.gen">
<el-radio label="남자"></el-radio>
<el-radio label="여자"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="약관내용" label-width="120px">
<el-input v-model="member.text" type="textarea" resize="none"></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label=" " label-width="120px">
<el-checkbox v-model="member.chk" label="약관동의"></el-checkbox>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label=" " label-width="120px">
<el-button type="primary" size="mini" @click="handleJoin">회원가입</el-button>
<el-button size="mini">홈</el-button>
</el-form-item>
</el-form>
</el-card>
</div>// 파일명 : Login.vue
<h3>로그인</h3>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="아이디" label-width="120px">
<el-input v-model="member.userid" size="mini" placeholder="아이디" style="width:192px"></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label="암호" label-width="120px">
<el-input v-model="member.userpw" size="mini" placeholder="암호" show-password></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
<el-form-item label=" " label-width="120px">
<el-button type="primary" size="mini" @click="handleLogin">로그인</el-button>
<el-button size="mini">홈</el-button>
</el-form-item>
</el-form>
</el-card>
</div>//파일명 : Logout.vue
<div>
</div>// 파일명 : Mypage.vue
