vite
npm初始化项目
npm init @vitejs/app
命名项目后
在command line options里选择template,这里选择了vue框架
然后根据提示
Now run:
cd vitetest1
npm install
npm run dev
run dev便可以编译出开发环境下的初始化文件
路由插件router
- 安装 在这里安装的router4
npm install vue-router@4
- 新建一个 关于router的js文件
//从VueRouter中导入需要的函数模块
import {createRouter, createWebHashHistory } from 'vue-router'
//引入要使用的组件
import Login from '../views/login.vue'
const routes = [
{ path: '/', component: Login}
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
//导出router
export default router
- 在main.js 中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')
- 使用
在app.vue中加入路由占位符
<template>
<div>
<router-view></router-view>
</div>
</template>
运行
可以看到路由生效
安装vuex
- 安装vuex
npm install vuex@next --save
- 新建store文件夹 在文件夹下index.js中写入
import { createStore } from 'vuex'
// 创建一个新的 store 实例
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment (state) {
state.count++
}
}
})
//导出store
export default store
在main.js中引入:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store'
createApp(App)
.use(router)
.use(store)
.mount('#app')
使用:
created() {
this.$store.commit("increment")
console.log(this.$store.state.count)
},
在这个过程中出现了小插曲,因为我之前的代码风格都是无分号的,结果我一格式化,他竟然出现了分号!好难受,经过一番周折和测试,发现是vscode的vetur插件格式化时会自动加上分号,可以通过修改格式化文档方式,改为prettier(前提是prettier格式化工具已经修改配置为无分号)
运行成功
安装element-plus
- 安装
npm install element-plus --save
- 引入文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
createApp(App)
.use(router)
.use(store)
.use(ElementPlus)
.mount('#app')
- 使用
<template>
<div>
<el-button>123</el-button>
<router-view></router-view>
</div>
</template>
- 运行成功
axios
- 安装
npm install axios
引入及封装:
import axios from "axios"
import { ElLoading, ElNotification, ElMessage } from "element-plus"
const baseURL = "ip"
const api = axios.create({
baseURL,
timeout: 8000,
})
let loading = {}
api.interceptors.request.use(
(config) => {
loading = ElLoading.service({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
})
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = token
}
return config
},
(error) => {
return Promise.reject(error) //请求错误处理
}
)
api.interceptors.response.use(
(res) => {
loading.close()
//console.log(res.data.body)
const { code, message } = res.data.body.error
if (code == 0) {
ElNotification({
type: "success",
message: message,
duration: 1000,
})
return res.data.body
} else {
ElMessage.error(message)
return { data: "error" }
}
},
(error) => {
loading.close()
ElMessage.error("网络请求发生错误,请稍后再试")
return Promise.reject(error)
}
)
export default {
get(url, params = {}) {
return new Promise((resolve, reject) => {
api
.get(url, {
params,
})
.then((res) => {
resolve(res.data)
})
.catch((err) => {
reject(err)
})
})
},
post(url, params = {}) {
return new Promise((resolve, reject) => {
api
.post(url, params)
.then((res) => {
resolve(res.data)
})
.catch((err) => {
reject(err)
})
})
},
}
这个是我自己结合项目具体需要封装的请求,可以根据需要自行修改
然后在具体api上引用:
import $http from "../api"
export const create = (data) => {
return $http.post("/projectApplication/admin/create", data)
}
导入:
import { create } from "../../apis/audit/create"
createItem() {
let content = {
paSimpleForm: {
projectName: this.itemForm.projectName,
schoolName: this.itemForm.schoolName,
},
schoolId: this.itemForm.schoolId,
}
console.log(content)
create(content).then((res) => {
console.log(res)
})
},
至此,项目的基本搭建工作完成,页面的路由,状态管理,网络请求,页面组件都可以依赖上述完成