Vue3项目完整搭建步骤

一、 使用vite创建vue3项目

npm init vue@latest 或者npm create vite@latest进行初始化项目并创建项目名称code,进入code目录进行基本部署。

cd codenpm installnpm run dev

完成vue3项目搭建。

二、 配置vue-router

npm install vue-router@next --save

  • 分离式:**在src目录下创建router文件夹,并在文件夹下创建index.js和routes.js

index.js :(只用来存放router的配置信息)

  1. import { createRouter, createWebHashHistory } from "vue-router"
  2. import routes from './routes'
  3. const router=createRouter({
  4. history:createWebHashHistory(),
  5. routes,
  6. })
  7. export default router

routes.js: (用来存放路由信息)

  1. const routes=[
  2. {
  3. path: "/",
  4. redirect: "/home",
  5. },
  6. {
  7. path: "/home",
  8. name: "home",
  9. component: () => import('@/pages/Home'),
  10. },
  11. {
  12. name:'page',
  13. path:'/page',
  14. component:()=>import('@/pages/page'),
  15. meta:{
  16. title:"页面"
  17. },
  18. },
  19. ];
  20. export default routes
  • 修改main.js

    1. import { createApp } from 'vue';
    2. import App from './App.vue';
    3. import router from './router';
    4. const app = createApp(App);
    5. app.use(router);
    6. app.mount('#app');
  • 修改App.vue

    1. <template>
    2. <router-view />
    3. </template>

调用方式

  1. <template>
  2. <div>
  3. <router-link to="/">Home</router-link>
  4. <button @click="gotoAbout"> 关于 </button>
  5. </div>
  6. <script setup>
  7. import{useRouter} from 'vue-router'
  8. const router = useRouter();
  9. const gotoAbout = () => {
  10. router.push({
  11. path: '/about',
  12. query: { id: 123 }
  13. })
  14. }
  15. </script>

三、封装axios

npm install axios

在src目录下创建request文件夹,在request文件夹下创建api文件夹以及index.js

api文件夹中存放交互代码,index.js中存放axios配置代码

index.js

  1. import axios from "axios";
  2. //为拦截器报错所用的弹框,如不需要可以不导入
  3. import { ElMessage } from "element-plus";
  4. const service=axios.create({
  5. baseURL: 'http://localhost:8980/code', //基本路径,后面可直接写/方法即可
  6. withCredentials: false, // 异步请求携带cookie
  7. // 设置请求头
  8. headers: {
  9. // 设置后端需要的传参类型
  10. // 'Content-Type': 'application/json;charset=UTF-8',
  11. // 'token': 'your token',
  12. // 'X-Requested-With': 'XMLHttpRequest',
  13. "Access-Control-Allow-Origin": "*",
  14. },
  15. //设置请求超时时间
  16. timeout: 1000*60*5,
  17. });
  18. //*可选
  19. //请求拦截器
  20. service.interceptors.request.use((request)=>{
  21. console.log("request:",request);
  22. //配置请求头
  23. // request.headers.common['Authorization']=window.sessionStorage.getItem('token')===null? null : window.sessionStorage.getItem('token')
  24. //一定要把处理过的request返回
  25. return request;
  26. },
  27. err=>Promise.reject(err)
  28. );
  29. //响应拦截器
  30. service.interceptors.response.use((response)=>{
  31. //获取接口返回结果
  32. const res=response.data
  33. console.log("response:",response);
  34. if(res.code==200){
  35. return res;
  36. }else{
  37. ElMessage.error(res.data||'网络异常')
  38. return res;
  39. }
  40. // console.log("response:",response);
  41. // return response;
  42. },
  43. (err)=>Promise.reject(err)
  44. );
  45. export default service;

api.js:

  1. import request from "@/request/index.js"
  2. /**
  3. * @description 用户登录
  4. */
  5. export function login(data){
  6. return request({
  7. method:"post",
  8. url:"/user/login",
  9. data:data,
  10. });
  11. }
  12. /**
  13. * @description 获取用户信息
  14. */
  15. export function getUserInfo(data){
  16. return request({
  17. headers: {
  18. 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  19. },
  20. method:"post",
  21. url:"/user/getUserInfo",
  22. data:{
  23. 'userId':data
  24. },
  25. });
  26. }

调用方式(例举):

  1. //处理登录逻辑
  2. async function handleLogin(){
  3. try {
  4. const res=await login(form.value).then(res=>{
  5. console.log(res.data)
  6. })
  7. } catch (error) {
  8. console.log(error);
  9. }
  10. }

四、Pinia集成

npm install pinia

  • 修改main.js,在main.js中添加代码:

main.js

  1. import { createPinia } from 'pinia'
  2. app.use(createPinia())
  • store目录下新建使用的store,此处使用store.js

