vue后台开发第一步

后台开发第一步"/>

vue后台开发第一步

1、创建vue3.2的项目

2、安装前期组件

安装

1. 安装 vue-router npm install vue-router@4
2. 安装 vuex npm install vuex@next --save
3. 安装 element-plus npm install element-plus --save
4. 安装 element-plus图标 npm install @element-plus/icons-vue

使用

创建router目录、目录下创建index.js、写入路由

  
import { createRouter, createWebHashHistory } from 'vue-router'
// import Home from '../components/Home.vue'const routes = [{name: 'Index',path: '/',meta: { title:'首页' },component:() => import('../components/HelloWorld.vue')} ]const router = createRouter({history: createWebHashHistory(),routes
})
export default router

同上创建store目录、建立index.js

/*** Vuex状态管理*/
import { createStore } from 'vuex'
// import mutations from './mutations'
// import tagsView from './tagsView'
// import storage from '../utils/storage' 
//前面state，mutations，getters，actions...省略const state = {userInfo : "" || storage.getItem("userInfo"), // 获取用户信息tagsview : [] || storage.getItem("tagsview"), // 获取头部标签
}
export default createStore({state,mutations 
})```在main.js下写
```javascript
import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus';//element-plus 
import 'element-plus/dist/index.css'//element-plus 
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//图标
import router from './router';//路由
import store from './store' ;//vuex状态保存 const app = createApp(App);  
/*图标 */ 
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {appponent(key, component)}
app.use(router);//路由
app.use(store);//vuex状态保存
app.use(ElementPlus,{size:'small'});//ElementPlus 
app.mount('#app');

下面的今天暂时不讲

3、布局和封装图标组件
4、侧边栏和头部tab
5、数据统计和图表

6、列表页
7、表单页
8、