vue前端项目初始化（vuefronted）

npm install -g vue@next
npm install -g vue-router@next
npm install -g vuex@4
npm install -g pinia
npm install -g @vue/cli
npm install -g @vue/cli-service
npm install -g yarn
npm install -g nrm


npm install --save vue@next
npm install --save vue-router@next
npm install --save vuex@4
npm install --save pinia
npm install --save @vue/cli 
npm install --save @vue/cli-service 
npm install --save element-plus
npm install --save @element-plus/icons-vue
npm install --save axios
npm install --save font-awesome
npm install --save @element-plus/icons-vue
npm install --save echarts 
npm install --save mockjs 



vue create vuefronted
cd vuefronted 
npm run serve 


yarn add vue@next
yarn add vue-router@next
yarn add pinia
yarn add element-plus
yarn add @element-plus/icons-vue
yarn add axios
yarn add font-awesome
yarn add echarts 
yarn add mockjs

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'

const app = createApp(App);
console.log(app.config);
const pinia = createPinia();

for (const name in ElIcons){
	app.component(name,ElIcons[name]);
}

app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount('#app');

src/App.vue

<template>
  <router-view />
</template>

<script setup>

</script>

<style scoped>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}
</style>

src/router/index.js

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'

const router = createRouter({
    /* history: createWebHashHistory(), */
    history: createWebHistory(),
    routes: [
        {
          path: '/',
          redirect: '/index'
        },
        {
          path: '/index',
          name: 'index',
          component: () => import(/* webpackChunkName: "introduce" */ '../views/Index.vue')
        },
        {
          path: '/regitster',
          name: 'regitster',
          component: () => import(/* webpackChunkName: "introduce" */ '../views/Regitster.vue')
        },
        {
          path: '/login',
          name: 'login',
          component: () => import(/* webpackChunkName: "introduce" */ '../views/Login.vue')
        },
        {
          path: '/about',
          name: 'about',
          component: () => import(/* webpackChunkName: "introduce" */ '../views/About.vue')
        },
        {
          path: '/about01',
          name: 'about01',
          component: () => import(/* webpackChunkName: "introduce" */ '../views/About01.vue')
        },
        {
          path: '/introduce',
          name: 'introduce',
          component: () => import(/* webpackChunkName: "introduce" */ '../views/Introduce.vue')
        },
        {
          path: '/dashboard',
          name: 'dashboard',
          component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue')
        },
        {
          path: '/layout',
          name: 'layout',
          component: () => import(/* webpackChunkName: "dashboard" */ '../views/Layout.vue'),
          children:[
            {
                path: '/test01',
                name: 'test01',
                component: () => import(/* webpackChunkName: "login" */ '../views/Test01.vue')
            },
            {
                path: '/test02',
                name: 'test02',
                component: () => import(/* webpackChunkName: "login" */ '../views/Test02.vue')
           },
           {
            path: '/test03',
            name: 'test03',
            component: () => import(/* webpackChunkName: "login" */ '../views/Test03.vue')
           }
          ]
        }
      ]
})

export default router

后面就是src/views/目录下面的文件

About.vue

<template>
    <div>
      <span>About</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'About'
  }
  </script>
  
  <style scoped>
  
  </style>

About01.vue

<template>
    <div>
      <span>What you are you do not see, what you see is your shadow. </span>
      <el-divider content-position="left">Rabindranath Tagore</el-divider>
      <span>I cannot choose the best. The best chooses me.</span>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <span
        >My wishes are fools, they shout across thy song, my Master. Let me but
        listen.</span
      >
      <el-divider content-position="right">Rabindranath Tagore</el-divider>
    </div>
  </template>
  
  <script  setup>
  import { StarFilled } from '@element-plus/icons-vue'
  </script>
  
   
  <script>
  export default {
    name: 'About01'
  }
  </script>
  
  <style scoped>
  
  </style>

Dashboard.vue

<template>
    <div>
      <span>Dashboard</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'Dashboard'
  }
  </script>
  
  <style scoped>
  
  </style>

Index.vue

<template>
    <div>
      <span>Index</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'Index'
  }
  </script>
  
  <style scoped>
  
  </style>

Introduce.vue

<template>
    <div>
      <span>Introduce</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'Introduce'
  }
  </script>
  
  <style scoped>
  
  </style>