注:defineStore 是需要传参的,第一个参数是标识id,第二个参数是一个对象,有三个模块, state,getters,actions。

  1. import { ref, computed } from "vue";
  2. import { defineStore } from "pinia";
  3. // 选项式api写法
  4. // export const store1 = defineStore("storeNum",{
  5. // state: () => {
  6. // return {
  7. // num: 0,
  8. // name: "coder"}
  9. // },
  10. // actions: {
  11. // add() {
  12. // this.num++;
  13. // },
  14. // },
  15. // }
  16. // );
  17. // 组合式api写法
  18. //ref() 就是 state 属性
  19. //computed() 就是 getters
  20. //function() 就是 actions
  21. export const store2 = defineStore("storeNum",() => {
  22. const num = ref(0);
  23. const name=ref{"coder"}
  24. const add =()=> {
  25. num.value++;
  26. }
  27. return {
  28. num,
  29. add
  30. };
  31. },
  32. );
  • 组件中使用Pinia
  1. <script setup>
  2. import { store2 } from '@/stores/store.js'
  3. import { storeToRefs } from 'pinia'
  4. const storeNum = store()
  5. let {name,num}=storeToRefs(storeNum); //解构,修改必须引用storeToRefs进行解构处理
  6. const clickHanlde=()=>{
  7. storeNum.add();}
  8. const batchHanlde = ()=>{
  9. //store批量处理
  10. storeNum.$patch(state=>{
  11. state.num++;
  12. state.name = 'newCoder';
  13. })
  14. }
  15. //状态重置
  16. const resetBtn=()=>{
  17. storeNum.$reset()
  18. }
  19. </script>
  20. <template>
  21. <div>Add{{ storeNum.add }}</div>
  22. <button @click="clickHanlde">Num++</button>
  23. <button @click='batchHanlde'>批量处理</button>
  24. <button @click='resetBtn'>重置</button>
  25. </template>

数据持久化存储,即刷新页面后也能存储数据

npm i pinia-plugin-persist

  • 在store目录下新建一个配置文件index.js,或者直接在main.js中添加

    注:个人觉得分离后代码更清晰(主观)

  1. import { createPinia } from "pinia";
  2. import {createPersistedState } from 'pinia-plugin-persistedstate'
  3. const pinia = createPinia()
  4. pinia.use(createPersistedState({
  5. serializer:{ // 指定参数序列化器
  6. serialize: JSON.stringify,
  7. deserialize: JSON.parse
  8. }
  9. }))
  10. export default pinia
  • 加入持久化存储后store.js的写法
  1. import { ref, computed } from "vue";
  2. import { defineStore } from "pinia";
  3. // 选项式写法
  4. // export const store = defineStore("storeId",{
  5. // state: () => ({ num: 0 }),
  6. // actions: {
  7. // add() {
  8. // this.num++;
  9. // }
  10. // },
  11. // 启用持久化存储(全局持久化)
  12. // persist: { enabled: true, // 配置key和持久化存储的方式
  13. // strategies: [{
  14. // key: 'numStore',
  15. // storage: window.localStorage, //默认localStorage,/sessionStorage
  16. // }]
  17. // }
  18. // );
  19. // 组合式写法
  20. export const store = defineStore("storeId",() => {
  21. const num = ref(0);
  22. const name=ref("coder");
  23. const age=ref(18);
  24. const add =()=> {
  25. num.value++;
  26. }
  27. return {
  28. num,
  29. add
  30. };
  31. },
  32. {
  33. // 选项式写法演示的是全局持久化,组合式写法演示的是指定字段持久化,不配置默认全部持久化
  34. // persist: true,
  35. persist: { enabled: true,
  36. strategies: [{
  37. storage: window.localStorage,
  38. paths: ['name', 'num'] // paths配置需要持久化的字段
  39. beforeRestore: context => {
  40. console.log('Before', context)
  41. },
  42. afterRestore: context => {
  43. console.log('After', context)
  44. }
  45. }]
  46. }
  47. },
  48. );

五、vite设置代理解决跨域问题

vite.config.js中配置,代理前端端口到后端8080端口

  1. import{defineConfig} from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. //自动导包,与代理无关(可忽略)
  4. import AutoImport from 'unplugin-auto-import/vite'
  5. export default defineConfig({
  6. plugins: [
  7. vue(),
  8. AutoImport({
  9. imports['vue','vue-router']
  10. })
  11. ],
  12. server:[
  13. proxy:{
  14. //可直接写:'/api ': 'http://localhost:8080/'
  15. '/api':{
  16. target: 'http://127.0.0.1:8080', //目标url
  17. changeOrigin: true, //支持跨域
  18. ws: true, //允许websocket代理
  19. rewrite: (path) => path.replace(/^\/api/, ""), //重写路径,替换/api
  20. }
  21. }
  22. ]
  23. })

六、vite配置@

配置时.vue文件需要加.vue后缀,不能省略,js可省略,适用vue3.1以上版本

vite.config.js中配置

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import {resolve} from 'path'
  4. // https://vitejs.dev/config/
  5. export default defineConfig({
  6. plugins: [vue()],
  7. resolve: {
  8. //配置路径别名
  9. alias: {
  10. '@' : resolve(__dirname,'./src'),
  11. }
  12. }
  13. })

