vue3.0 創建/登錄

vue3.0，可以在ui界面自定義安裝：

　　新建一個空文件夾，cmd運行： vue ui，回車：

 創建項目：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

-------------------------------------------   至此，帶有 ts 的項目創建完成   -------------------------------------------

 

-------------------------------------------   以下是沒有 ts 的項目   -------------------------------------------

 

 

1、安裝element-plus：

　　main.js：

//安裝 element-plus
npm install element-plus --save

//引入 element-plus
import ElementPlus from 'element-plus'; 
import 'element-plus/lib/theme-chalk/index.css';

//調用 const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

 

 

2、路由管理：

　　router / index.js：

//引入路由：
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

//調用路由
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),// History 路由 history: createWebHashHistory(), // Hash 路由
  routes
})

 

3、配置代理端口等（ vue.config.js ），src 同級根目錄下，創建 vue.config.js 文件：

const port = process.env.port || process.env.npm_config_port || 3020 // dev port
module.exports = {
    publicPath: './',
    outputDir: 'dist_vue3_3',
    assetsDir: 'static',
    lintOnSave: false,
    productionSourceMap: false,
    devServer: {
        host: '0.0.0.0',
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_URL_API,
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    },
}

 

4、配置請求接口地址：

　　根目錄下，創建 .env.development 和 .env.production：

　　.env.development：

ENV = 'development'

VUE_APP_BASE_API = '/api'
VUE_APP_URL_API = 'http://192.168.1.81:7001'
VUE_CLI_BABEL_TRANSPILE_MODULES = true

　　.env.production：

ENV = 'production'

VUE_APP_BASE_API = '/api'
VUE_APP_URL_API = 'http://XXXXXX.com'

 

 

5、接口請求（ axios ）：

　　src 里面，創建 utils 文件夾，新建 https.js 和 auth.js，

　　https.js（ 封裝 axios 接口請求 ）：

//安裝axios
npm install axios --save

import Vue from 'vue'

//引入axios
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { getToken } from '@/utils/auth'
import Cookies from 'js-cookie'
import router, { resetRouter } from '@/router'

//創建新的 axios 實例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 15000 // request timeout
})

//請求攔截
service.interceptors.request.use(
    config => {
        config.headers['X-Token'] = getToken(); //設置請求頭 return config
    },
    error => {
        return Promise.reject(error)
    }
)

//響應 response 攔截器
service.interceptors.response.use(response => {
    if (response.status === 200) {
        const data = response.data;
        return data;
    } else if (response.code === 302) {
　　　　　//響應超時，跳轉到登錄頁
        router.replace({
            path: '/login',
            query: {}
        })
        ElMessage.error({
            message: '請求異常!',
            type: 'error',
            duration: 5 * 1000,
        });
    }
    return response;
});
export default service

　　auth.js：

//安裝js-cookie
npm install js-cookie --save

//引入js-cookie
import Cookies from 'js-cookie'

const token = 'token'
export function getToken() {
    return Cookies.get(token)
}
export function setToken(tokens) {
    return Cookies.set(token, tokens,  {
        expires: 3 // 設置token過期時間: 3天
    })
}
export function removeToken() {
    return Cookies.remove(token)
}

　　src 里面，創建 api 文件夾，新建 user.js，

import request from '@/utils/https'
// 登錄
export function login(data) {
    return request({
        url: '/user/login',
        method: 'post',
        data
    })
}

6、登錄：

<template>
  <div class="dashboard-container">
    <el-row :gutter="24" class="login_from">
        <el-col class="login_tit">登錄</el-col>
        <el-col :span="12" :offset="6">
            <el-form label-position="right" label-width="90px" :model="formLabelAlign">
                <el-form-item label="用戶名">
                    <el-input v-model="formLabelAlign.userName"></el-input>
                </el-form-item>
                <el-form-item label="密碼">
                    <el-input v-model="formLabelAlign.passWord"></el-input>
                </el-form-item>
                <el-button type="primary" @click="getUserRepositories">登錄</el-button>
            </el-form>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { setToken } from '@/utils/auth'
import { login } from '@/api/user' //引入接口
    export default {
        name: 'Home',
        setup() {
            const formLabelAlign = reactive({
                userName: '',
                passWord: '',
            })//定義登錄的用戶名和密碼
            const getUserRepositories = () => {// 定義一個方法（ 登錄事件 ）
                if(formLabelAlign.userName == null || formLabelAlign.userName.length == 0 || formLabelAlign.userName == '') {
                    ElMessage.warning({
                        message: '用戶名不能為空!',
                        type: 'warning'
                    });
                    return false
                }
                if(formLabelAlign.passWord == null || formLabelAlign.passWord.length == 0 || formLabelAlign.passWord == '') {
                    ElMessage.warning({
                        message: '密碼不能為空!',
                        type: 'warning'
                    });
                    return false
                }
　　　　　　　　　 //登錄接口請求
                login(formLabelAlign).then(res => {
                    console.log(res);
                }).catch(err => {
                        
                })
            }
　　　　　　　//get請求
　　　　　　　const fetchData = (id) => {
　　　　　　　　　　fetchArticle(id).then(res => {
　　　　　　　　　　　　postForm = res.data;
　　　　　　　　　　}).catch(err => {

　　　　　　　　　　})
　　　　　　　}

return {
                formLabelAlign,
                getUserRepositories,
　　　　　　　　　 etchData
            }
        }
    }
