从零开始vue3管理系统

标签：npm vue 管理系统 router 从零开始 vue3 import login vite

1，npm init vue@latest
TypeScript Yes
JSX No
Vue Router Yes
Pinia Yes //替代vuex做state
Vitest Yes //单元测试
ESLint Yes
Prettier Yes
2，cd vue-project
npm install
npm run dev
("node":">=14.18.0","npm":">=8.0.0")
3， vue3不支持 vetur 需要禁用 vscode vetur插件，否则有路径报错

4，App.vue 改成

<template>
  <RouterView />
</template>

<script setup lang="ts">
import { RouterView } from "vue-router";
</script>

 5，安装element-plus

npm install element-plus --save

6，引入element-plus

main.ts 改成

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

7，安装scss

npm install sass --save-dev
npm install sass-loader --save-dev

新建空文件 assets/scss/global.scss

vite.config.ts 改成

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/scss/global.scss";'
      }
    }
  }
})

8，安装 axios

npm install axios --save

9，vite 启动时自动打开浏览器

vite.config.js 加上

  server: {
    open: true
  }

10，vite 多运行环境

.env.development

NODE_ENV="development"
VITE_APP_BASEAPI="https://www.dev.com"

.env.production

NODE_ENV="production"
VITE_APP_BASEAPI="https://www.production.com"

package.json 改成

    "dev": "vite --mode development",
    "build": "run-p type-check build-only --mode production",

判断当前环境

console.log(import.meta.env.MODE)
console.log(import.meta.env.VITE_APP_BASEAPI)

11，安装 vite-plugin-mock

npm i mockjs -s
npm i vite-plugin-mock -D

https://www.npmjs.com/package/vite-plugin-mock

 模拟接口，生产环境暂不使用，如果需要就得配置 vue.config.js

        prodEnabled: command !== 'serve' && prodMock,
        injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `,

12，安装cookie 用于保存登录状态

npm i js-cookie --save

 13，登录

router/index.ts

    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login.vue')
    }

view/login.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login">
    <div class="login-title">欢迎登录</div>
    <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules">
      <el-form-item label="账号" prop="account">
        <el-input v-model="form.account" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="loginBtnLoading"
          @click="onSubmit(ruleFormRef)"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { reactive, ref } from "vue";
import { login } from "@/api/auth";
import { setToken } from "@/utils/auth";
import router from "@/router";

const form = reactive({
  account: "admin",
  password: "123456",
});
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  account: [
    { required: true, message: "请输入账号" },
    { min: 5, max: 30, message: "长度为5-30个字符" },
  ],
  password: [
    { required: true, message: "请输入密码" },
    { min: 5, max: 30, message: "长度为5-30个字符" },
  ],
});
let loginBtnLoading = ref<boolean>(false);
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  loginBtnLoading.value = true;
  await formEl.validate(async (valid) => {
    if (valid) {
      let res: any = await login(form);
      loginBtnLoading.value = false;
      if (res.code == 200) {
        setToken(res.data.token);
        ElMessage.success("登录成功");
        router.push({ path: "/" });
      } else {
        ElMessage.error("登录失败");
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.login {
  text-align: center;
  .login-title {
    margin-bottom: 20px;
  }
}
</style>

14，

 

标签：npm,vue,管理系统,router,从零开始,vue3,import,login,vite
From： https://www.cnblogs.com/jqynr/p/17012142.html