七、Vite配置setup语法糖插件:解决import{ref,reactive...}引入问题

  1. npm i unplugin-auto-import -D

  2. 在vite.config.js中配置

    1. //1. 引入插件
    2. import AutoImport from 'unplugin-auto-import/vite'
    3. export default defineConfig({
    4. plugins: [vue(),
    5. //2. 在plugins中添加AutoImport
    6. AutoImport({
    7. imports:['vue']
    8. })
    9. ],
    10. })

[完整]流程解决Vue3项目搭建步骤的更多相关文章

  1. 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建

    从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...

  2. Vue3项目搭建规范

    Vue3项目搭建规范 一. 代码规范 1.1 集成editorconfig配置 EditorConfig有助于为不同IDE编辑器上维护一致的编码风格 安装插件:EditorConfig for VS ...

  3. maven项目搭建步骤

    maven项目搭建步骤 班级:软件151           姓名:黄于霞 一.准备以下压缩包 1.JDK1.7 文件:jdk1.7.rar 2. eclipse-jee-mars-2 文件:32位系 ...

  4. vue 项目搭建步骤

    环境搭建步骤: 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行 vue init webpack vue-demo 这是vue基于webpack的 ...

  5. 前端之Vue day08 Vue3项目搭建、setup、toRefs

    一.Vue3 介绍 # 新项目使用vue3,有部分老项目使用vue2 # vue3 的变化 1.性能的提升 -打包大小减少41% -初次渲染快55%, 更新渲染快133% -内存减少54% 2.源码的 ...

  6. vue项目搭建步骤

    https://blog.csdn.net/echo008/article/details/77099058 https://blog.csdn.net/echo008/article/details ...

  7. vue项目搭建步骤以及一些安装依赖包

    一. vue-cli初始化1. 全局安装 vue-clinpm install --global vue-cli2. 创建一个基于 webpack 模板的新项目vue init webpack my- ...

  8. vue项目搭建介绍01

    目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...

  9. vue2.0版cnode社区项目搭建及实战开发

    _________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...

  10. saiku3.8二次开发项目搭建(非maven)

    参考文章:http://blog.csdn.net/gsying1474/article/details/51603535 本文大部分参考了上面的博文,这里只是做一个记录,由于本人maven能力有限, ...

随机推荐

  1. hive报错Execution Error, return code 2 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask[已解决]

    我的报错信息 Execution Error, return code 2 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask 解决1(可行):不走ya ...

  2. JavaWeb项目中web.xml配置文件<servlet-class>…</servlet-class>中的路径出现问题以及服务器错误的解决办法

    问题如图 原因: 1.改变了 WEB-INF 文件夹下 lib 文件夹下 servlet-api.jar 的路径2.缺失lib文件夹下的 servlet-api.jar,没有添加到库中 解决办法: 不 ...

  3. 洛谷4159 [SCOI2009] 迷路(矩阵快速幂,拆点)

    题意:该有向图有 n 个节点,节点从 1至 n 编号,windy 从节点 1 出发,他必须恰好在 t 时刻到达节点 n.现在给出该有向图,你能告诉 windy 总共有多少种不同的路径吗?答案对2009 ...

  4. Unity学习笔记--数据持久化XML文件(2)

    IXmlSerializable接口: 使用该接口可以帮助处理不能被序列化和反序列化的特殊类得到处理, 使特殊类继承IXmlSerializable接口 ,实现其中的读写方法,检测到读写方法被重写之后 ...

  5. 数据库同步工具,PanguSync后起之秀

    随着数字化时代的快速发展,数据已经成为企业运营的核心.为了确保数据的准确性和一致性,数据库同步工具成为了企业不可或缺的工具.而在众多数据库同步工具中,PanguSync以其卓越的性能和强大的功能,逐渐 ...

  6. 苹果推信群发,苹果推信群发软件,iMessage群发系统

    在当今数字化的时代,智能手机的普及率已达到了前所未有的高度,其中,苹果公司的iPhone无疑是市场上最受欢迎的智能手机之一,然而,与手机的广泛应用相伴的是,众多企业对于如何有效地向这些手机用户推送信息 ...

  7. --{module_name}_binary_host_mirror和--{module_name}_binary_site

    --{module_name}_binary_host_mirror和--{module_name}_binary_site demo // .npmrc文件 sass_binary_site=htt ...

  8. STM32CubeMX教程2 GPIO输出 - 点亮LED灯

    1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) 2 ...

  9. STM32CubeMX教程12 DMA 直接内存读取

    使用STM32CubeMX软件配置STM32F407开发板上串口USART1进行DMA传输数据,然后实现与实验"STM32CubeMX教程9 USART/UART 异步通信"相同的 ...

  10. Spring源码学习笔记6——Spring bean的实例化

    一丶前言 前面我们了解到读取xml or 根据扫描路径生成BeanDefinition并注册到BeanFactory,相当于我们具备了生火做饭的原材料:BeanDefinition,接下来就是Spri ...