</script>

reactive：取得一個對象並返回原始對象的響應式代理。

ref：接受一個值並返回一個響應式且可變的 ref 對象。ref 對象具有 .value 指向內部值的單個屬式。

return：setup() 定義的變量必須 return 返回出去，這樣才能在 template 中渲染出來。

 其余定義方法參考：

const cityS = ref([]); // 定義空數組
const contact = ref(""); //定義空對象
const timer = ref(null); // 定義null
const osTop = ref(0); // 定義數據0
const show = ref(false); // 定義是否顯示

7、頂部導航欄吸頂：

　　template：

　　<div class="app-wrapper">
　　　　 <!-- 頭部 -->
        <div v-if="$route.name!=='login'" :class="navBarFixed == true ? 'navBarWrap nav-container' :'nav-container'">
            <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link>
        </div>
    </div>

　　css：

　　.nav-container{
        border-bottom: 1px solid rgb(218, 218, 218);
        width: 100%;
        height: 45px;
        line-height: 45px;
　　}
　　.navBarWrap{
        position: fixed;
        top: 0;
        background: #fff;
        z-index: 9;
        -webkit-box-shadow: 0 7px 6px -6px rgb(218, 218, 218);
        -moz-box-shadow: 0 7px 6px -6px rgb(218, 218, 218);
        box-shadow: 0 7px 6px -6px rgb(218, 218, 218);
　　}

　　script：

　　import { onMounted, onUnmounted, ref } from 'vue'
    export default {
        name: 'app',
        setup() {//導航欄吸頂懸浮
            const navBarFixed = ref(false);
            const watchScroll = () => {
                const osTop = document.documentElement.scrollTop || document.body.scrollTop;
　　　　　　　　　 //滾動超過49px，添加吸頂class if (osTop > 49) {
                    navBarFixed.value = true;
                } else {
                    navBarFixed.value = false;
                }
            };
            onMounted(()=>{
                window.addEventListener("scroll", watchScroll, true);
            });
            onUnmounted(() => {
                window.addEventListener("scroll", watchScroll);
            });
            return {
                navBarFixed,
                watchScroll,
            }
        }
    }

    

 

 

 

 

 

 

8、頁面滾動超出后，回到頂部：

　　template：

    <div class="app-wrapper">
　　　　 <!-- 中間部分 -->
        <div class="main-container">
　　　　　　  <!-- 路由頁面展示內容 -->
            <router-view/>
　　　　　　  <!-- 吸頂按鈕 -->
            <a href="javascript:;" id="return_top" v-if="show" @click="up()">
　　　　　　　　　 <!-- element-plus icon控件，詳情見：https://element-plus.gitee.io/#/zh-CN/component/icon -->
                <i class="el-icon-upload2"></i>
            </a>
        </div>
    </div>

　　css：

    #return_top{
        position: fixed;
        right: 2.5rem;
        bottom: 1.5rem;
    }
    #return_top i{
        font-size: 30px;
    }
    #return_top i.el-icon-upload2:before{
        color: #999;
    }
    #return_top img{
        width: 100%;
        height: 100%;
    }

　　script：

    import { onMounted, onUnmounted, ref } from 'vue'
    export default {
        name: 'app',
        setup() {
            const clientHeight = document.documentElement.clientHeight;
            const show = ref(false);
            const isTop = ref(true);
            const timer = ref();
            const handleScroll = () => {
                //獲取滾動條的滾動高度
                const osTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (osTop >= clientHeight) {
                    //如果滾動高度大於可視區域高度，則顯示回到頂部按鈕
                    show.value = true;
                } else {
                    //否則隱藏
                    show.value = false;
                }
                //主要用於判斷當 點擊回到頂部按鈕后 滾動條在回滾過程中，若手動滾動滾動條，則清除定時器
                if (!isTop.value) {
                    clearInterval(timer.value);
                }
                isTop.value = false;
            };
            const up = () => {
                //設置一個定時器
                timer.value = setInterval(function() {
                    //獲取滾動條的滾動高度
                    const osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //用於設置速度差，產生緩動的效果
                    const speed = Math.floor(-osTop / 6);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
                    isTop.value = true //用於阻止滾動事件清除定時器
                    if (osTop == 0) {
                        clearInterval(timer.value);
                    }
                }, 20);
            };
            onMounted(()=>{
                window.addEventListener("scroll", handleScroll, true);
            });
            onUnmounted(() => {
                window.removeEventListener("scroll", handleScroll);
            });
            return {
                show,
                up,
            }
        }
    }