【腾讯云Cloud Studio 实战训练营】迎接云端开发新时代 体验无界开发新利器

<template>
  <div>hello world</div>
</template>
<script setup>
</script>
<style scoped>
</style>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
    <div class="wrapper">
      <HelloWorld/>
    </div>
</template>

<style scoped>
</style>

 import { createPinia } from 'pinia'

 const store = createPinia()

 export default store

 import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
 ​
 // 创建vue实例
 const app = createApp(App)
 ​
 // 挂载pinia
 app.use(store)
 ​
 // 挂载实例
 app.mount('#app');

 import { defineStore } from 'pinia'

 export const useUserStore = defineStore({
   id: 'user', // id必填，且需要唯一
   state: () => {
     return {
       name: '张三'
     }
   },
   actions: {
     updateName(name) {
       this.name = name
     }
   }
 })

 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

 const routes: Array<RouteRecordRaw> = [
   {
     path: '/login',
     name: 'Login',
     meta: {
         title: '登录',
         keepAlive: true,
         requireAuth: false
     },
     component: () => import('@/pages/login.vue')
   },
   {
       path: '/',
       name: 'Index',
       meta: {
           title: '首页',
           keepAlive: true,
           requireAuth: true
       },
       component: () => import('@/pages/index.vue')
   }
 ]

 const router = createRouter({
   history: createWebHistory(),
   routes
 });
 export default router;

import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
const service = axios.create();

 // Request interceptors
 service.interceptors.request.use(
     (config) => {
         // do something
         return config;
     },
     (error) => {
         Promise.reject(error);
     }
 );
 // Response interceptors
 service.interceptors.response.use(
     async (response) => {
         // do something
     },
     (error) => {
         // do something
         return Promise.reject(error);
     }
 );
 export default service;

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

// 配置Element-Plus
import * as ELementPluseIconsVue from "@element-plus/icons-vue";
import "element-plus/theme-chalk/el-message.css";
// 解决element-plus自动引入后ElLoading、ElMessage、ElNotification、ElMessageBox样式丢失的问题
import "element-plus/dist/index.css";

<template>
 <div class="login">
    <!-- 用卡片嵌登录表单 -->
    <el-card shadow="always">
      <div class="login-main">
        <!-- 登录左侧的图标 -->
        <div class="login-logo">
          <el-image
            :src="loginLogo"
            style="width: 100%; height: 100%"
          />
        </div>
        <!-- 主登录表单 -->
        <div class="login-form">
          <el-form
            ref="ruleFormRef"
            :model="state.loginForm"
            :rules="rules"
          >
            <div class="login-form-title">
              欢迎登录
            </div>
            <el-form-item
              label="账号"
              prop="username"
            >
              <el-input
                v-model="state.loginForm.username"
                prefix-icon="Avatar"
                placeholder="请输入用户账号"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item
              label="密码"
              prop="password"
            >
              <el-input
                v-model="state.loginForm.password"
                prefix-icon="Lock"
                placeholder="请输入用户密码"
                type="password"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox
                v-model="state.loginForm.keepPassword"
                label="记住密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                round
                style="width: 100%"
                @click="submit(ruleFormRef)"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import  {useUserStore}  from "../store/user";
import { useRouter } from "vue-router";
// 使用的pinia
const userStore = useUserStore();
// 使用的router
const router = useRouter();
// logo的url获取
const loginLogo = new URL(
  "../assets/image/login-left.png",
  import.meta.url
).href;
const state = reactive({
  loginForm: {
    username: "",
    password: "",
    keepPassword: null,
  },
});
</script>

<style  lang="less"  scoped>
</style>

import request from "@/utils/http/axios";

export default {
  async login(params) {
    return await request.post("/api/v1/users/login", params);
  },
};

// 钩子函数
const login = async (param) => {
        await systemAPI
          .login(param)
          .then((result) => {
            if (result.isSuccess == true) {
              // 使用store保存用户信息
              result.data && userStore.setUser(result.data);
              localStorage.setItem(
                "token",
                result.data ? result.data.token : ""
              );
              // 判断用户类型，普通用户进user/index，管理员进admin/index
              if (result.data && result.data.role == "user") {
                ElMessage.success("欢迎用户:" + result.data.nickName);
                router.push({ path: "/user/index" });
              }
              if (result.data && result.data.role == "admin") {
                ElMessage.success("欢迎管理员:" + result.data.nickName);
                router.push({ path: "/admin/index" });
              }
            }
          })
          .catch((error) => {
            ElMessage.error("请求错误，请检查服务器:" + error);
          });
      };

server: {
    // 本项目的本地端口，默认是 5174 端口
    port: 5174,
    // 浏览器自动打开
    // open: true,
    // 热更新
    hmr: {
      host: "127.0.0.1",
      port: 5174,
    },
    proxy: {
      "/api/v1/": {
        
        target: "你的服务器地址",
        /**
         * changeOrigin的值是true,意味着服务器host设置成target
         */
        changeOrigin: true,
      },
    },
  },

"scripts" : {
  ...
  "commit": "git add . && cz-customizable"
}

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

module.exports = {
    types: [
      {
        value: ':sparkles: feat',
        name: '✨ feat:     新功能'
      },
      {
        value: ':bug: fix',
        name: '🐛 fix:      修复bug'
      },
      {
        value: ':tada: init',
        name: '🎉 init:     初始化'
      },
      {
        value: ':pencil2: docs',
        name: '✏️  docs:     文档变更'
      },
      {
        value: ':lipstick: style',
        name: '💄 style:    代码的样式美化'
      },
      {
        value: ':recycle: refactor',
        name: '♻️  refactor: 重构'
      },
      {
        value: ':zap: perf',
        name: '⚡️ perf:     性能优化'
      },
      {
        value: ':white_check_mark: test',
        name: '✅ test:     测试'
      },
      {
        value: ':rewind: revert',
        name: '⏪️ revert:   回退'
      },
      {
        value: ':package: build',
        name: '📦️ build:    打包'
      },
      {
        value: ':rocket: chore',
        name: '🚀 chore:    构建/工程依赖/工具'
      },
      {
        value: ':construction_worker: ci',
        name: '👷 ci:       CI related changes'
      }
    ],
    messages: {
      type: '请选择提交类型(必填)',
      customScope: '请输入文件修改范围(可选)',
      subject: '请简要描述提交(必填)',
      body: '请输入详细描述(可选)',
      breaking: '列出任何BREAKING CHANGES(可选)',
      footer: '请输入要关闭的issue(可选)',
      confirmCommit: '确定提交此说明吗？'
    },
    allowCustomScopes: true,
    allowBreakingChanges: [':sparkles: feat', ':bug: fix'],
    subjectLimit: 72
  }