[完整]流程解决Vue3项目搭建步骤
Vue3项目完整搭建步骤
一、 使用vite创建vue3项目
npm init vue@latest
或者npm create vite@latest
进行初始化项目并创建项目名称code,进入code目录进行基本部署。
cd code
、npm install
、npm run dev
完成vue3项目搭建。
二、 配置vue-router
npm install vue-router@next --save
- 分离式:**在src目录下创建router文件夹,并在文件夹下创建index.js和routes.js
index.js :(只用来存放router的配置信息)
import { createRouter, createWebHashHistory } from "vue-router"
import routes from './routes'
const router=createRouter({
history:createWebHashHistory(),
routes,
})
export default router
routes.js: (用来存放路由信息)
const routes=[
{
path: "/",
redirect: "/home",
},
{
path: "/home",
name: "home",
component: () => import('@/pages/Home'),
},
{
name:'page',
path:'/page',
component:()=>import('@/pages/page'),
meta:{
title:"页面"
},
},
];
export default routes
修改main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; const app = createApp(App);
app.use(router);
app.mount('#app');
修改App.vue
<template>
<router-view />
</template>
调用方式:
<template>
<div>
<router-link to="/">Home</router-link>
<button @click="gotoAbout"> 关于 </button>
</div>
<script setup>
import{useRouter} from 'vue-router'
const router = useRouter();
const gotoAbout = () => {
router.push({
path: '/about',
query: { id: 123 }
})
}
</script>
三、封装axios
npm install axios
在src目录下创建request文件夹,在request文件夹下创建api文件夹以及index.js
api文件夹中存放交互代码,index.js中存放axios配置代码
index.js
import axios from "axios";
//为拦截器报错所用的弹框,如不需要可以不导入
import { ElMessage } from "element-plus";
const service=axios.create({
baseURL: 'http://localhost:8980/code', //基本路径,后面可直接写/方法即可
withCredentials: false, // 异步请求携带cookie
// 设置请求头
headers: {
// 设置后端需要的传参类型
// 'Content-Type': 'application/json;charset=UTF-8',
// 'token': 'your token',
// 'X-Requested-With': 'XMLHttpRequest',
"Access-Control-Allow-Origin": "*",
},
//设置请求超时时间
timeout: 1000*60*5,
});
//*可选
//请求拦截器
service.interceptors.request.use((request)=>{
console.log("request:",request);
//配置请求头
// request.headers.common['Authorization']=window.sessionStorage.getItem('token')===null? null : window.sessionStorage.getItem('token')
//一定要把处理过的request返回
return request;
},
err=>Promise.reject(err)
);
//响应拦截器
service.interceptors.response.use((response)=>{
//获取接口返回结果
const res=response.data
console.log("response:",response);
if(res.code==200){
return res;
}else{
ElMessage.error(res.data||'网络异常')
return res;
}
// console.log("response:",response);
// return response;
},
(err)=>Promise.reject(err)
);
export default service;
api.js:
import request from "@/request/index.js"
/**
* @description 用户登录
*/
export function login(data){
return request({
method:"post",
url:"/user/login",
data:data,
});
}
/**
* @description 获取用户信息
*/
export function getUserInfo(data){
return request({
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
method:"post",
url:"/user/getUserInfo",
data:{
'userId':data
},
});
}
调用方式(例举):
//处理登录逻辑
async function handleLogin(){
try {
const res=await login(form.value).then(res=>{
console.log(res.data)
})
} catch (error) {
console.log(error);
}
}
四、Pinia集成
npm install pinia
- 修改main.js,在main.js中添加代码:
main.js
import { createPinia } from 'pinia'
app.use(createPinia())
- store目录下新建使用的store,此处使用store.js
注:defineStore 是需要传参的,第一个参数是标识id,第二个参数是一个对象,有三个模块, state,getters,actions。
import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 选项式api写法
// export const store1 = defineStore("storeNum",{
// state: () => {
// return {
// num: 0,
// name: "coder"}
// },
// actions: {
// add() {
// this.num++;
// },
// },
// }
// );
// 组合式api写法
//ref() 就是 state 属性
//computed() 就是 getters
//function() 就是 actions
export const store2 = defineStore("storeNum",() => {
const num = ref(0);
const name=ref{"coder"}
const add =()=> {
num.value++;
}
return {
num,
add
};
},
);
- 组件中使用Pinia
<script setup>
import { store2 } from '@/stores/store.js'
import { storeToRefs } from 'pinia'
const storeNum = store()
let {name,num}=storeToRefs(storeNum); //解构,修改必须引用storeToRefs进行解构处理
const clickHanlde=()=>{
storeNum.add();}
const batchHanlde = ()=>{
//store批量处理
storeNum.$patch(state=>{
state.num++;
state.name = 'newCoder';
})
}
//状态重置
const resetBtn=()=>{
storeNum.$reset()
}
</script>
<template>
<div>Add{{ storeNum.add }}</div>
<button @click="clickHanlde">Num++</button>
<button @click='batchHanlde'>批量处理</button>
<button @click='resetBtn'>重置</button>
</template>
数据持久化存储,即刷新页面后也能存储数据
npm i pinia-plugin-persist
在store目录下新建一个配置文件index.js,或者直接在main.js中添加
注:个人觉得分离后代码更清晰(主观)
import { createPinia } from "pinia";
import {createPersistedState } from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(createPersistedState({
serializer:{ // 指定参数序列化器
serialize: JSON.stringify,
deserialize: JSON.parse
}
}))
export default pinia
- 加入持久化存储后store.js的写法
import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 选项式写法
// export const store = defineStore("storeId",{
// state: () => ({ num: 0 }),
// actions: {
// add() {
// this.num++;
// }
// },
// 启用持久化存储(全局持久化)
// persist: { enabled: true, // 配置key和持久化存储的方式
// strategies: [{
// key: 'numStore',
// storage: window.localStorage, //默认localStorage,/sessionStorage
// }]
// }
// );
// 组合式写法
export const store = defineStore("storeId",() => {
const num = ref(0);
const name=ref("coder");
const age=ref(18);
const add =()=> {
num.value++;
}
return {
num,
add
};
},
{
// 选项式写法演示的是全局持久化,组合式写法演示的是指定字段持久化,不配置默认全部持久化
// persist: true,
persist: { enabled: true,
strategies: [{
storage: window.localStorage,
paths: ['name', 'num'] // paths配置需要持久化的字段
beforeRestore: context => {
console.log('Before', context)
},
afterRestore: context => {
console.log('After', context)
}
}]
}
},
);
五、vite设置代理解决跨域问题
vite.config.js中配置,代理前端端口到后端8080端口
import{defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
//自动导包,与代理无关(可忽略)
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports['vue','vue-router']
})
],
server:[
proxy:{
//可直接写:'/api ': 'http://localhost:8080/'
'/api':{
target: 'http://127.0.0.1:8080', //目标url
changeOrigin: true, //支持跨域
ws: true, //允许websocket代理
rewrite: (path) => path.replace(/^\/api/, ""), //重写路径,替换/api
}
}
]
})
六、vite配置@
配置时.vue文件需要加.vue后缀,不能省略,js可省略,适用vue3.1以上版本
vite.config.js中配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
//配置路径别名
alias: {
'@' : resolve(__dirname,'./src'),
}
}
})
七、Vite配置setup语法糖插件:解决import{ref,reactive...}引入问题
npm i unplugin-auto-import -D
在vite.config.js中配置
//1. 引入插件
import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({
plugins: [vue(),
//2. 在plugins中添加AutoImport
AutoImport({
imports:['vue']
})
],
})
[完整]流程解决Vue3项目搭建步骤的更多相关文章
- 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建
从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...
- Vue3项目搭建规范
Vue3项目搭建规范 一. 代码规范 1.1 集成editorconfig配置 EditorConfig有助于为不同IDE编辑器上维护一致的编码风格 安装插件:EditorConfig for VS ...
- maven项目搭建步骤
maven项目搭建步骤 班级:软件151 姓名:黄于霞 一.准备以下压缩包 1.JDK1.7 文件:jdk1.7.rar 2. eclipse-jee-mars-2 文件:32位系 ...
- vue 项目搭建步骤
环境搭建步骤: 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行 vue init webpack vue-demo 这是vue基于webpack的 ...
- 前端之Vue day08 Vue3项目搭建、setup、toRefs
一.Vue3 介绍 # 新项目使用vue3,有部分老项目使用vue2 # vue3 的变化 1.性能的提升 -打包大小减少41% -初次渲染快55%, 更新渲染快133% -内存减少54% 2.源码的 ...
- vue项目搭建步骤
https://blog.csdn.net/echo008/article/details/77099058 https://blog.csdn.net/echo008/article/details ...
- vue项目搭建步骤以及一些安装依赖包
一. vue-cli初始化1. 全局安装 vue-clinpm install --global vue-cli2. 创建一个基于 webpack 模板的新项目vue init webpack my- ...
- vue项目搭建介绍01
目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...
- vue2.0版cnode社区项目搭建及实战开发
_________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...
- saiku3.8二次开发项目搭建(非maven)
参考文章:http://blog.csdn.net/gsying1474/article/details/51603535 本文大部分参考了上面的博文,这里只是做一个记录,由于本人maven能力有限, ...
随机推荐
- 旺店通·企业奇门和用友BIP接口打通对接实战
旺店通·企业奇门和用友BIP接口打通对接实战 接通系统:旺店通·企业奇门 旺店通是北京掌上先机网络科技有限公司旗下品牌,国内的零售云服务提供商,基于云计算SaaS服务模式,以体系化解决方案,助力零售企 ...
- salesforce零基础学习(一百三十四)State And Country/Territory Picklists启用后的趣事
本篇参考: https://help.salesforce.com/s/articleView?id=sf.admin_state_country_picklists_overview.htm& ...
- 如何收集pod重启前现场
之前分享过几篇优化pod重启的文章,有朋友发私信问:看你的优化文章很过瘾,可否分享下如何收集pod重启前的现场. 案例分享-full gc导致k8s pod重启 记一次k8s pod频繁重启的优化之旅 ...
- 将 .NET Aspire 部署到 Kubernetes 集群
使用Aspirate可以将Aspire程序部署到Kubernetes 集群 工具安装 dotnet tool install -g aspirate --prerelease 注意:Aspirate ...
- [ARC122E] Increasing LCMs
Problem Statement We have a sequence of $N$ positive integers: $A_1,A_2,\cdots,A_N$. You are to rear ...
- [ABC318G] Typical Path Problem
Problem Statement You are given a simple connected undirected graph $G$ with $N$ vertices and $M$ ed ...
- 研发提效必备技能:手把手教你基于Docker搭建Maven私服仓库
沉淀,成长,突破,帮助他人,成就自我. 大家好,我是冰河~~ 在研发的过程中,很多企业都会针对自身业务特点来定制研发一些工具类库,但是这些工具类库又不会对外公开,那如何在组织内部共享这些类库呢?一种很 ...
- lca 学习笔记
定义 最近公共祖先简称 \(LCA\) 两个节点的最近公共祖先,就是这两个点的公共祖先里,离根最远的的那个 为了方便,我们记某点集 \(S={v1,v2,...,vn}\) 的最近公共祖先为 \(LC ...
- 2023总结与展望--Empirefree
今年一篇博客都没写过了,好像完全在忙在工作和生活上面了,珍惜自我,保持热情,2024对我好点 目录 1. 年终总结 1.1.学习工作计划 1.2. 生活计划 1.3 个人总结 2. 未来展望 1. 年 ...
- Redis 分片集群
1.Redis分片集群 1.1.搭建分片集群 主从和哨兵可以解决高可用.高并发读的问题.但是依然有两个问题没有解决: 海量数据存储问题 高并发写的问题 使用分片集群可以解决上述问题,如图: 分片集群特 ...