vite+vue 3+element-plus 프로젝트 구축 방법 절차
14227 단어 vitevue3ElementPlus
터미널 에서 다음 명령 을 실행 하면 Vite 를 사용 하여 Vue 프로젝트 를 빠르게 구축 할 수 있 습 니 다.
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
Element Plus 도입Element Plus 설치:
npm install element-plus --save
main.js 에 Element Plus 완전 도입:
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
SCSS 도입명령 을 실행 하여 sas,npm i sas-D 를 설치 한 다음 vue 파일 의 style 태그 에 lang="scss"를 추가 하면 됩 니 다.이것 은 이전 vue 2 와 같 습 니 다.
npm i sass -D
eslint 도입eslint 설치
npm i eslint -D
이 항목 을 eslint 로 초기 화 합 니 다.
npx eslint --init
힌트 에 따라 설정 합 니 다.이것 은 제 가 선택 한 설정 입 니 다.vue-router 도입
Vue Router 4 설치
npm install vue-router@4
src 디 렉 터 리 에 router 폴 더 를 새로 만 들 고 router 에 index.js 를 새로 만들어 경로 설정 을 합 니 다.
import * as VueRouter from 'vue-router'
const routes = [
{
path: '/',
component: () => import('../page/Home.vue')
}, {
path: '/login',
component: () => import('../page/Login.vue')
}
]
export default VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes
})
main.js 에서 이 미들웨어 를 사용 합 니 다.
import router from './router'
//...
app.use(router)
vuex 도입vuex 설치
npm install vuex@next --save
src 에서 store 경 로 를 만 들 고 store 에서 index.js 를 만 듭 니 다.
import { createStore } from 'vuex'
export default createStore({
state () {
return {
username: ''
}
},
mutations: {
setUserName (state, payload) {
state.username = payload
}
}
})
main.js 에서 store 사용 하기
import vuex from './store'
//...
app.use(vuex)
axios 도입네트워크 요청 에 대해 서 는 axios 를 사용 합 니 다.먼저 axios 를 설치 합 니 다.
npm i axios
src 디 렉 터 리 에 api 디 렉 터 리 를 만 들 고 api 경로 에서 axios.js 를 만 들 며 axios 인 스 턴 스 를 설정 합 니 다.
// axios.js
import axios from 'axios'
// import config from '../../config'
import { useRouter } from 'vue-router'
export default function () {
// 1. , token,
const token = localStorage.getItem('token')
let instance = axios
if (token) {
instance = axios.create({
// baseURL: config.server,
headers: {
authorization: 'Bearer ' + token
}
})
}
const router = useRouter()
instance.interceptors.response.use(
(resp) => {
// 2. , token, token (localstorage)
if (resp.data.data.token) {
localStorage.setItem('token', resp.data.data.token)
}
// 3. , 403( token,token ), token
if (resp.data.code === 403) {
localStorage.removeItem('token')
localStorage.removeItem('username')
router.push({ name: 'Login' })
}
return resp
},
(err) => {
return Promise.reject(err)
}
)
return instance
}
api 경로 에서 index.js 를 만 들 고 api 를 작성 합 니 다.
import request from './axios.js'
import config from '../../config'
export default {
//
login (params) {
return request().post(`${config.server}/login`, params)
},
//
getUserList (params) {
return request().get(`${config.server}/user/list`, {
params: params
})
},
//
createUser (params) {
return request().post(`${config.server}/user/`, params)
},
//...
다음은 vue 3 의 composition api 를 사용 하여 구성 요소 개발 을 진행 합 니 다.여기 서 User 모듈 의 개발 을 열거 합 니 다.
<template>
<div class="user-wrap">
<el-button
class="create-btn"
type="success"
size="small"
@click="handleCreate"> +</el-button>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label=" "
prop="username">
</el-table-column>
<el-table-column
label=" "
prop="password">
</el-table-column>
<el-table-column
align="right">
<template #header>
<el-input
v-model="search"
@blur="searchUser"
size="mini"
placeholder=" "/>
</template>
<template #default="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)"> </el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"> </el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:hide-on-single-page="hideOnSinglePage"
class="page-wrap"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
<el-dialog title=" " v-model="dialogFormVisible">
<el-form :model="form">
<el-form-item label=" " :label-width="formLabelWidth">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label=" " :label-width="formLabelWidth">
<el-input v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false"> </el-button>
<el-button type="primary" @click="confirmUser"> </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { ref, computed } from 'vue'
import api from '../../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
setup () {
let status = ''
let userId = null
const formLabelWidth = ref('120px')
//
const tableData = ref([])
async function getList (params) {
const res = await api.getUserList(params)
if (res.data.success) {
tableData.value = res.data.data.userList
totalCount.value = res.data.data.count
search.value = ''
} else {
ElMessage.error(' :' + res.data.msg)
}
}
getList()
const form = ref({
username: '',
password: ''
})
const dialogFormVisible = ref(false)
//
async function confirmUser () {
//
if (!(form.value.username && form.value.password)) {
ElMessage.error(' ')
return
}
switch (status) {
case 'create':
createUser(form.value)
break
case 'edit':
updateUser(userId, form.value)
break
}
}
//
async function handleCreate () {
form.value = {
username: '',
password: ''
}
dialogFormVisible.value = true
status = 'create'
}
//
async function createUser (params) {
const res = await api.createUser(params)
if (res.data.success) {
getList()
ElMessage.success({
message: ' ',
type: 'success'
})
dialogFormVisible.value = false
} else {
ElMessage.error(' :' + res.data.msg)
}
}
//
async function handleEdit (index, row) {
console.log(index, row)
dialogFormVisible.value = true
status = 'edit'
form.value.username = row.username
form.value.password = row.password
userId = row.id
}
//
async function updateUser (id, params) {
const res = await api.updateUser(id, params)
if (res.data.success) {
ElMessage.success({
message: ' ',
type: 'success'
})
getList()
dialogFormVisible.value = false
} else {
ElMessage.error(' :' + res.data.msg)
}
}
//
const handleDelete = async (index, row) => {
ElMessageBox.confirm(' , ?', ' ', {
confirmButtonText: ' ',
cancelButtonText: ' ',
type: 'warning'
}).then(async () => {
await delUser(row.id)
}).catch(() => {
ElMessage({
type: 'info',
message: ' '
})
})
}
//
async function delUser (id) {
const res = await api.delUser(id)
if (res.data.success) {
getList()
ElMessage.success({
type: 'success',
message: ' !'
})
} else {
ElMessage.error(' :' + res.data.msg)
}
}
//
const search = ref('')
async function searchUser () {
currentPage.value = 1
pageSize.value = 10
if (search.value === '') {
getList({ pageindex: currentPage.value, pagesize: pageSize.value })
return
}
currentPage.val = 1
const res = await api.findUserByUsername({ username: search.value })
if (res.data.success) {
tableData.value = res.data.data.userList
ElMessage.success({
message: ' ',
type: 'success'
})
} else {
ElMessage.error(' :' + res.data.msg)
}
}
//
const totalCount = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
function handleSizeChange (val) {
pageSize.value = val
getList({ pageindex: currentPage.value, pagesize: val })
}
function handleCurrentChange (val) {
currentPage.value = val
getList({ pageindex: val, pagesize: pageSize.value })
}
//
const hideOnSinglePage = computed(() => {
return totalCount.value <= 10
})
return {
tableData,
search,
dialogFormVisible,
form,
formLabelWidth,
createUser,
handleEdit,
handleDelete,
confirmUser,
handleCreate,
searchUser,
currentPage,
totalCount,
handleSizeChange,
handleCurrentChange,
pageSize,
hideOnSinglePage
}
}
}
</script>
<style lang="scss" scoped>
.user-wrap{
width: 100%;
min-width: 500px;
.create-btn{
margin-bottom: 10px;
display: flex;
justify-content: flex-end;
}
.page-wrap{
margin-top: 10px;
}
}
</style>
vite+vue 3+element-plus 프로젝트 구축 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vite 구축 vue 3+Element Plus 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React 및 Vite로 간단한 Web3 애플리케이션을 구축하는 방법(1부)이 부분에서는 을 사용하여 블록체인 네트워크에 연결하는 방법을 배웁니다. 시작하려면 vite를 사용하여 새 React 애플리케이션을 만듭니다. 다음으로 - Ethereum 작업을 시작하는 데 필요한 모든 것을 포함하...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.