vite+vue3+element-plus專案搭建的方法步驟
阿新 • • 發佈:2021-06-10
使用vite搭建vue3專案
通過在終端中執行以下命令,可以使用 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
執行命令安裝sass, npm i sass -D, 然後在vue檔案程式設計客棧的style標籤下加入lang="scss"即可,這些與以前vue2都是一樣的。
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.createRouhttp://www.cppcns.comter({ 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/`,//...
接下來使用vue3的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+vue3+element-plus專案搭建的方法步驟的文章就介紹到這了,更多相關vite搭建vue3+ElementPlus內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!