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
5. 安装 sass npm install -g sass

使用

创建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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

同上创建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)) {
    app.component(key, component)
  }
app.use(router);//路由
app.use(store);//vuex状态保存
app.use(ElementPlus,{size:'small'});//ElementPlus 
app.mount('#app');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

下面的今天暂时不讲

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

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