每天进步一点点🤏

vue入门

  • ~3.28K 字

vue入门使用

安装

1
2
3
4
5
6
npm init vue@latest

输入项目名称,然后一路回车

cd 项目名称
npm install

安装dependencies

1
2
3
4
5
6
//ajax请求
npm install axios
//路由
npm install vue-router
//element-ui
npm install element-plus --save

修改main.js

1
2
3
4
5
6
7
8
9
10
11
12
import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
import 'element-plus/dist/index.css'
import '@/style/main.css'
import router from '@/plugins/router'  //导入路由规则

const app = createApp(App)
app.use(ElementPlus)
    .use(router)
    .mount('#app')

环境变量配置

1
2
3
4
5
6
新增.env文件

`.env`
// axios请求地址
VITE_BASIC_API = 'xxxxxx.com'

使用axios

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
新增 src/plugins/axiosInstance.js

import axios from 'axios'

const SendRequest = axios.create({
    baseURL: "https://" + import.meta.env.VITE_BASIC_API,
    timeout: 2000,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

export default SendRequest

使用:
import SendRequest from "@/plugins/axiosInstance";

SendRequest({
    method: 'post',
    url: '/register',
    data: {
        email: this.email,
        password: this.password
    },
}).then((resp) => {
    ElNotification({
        title: "请求成功",
        message: "注册成功,等待管理员审批",
        type: 'success',
    })
}).catch((err) => {
    ElNotification({
        title: "请求失败",
        message: err.response.data,
        type: 'error',
    })
});

使用router

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
在App.vue写入<router-view></router-view>

新增 src/plugins/router.js

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from "@/views/Home.vue";

//路由数组
const routes = [
    {
        path: "/",
        name: "home",
        component: Home,
        children: []
    }
]

//路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes //上面的路由数组
})

//导出路由对象，在main.js中引用
export default router

使用:
import router from "@/plugins/router";
router.push("/signIn")

或者
<router-link to="/signIn"></router-link>

element-ui

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
弹窗:
ElNotification({
    title: "登陆失败",
    message: "请重新登陆",
    type: 'error',
})

布局:
<el-col :span="22" :offset="2"></el-col>

memu:

<el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @select="handleSelect"
>
</el-menu>

handleSelect(key)

图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm install @element-plus/icons-vue

main.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

使用: 

<el-icon>
    <Avatar/>
</el-icon>

图标集合:

https://element-plus.org/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88