vue3+vite2 初始配置 axios router vuex
vue3+vite2 初始配置 axios router vuex element-plusvite*注意不支持ie111,创建项目npm init @vitejs/app命名:选择你需要的框架这里选择vue选择语言 这里用javaScript或者TypeScript都可以这样一个vite2+vue3项目就创建完成了cd 项目目录npm install npm run dev然后成功启动,几乎是秒
·
vue3+vite2 初始配置 axios router vuex element-plus
vite
*注意不支持ie11
1,创建项目
npm init @vitejs/app
命名:
选择你需要的框架这里选择vue
选择语言 这里用javaScript或者TypeScript都可以
这样一个vite2+vue3项目就创建完成了
cd 项目目录
npm install npm run dev
然后成功启动,几乎是秒开程序
浏览器运行localhost:3000/
#配置路由(下载router4版本)
npm install vue-router@4 -s
npm i
src/router/index.js
import {createRouter,createWebHashHistory} from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [{
path: "/",
name: "index",
component: () => import( "@/views/index/index"),
},
]
})
export default router;
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App).use(router)
app.mount('#app')
配置vuex
npm install vuex@next --save
npm i
src/store/index.js
import { createStore } from 'vuex'
// Create a new store instance.
const store = createStore({
state : {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {},
modules: {}
})
export default store
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(router).use(store)
app.mount('#app')
vite.config.js配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
alias: {
// 配置路径别名
'@': path.resolve(__dirname, 'src'),
'view': path.resolve(__dirname, 'src/view'),
'com': path.resolve(__dirname, 'src/components'),
'api': path.resolve(__dirname, 'src/api'),
'utils': path.resolve(__dirname, 'src/utils'),
},
// 引入第三方的配置
// optimizeDeps: {
// include: ["echarts", "axios", ]
// },
plugins: [vue()],
// hostname: '0.0.0.0',
// port: 8090,
// 是否自动在浏览器打开
// open: true,
// 是否开启 https
https: false,
// 服务端渲染
ssr: false,
/**
* 在生产中服务时的基本公共路径。
* @default '/'
*/
base: './',
/**
* 与“根”相关的目录,构建输出将放在其中。如果目录存在,它将在构建之前被删除。
* @default 'dist'
*/
outDir: 'dist',
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:3000/',
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""
}
},
},
}
})
axios
npm install axios -S
npm i
utils/axios.js
import axios from 'axios'
import router from '@/router/index'
import { localGet } from './index'
import config from '~/config'
// 这边由于后端没有区分测试和正式,姑且都写成一个接口。
axios.defaults.baseURL = config[import.meta.env.MODE].baseUrl
// 携带 cookie,对目前的项目没有什么作用,因为我们是 token 鉴权
axios.defaults.withCredentials = true
// 请求头,headers 信息
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localGet('token') || ''
// 默认 post 请求,使用 application/json 形式
axios.defaults.headers.post['Content-Type'] = 'application/json'
// 请求拦截器,内部根据返回值,重新组装,统一管理。
axios.interceptors.response.use(res => {
if (typeof res.data !== 'object') {
this.$message.error('服务端异常!')
return Promise.reject(res)
}
if (res.data.resultCode != 200) {
if (res.data.message) this.$message.error(res.data.message)
if (res.data.resultCode == 419) {
router.push({ path: '/login' })
}
return Promise.reject(res.data)
}
return res.data.data
})
export default axios
vue3写法
变量声明改变,不用在创建data函数,使用reactive声明
eg:
<template>
<el-card class="account-container">
<!-- 渲染数据 -->
<div class="title" @click="get">{{text}}</div>
</el-card>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue"; //引入vue
import axios from "@/utils/axios"; //axios请求地址
export default {
name: "Introduce",
setup() {
//定义字段
const state = reactive({
text: "标题",
message: "我是一条消息",
});
// 获取列表
const getCarousels = () => {
state.loading = true;
axios
.post("/user/order/showList", {
params: {},
})
.then((res) => {
console.log(res);
});
};
//事件
const get = () => {
console.log(123);
state.text = "123";
};
//页面挂载
onMounted(() => {
getCarousels();
});
//将定义的数据全部返回给setup函数
return {
get,
...toRefs(state),
};
},
};
</script>
<style scoped>
/* 样式 */
.title {
font-size: 50px;
}
</style>
其他写法就不在这里一一列出了 其他文章里有vue3写法介绍
vuex使用
import {useStore} from 'vuex'
const store=useStore()
//在使用的地方直接使用 相当于 vue2的this.store
store.state.collapse;
store.commit("hadndleCollapse", !collapse);
computed 计算属性使用
import {computed} from 'vue'
setup(){
let username=computed(()=>{
let myname = localStorage.getItem("ms_username");
return myname ? myname : name.value;
})
}
相当于vue2
computed:{
username(){
let myname = localStorage.getItem("ms_username");
return myname ? myname : name.value;
}
}
router 使用
import {useRouter} from 'vue-router'
let router=useRouter()
//router 就相当于this.router
watch监听
import {watch} from 'vue'
watch(
()=>state.count,//要监听的值
(new,old)=>{
console.log(new)
console.log(old)
}
)
多个监听
watch(
()=>[state.count,state.title],//要监听的值
([newcount,oldcount],[newtitle,oldtitle])=>{
}
)
onBeforeRouteUpdate 监听路由 watch监听路由已被废弃
onBeforeRouteUpdate((to,from)=>{
console.log(to,from)
})
Teleport 将子节点渲染到存在于父组件以外的 DOM 节点
<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
<div v-if="visible" class="toast-wrap">
<div class="toast-msg">我是一个 Toast 文案</div>
</div>
</teleport>
希望此文章对你有帮助
更多推荐
所有评论(0)