Layout.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="layoutisCollapse ? '64px':'200px'" class="elaside">
	    <div v-show="!layoutisCollapse" class="elaside-head">
          <div>
            <img src="./../assets/logo.png" alt="logo">
            <span style="elaside-head">后台管理系统</span>
          </div>
        </div>
	   <div v-show="layoutisCollapse" class="elaside-head">
          <div>
            <img src="./../assets/logo.png" alt="logo">
          </div>
        </div>
        <div class="elaside-head-line" /> 
		<!-- <el-divider /> -->
	  <el-menu
		class="el-menu-vertical-demo"
		:collapse="layoutisCollapse"
		:unique-opened="true"
		:collapse-transition="false"
		background-color="#222832"
        text-color="#fff"
		:router="true"
		>
		<!-- 
		<el-sub-menu index="1">
            <template #title>
              <el-icon><user /></el-icon><span>Dashboard</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/introduce"><el-icon><tools /></el-icon>系统介绍</el-menu-item>
              <el-menu-item index="/dashboard"><el-icon><house /></el-icon>Dashboard</el-menu-item>
              <el-menu-item index="/about"><el-icon><tools /></el-icon>关于我们</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><tools /></el-icon><span>首页配置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/swiper"><el-icon><tools /></el-icon>轮播图配置</el-menu-item>
              <el-menu-item index="/hot"><el-icon><tools /></el-icon>热销商品配置</el-menu-item>
              <el-menu-item index="/new"><el-icon><tools /></el-icon>新品上线配置</el-menu-item>
              <el-menu-item index="/recommend"><el-icon><tools /></el-icon>为你推荐配置</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><ticket /></el-icon><span>模块管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/category"><el-icon><tools /></el-icon>分类管理</el-menu-item>
              <el-menu-item index="/good"><el-icon><tools /></el-icon>商品管理</el-menu-item>
              <el-menu-item index="/guest"><el-icon><tools /></el-icon>会员管理</el-menu-item>
              <el-menu-item index="/order"><el-icon><house /></el-icon>订单管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><unlock /></el-icon><span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/account"><el-icon><lock /></el-icon>修改密码</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
		  -->
          <el-sub-menu index="5">
            <template #title>
              <el-icon><burger /></el-icon><span>定时任务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/sysjobindex"><el-icon><tools /></el-icon>定时任务1</el-menu-item>
              <el-menu-item index="/jobsindex"><el-icon><tools /></el-icon>定时任务2</el-menu-item>
              <el-menu-item index="/tmbatchjobsindex"><el-icon><tools /></el-icon>定时任务3</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
		</el-menu>
    </el-aside>
      <el-container>
        <el-header>
		  <div class="elheader">
			  <el-radio-group v-model="layoutisCollapse" style="float:left; margin-top: 10px;">
				<el-icon v-show="!layoutisCollapse" @click="layoutisCollapse=true" style="font-size:28px;"><Fold/></el-icon>
				<el-icon v-show="layoutisCollapse" @click="layoutisCollapse=false" style="font-size:28px;"><Expand/></el-icon>
			  </el-radio-group>
			  <div style="float:left;">Header</div>
			  <div style="float:right;">
				<div style="font-size:18px;"><span>欢迎<el-icon><Avatar /></el-icon></span>【 管理员 】<span >退出<el-icon><caret-bottom /></el-icon></span></div>
			  </div>
		  </div>
		</el-header>
        <el-main><router-view></router-view></el-main>
        <el-footer>
		  <div class="elfooter">
			<div class="left">Copyright © 2020-2024 ChongQing Json Rights Reserved.</div>
			<div class="right">
			  <a target="_blank" href="https://cqjson.com">vue3-cqjson-admin Version 3.0.0</a>
			</div>
		  </div>
		</el-footer>
      </el-container>
    </el-container>
  </div>
</template>



<script setup>
import { ref } from 'vue'
import { Document, Menu, Location, Setting} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const layoutisCollapse = ref(false);
const router = useRouter();

const layoutElHeaderLogout = ()=>{
  console.log("点击了退出登录！");
  router.push({ path: '/login' });
}



</script>

<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.elaside-head-line {
  border-top: 1px solid hsla(0,0%,100%,.05);
  border-bottom: 1px solid rgba(0,0,0,.2);
}
  
.el-menu-vertical-demo {
  min-height: 600px;
}
.el-menu {
  border-right: none!important;
}
.el-submenu {
  border-top: 1px solid hsla(0, 0%, 100%, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.elaside {
  background-color: #222832;
  overflow: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.elaside::-webkit-scrollbar {
  display: none;
}
.elaside-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.elaside-head > div {
  display: flex;
  align-items: center;
}
.elaside-head img {
  width: 40px;
  height: 40px;
  argin-left: 8px;
  margin-right: 8px;
}
.elaside-head span {
  font-size: 20px;
  color: #ffffff;
}



.elheader {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e9e9e9;
  align-items: center;
}

.elfooter {
  height: 50px;
  border-top: 1px solid #e9e9e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
</style>

Login.vue

<template>
    <div>
      <span>Login</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'Login'
  }
  </script>
  
  <style scoped>
  
  </style>

Register.vue

<template>
    <div>
      <span>Regitster</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'Regitster'
  }
  </script>
  
  <style scoped>
  
  </style>

Test01.vue

<template>
    <div>
      <span>Test01</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'Test01'
  }
  </script>
  
  <style scoped>
  
  </style>

Test02.vue

<template>
    <div>
      <span>Test02</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'Test02'
  }
  </script>
  
  <style scoped>
  
  </style>

Test03.vue

<template>
    <div>
      <span>Test03</span>
    </div>
  </template>
  
  <script  setup>

  </script>
  
   
  <script>
  export default {
    name: 'Test03'
  }
  </script>
  
  <style scoped>
  
  </style>