使用Vite构建Vue项目,整合vuex、vue-router、axios、scss
从webpack到Vite,为什么推荐使用Vite,而不是vue-cli,因为Vite —— 一种新的、更快地 web 开发工具
·
从webpack到Vite,为什么推荐使用Vite,而不是vue-cli,因为Vite是一种新的、更快地 web 开发工具
Vite的优势:
Vite具有如下特点:
- 快速的冷启动
- 即时的模块热更新
- 真正的按需编译
使用Vite构建的项目和使用Vue-cli构建的项目对比,给我最直观的感受有两点:
- Vite:冷启动时,几乎秒启动
- Vite:热更新时,保存代码和页面渲染几乎同时完成
原因可参考官网解释:为什么选 Vite | Vite.js中文网 (vitejs.net)
如何使用Vite构建项目:
安装和创建项目:(开箱即用)
npm init @vitejs/app my-vue-app --template vue
打开项目,项目结构如下:
由图可知,代码结构与Vue-cli构建的项目类似
整合router(路由)
安装:
npm install vue-router@next
创建一个文件,用来配置route:
router.js中:
import { createRouter,createWebHistory} from "vue-router"
//已经创建好了login和home组件,这里不过多赘述
//且配置好了根路径别名:‘@’,后面会讲(常用的配置)
const routes = [
{
path:'/',
redirect: 'login'
},
{
path:'/login',
component: () => import('@/pages/login/login.vue')
},
{
path:'/home',
component: () => import('@/pages/home/home.vue')
}
]
// 导出路由
const router = createRouter({
history: createWebHistory(), //开启history模式
routes
});
export default router;
创建好了router文件后,记得一定要导出,在main.js中使用
//main.js
import { createApp } from 'vue'
import App from '@/App.vue'
//导入router配置文件
import route from '@/route/router'
//类似于:
/**
vue-cli:
Vue.use(router)
const app = new Vue({
render: h => h(App)
}).$mount("#app")
*/
const app = createApp(App)
//全局注册
app.use(route)
app.mount('#app')
启动项目:npm run dev
访问:localhost:3000 (样式会在整合sass中讲解)
整合Vuex:(相对比较简单)
可以参考官网:https://next.vuex.vuejs.org/
安装:
npm install vuex@next --save
新建文件store.js:
//store.js:
import { createStore } from 'vuex'
const store = createStore({
state () {
return {
count: 0
}
},
getters:{
getCount(state){
return state.count
}
},
mutations: {
increment (state) {
state.count++
}
}
})
export default store
在main.js中使用:
// main.js:
import { createApp } from 'vue'
import App from '@/App.vue'
import route from '@/route/router'
import store from '@/store/store'
const app = createApp(App)
//全局注册
app.use(route)
app.use(store)
app.mount('#app')
在login中使用Vuex中的数据:在Vue3中至此多个根节点
<template>
<h1>登录</h1>
<button @click="login">点击登录</button>
<router-link to="/home">跳转</router-link>
<!--这里是vuex的数据,不要直接在这里使用:this.$store.state.count-->
<h3>{{count}}</h3>
<button @click="click">添加</button>
</template>
<script>
export default {
data(){
return {
count:this.$store.state.count //注意这一块
}
},
methods:{
click(){
this.$store.commit('increment')
this.count = this.$store.state.count
}
},
}
</script>
整合axios:
安装:
npm install axios
配置axios,新建两个文件:
//axios.js: axios配置
import axios from 'axios'
const http = axios.create({
// baseURL:"http://localhost:8080/", //配置 baseURL
timeout:3000, //配置请求超时时间
})
//请求拦截器
http.interceptors.request.use((config) => {
//在发送请求之前的业务逻辑
console.log("请求之前")
return config
},(error) => {
//请求发生错误的业务逻辑
console.log("请求发生错误")
return Promise.reject(error)
})
//响应拦截器
http.interceptors.response.use((response)=>{
//对响应数据的处理
//如果后端响应的状态不是200,那么直接抛出异常
console.log("响应成功")
if(response.data.status != 200){
return Promise.reject(response)
}else{
return Promise.resolve(response);
}
},(error) => {
console.log("响应出现错误")
if(error.response.status){
//响应错误
let status = error.response.status
//根据不同的状态码,提示不同的信息
switch(status){
case 404:
console.log("你访问的网页不存在")
break
case 401:
console.log("身份验证失败")
break
case 403:
console.log("登录过期")
break
default:
console.log(error.response.data.msg) //其他的错误,抛出错误提示
}
return Promise.reject(error)
}
})
export default http
//api.js: 请求方法封装
import http from "@/request/axios.js"
import qs from 'qs' //把参数序列化
//qs.stringify()是将对象 序列化成URL的形式,以&进行拼接
const api = {}
//封装login方法
api.loginFun = (username,password) => {
let url = `login`
let response = http.post(url,qs.stringify({
username,
password
}))
console.log("response: "+response)
return response
}
export default api
如何使用封装后的loginFun方法:
将封装的方法挂载为全局方法,这样就可以在任一组件中调用,在main.js中配置:
import { createApp } from 'vue'
import App from '@/App.vue'
import route from '@/route/router'
import store from '@/store/store'
import api from '@/request/api.js' //导入封装后的请求方法
const app = createApp(App)
app.use(route)
app.use(store)
//主要代码如下:
//挂载全局属性或者方法,类似于 Vue.prototype.$api = api
app.config.globalProperties.$api = api
app.mount('#app')
挂载好方法后,在组件中调用方法:
<template>
<h1>登录</h1>
<button @click="login">点击登录</button>
<router-link to="/home">跳转</router-link>
<h3>{{count}}</h3>
<button @click="click">添加</button>
</template>
<script>
export default {
data(){
return {
count:this.$store.state.count
}
},
mounted(){
// console.log(this.$axios)
},
methods:{
click(){
this.$store.commit('increment')
this.count = this.$store.state.count
},
login(){
//调用封装好的请求方法
let response = this.$api.loginFun("admin","123")
}
},
}
</script>
发起登录请求:(我的接口在本地,会出现跨域的问题,所以需要在配置文件中配置代理,后面会讲解)
整合scss:
安装:
npm install sass
在组件中使用:指定语言lang="scss",@mixin和@include都是scss中的用法
//在login.vue中:
...
<style lang="scss" scoped>
@mixin styleFun(){
color: red;
border: 1px solid red;
background: green;
}
h1{
@include styleFun()
}
</style>
常用的配置,如下:
//vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve:{
//配置根路径别名: import('@/pages/login/login.vue')
alias: {
"@": path.resolve(__dirname, "src")
},
},
server:{
host: '0.0.0.0', //配置host,0.0.0.0:时可以通过ip地址访问
port: 3000, // 配置启动端口
open: true, //项目启动自动在浏览器中打开
https: false, //是否启用https
proxy:{ //配置代理,解决跨域问题
"/login":{
target:"http://localhost:8888/",
changeOrigin:true
}
}
}
})
与Vue-cli不同使用方式:
- 挂载全局方法:app.config.globalProperties.$api = api
- 注册全局组件:app.component("myGlobal",global)
main.js全部代码:
import { createApp } from 'vue'
import App from '@/App.vue'
import route from '@/route/router'
import store from '@/store/store'
import api from '@/request/api.js'
import global from '@/components/global.vue'
const app = createApp(App)
app.use(route)
app.use(store)
//挂载全局属性,或者方法,类似于 Vue.prototype.$api = api
app.config.globalProperties.$api = api
//注册全局组件
app.component("myGlobal",global)
app.mount('#app')
更多推荐
已为社区贡献2条内容
所有评论(0)