vue3项目创建与基本配置

最新推荐文章于 2025-04-16 10:00:00 发布
最新推荐文章于 2025-04-16 10:00:00 发布
阅读量2k 收藏 48
点赞数 49
文章标签： vue 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_74197140/article/details/138969302
版权

vue3项目创建与基本配置

一、使用vue3

首先确保电脑安装有nodejs且版本在16以上。可通过cmd打开命令窗口，通过node -v查看node版本。需要的可自行到官网下载->Node.js

  1. 安装

    npm init vue@latest

  2. 按照如图选取（全都是默认，之后按需导入）
    在这里插入图片描述

  3. 分别运行cd vue3-project,npm install,npm run dev。运行完后点击运行网址(http://localhost:5173/)，若出现vue3初始页面，则vue3项目创建成功，接下来进行一些简单的配置。
    在这里插入图片描述

二、目录调整

  • 删除components下面自动生成的内容
  • 新建目录api、utils、views
  • 删除app.vue中自定生成的内容

三、axios请求

  1. 安装

    npm install axios

  2. 配置request.js
    在src/utils/request.js中配置

    //导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})


//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

  3. 处理跨域
    在vie.config.js中配置

    import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    //配置代理
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080', // 后端服务器地址
                changeOrigin: true, // 是否改变请求域名
                rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
            }
        }
    }
})

  4. 优化axios响应拦截器

    //添加响应拦截器
instance.interceptors.response.use(
    result => {
        //如果业务状态码为0，代表本次操作成功
        if (result.data.code == 0) {
            return result.data;
        }
        //代码走到这里，代表业务状态码不是0，本次操作失败
        alert(result.data.message || '服务异常');
        return Promise.reject(result.data);//异步的状态转化成失败的状态
    },
    err => {
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

四、element-plus组件库

  1. 安装

    npm install element-plus --save

  2. 完整导入

    import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

五、sass

npm install sass -D

六、router路由管理

  1. 安装

    npm install vue-router@4

  2. 创建路由器
    在src目录下创建router文件夹，在router中创建index.js文件

    import {createRouter, createWebHistory} from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from "@/views/Layout.vue";
import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'

//定义路由关系
const routes = [
  {
      path: '/login',
      component: LoginVue
  },
  {
      path: '/',
      component: LayoutVue,
      redirect: '/article/manage',        // 重定向        
      children: [     //子路由
          {path: '/article/category', component: ArticleCategoryVue},
          {path: '/article/manage', component: ArticleManageVue},
      ]
  }
]

//创建路由器
const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

//导出路由
export default router

  3. 使用router
    在main.js中导入创建应用实力的js文件，并调用实例的use方法使用路由器

    import router from '@/router'

app.use(router)

  4. 在App.vue中使用

    <template>
    <router-view></router-view>
</template>

  5. 在相应文件中使用二级路由

    <el-main>
<router-view></router-view>
</el-main>

  6. 添加路由路径

    <el-menu-item index="/article/category">
    <el-icon>
        <Management />
    </el-icon>
    <span>文章分类</span>
</el-menu-item>

  7. 路由使用

    import { useRouter } from 'vue-router'
const router = useRouter();

router.push('/')

七、pinia状态管理库

Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态

  1. 安装

    npm install pinia

  2. 使用pinia
    在main.js中，引入pinia，创建pinia实例，并调用vue应用实例的use方法使用pinia

    import { createPinia } from 'pinia'

const pinia = createPinia()
app.use(pinia)

  3. 定义store
    在src中创建stores文件夹，在src/stores目录下定义token.js

    import {defineStore} from "pinia";
import {ref} from 'vue';

/**
 defineStore参数描述：
 第一个参数：给状态起名，具有唯一性
 第二个参数：函数，可以把定义该状态中拥有的内容

 defineStore返回值描述：
 返回的是一个函数，将来可以调用该函数，得到第二个参数中返回的内容
 */
export const useTokenStore = defineStore('token', () => {
        //1.定义描述token
        const token = ref('')

        //2.定义修改token的方法
        const setToken = (newToken) => {
            token.value = newToken
        }

        //3.定义移除token的方法
        const removeToken = () => {
            token.value = ''
        }
        return {
            token, setToken, removeToken
        }
    }
)

  4. 使用store
    在需要使用状态的地方，导入@/stores/*.js , 使用即可，在Login.vue中导入@/stores/token.js, 并且当用户登录成功后，将token保存pinia中

    //导入token状态
import { useTokenStore } from '@/stores/token.js'

//调用useTokenStore得到状态
const tokenStore = useTokenStore();

//用于登录的事件函数
const login = async () => {
    let result = await loginService(registerData.value)
    //保存token
    tokenStore.setToken(result.data)

    ElMessage.success('登录成功!')
    router.push('/')
}

  5. 设置请求头

    //导入@/stores/token.js
import { useTokenStore } from '../stores/token'


//文章分类列表查询
export const articleCategoryListService = () => {
    //获取token状态
    const tokenStore = useTokenStore()
    //通过请求头Authorization携带token
    return request.get('/category', { headers: { 'Authorization': tokenStore.token } })
}

  6. axios请求拦截
    在 src/util/request.js中

    //导入token状态
import { useTokenStore } from '@/stores/token.js';
//添加请求拦截器
instance.interceptors.request.use(
    (config)=>{
        //在发送请求之前做什么
        let tokenStore = useTokenStore()
        //如果token中有值，在携带
        if(tokenStore.token){
            config.headers.Authorization=tokenStore.token
        }
        return config
    },
    (err)=>{
        //如果请求错误做什么
        Promise.reject(err)
    }
)

八、Pinia持久化插件

  1. 安装

    npm install pinia-persistedstate-plugin

  2. pinia中使用persist插件
    在main.js中

    //导入持久化插件
import {createPersistedState} from'pinia-persistedstate-plugin'
const pinia = createPinia()
const persist = createPersistedState()
//pinia使用持久化插件
pinia.use(persist)

  3. 在创建定义状态是配置持久化
    在src/stores/token.js中

    export const useTokenStore = defineStore('token', () => {
        //1.定义描述token
        const token = ref('')

        //2.定义修改token的方法
        const setToken = (newToken) => {
            token.value = newToken
        }

        //3.定义移除token的方法
        const removeToken = () => {
            token.value = ''
        }
        return {
            token, setToken, removeToken
        }
    }
    ,
    //参数持久化
    {
        persist: true
    }
)

九、axios请求优化配置

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';

import {ElMessage} from 'element-plus'

//定义一个变量,记录公共的前缀  ,  baseURL
// const baseURL = 'http://localhost:8080';
const baseURL = '/api';
const timeout = 50000;
const instance = axios.create({baseURL, timeout})

//导入token状态
import {useTokenStore} from '@/stores/token.js';
//添加请求拦截器
instance.interceptors.request.use(
    (config) => {
        //在发送请求之前做什么
        let tokenStore = useTokenStore()
        //如果token中有值，在携带
        if (tokenStore.token) {
            config.headers.Authorization = tokenStore.token
        }
        return config
    },
    (err) => {
        //如果请求错误做什么
        return Promise.reject(err)
    }
)

import router from "@/router/index.js";

//添加响应拦截器
instance.interceptors.response.use(
    result => {
        // 判断业务状态码
        if (result.data.code === 0) {
            return result.data;
        }

        // 操作失败
        ElMessage.error(result.data.msg ? result.data.msg : '服务异常')
        return Promise.reject(result.data);
    },
    err => {
        //如果响应状态码时401，代表未登录，给出对应的提示，并跳转到登录页
        if (err.response.status === 401) {
            router.push('/login').then(r => {
                ElMessage.error('请先登录！')
            })
        } else {
            ElMessage.error('服务异常');
        }
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

十、最终文件内容

  1. main.js
    import { createApp } from 'vue'
import App from './App.vue'
// router 路由管理
import router from '@/router'
// pinia 状态管理库
import {createPinia} from "pinia"
// pinia 持久化插件
import {createPersistedState} from'pinia-persistedstate-plugin'
// element-plus 组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
const pinia = createPinia()
const persist = createPersistedState()
pinia.use(persist)
app.use(router)
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')
  2. src/router/index.js
    import {createRouter, createWebHistory} from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from "@/views/Layout.vue";
import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'

//定义路由关系
const routes = [
    {
        path: '/login',
        component: LoginVue
    },
    {
        path: '/',
        component: LayoutVue,
        redirect: '/article/manage',
        children: [
            {path: '/article/category', component: ArticleCategoryVue},
            {path: '/article/manage', component: ArticleManageVue},
        ]
    }
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

//导出路由
export default router
  3. src/stores/index.js
    import {defineStore} from "pinia";
import {ref} from 'vue';

/**
 defineStore参数描述：
 第一个参数：给状态起名，具有唯一性
 第二个参数：函数，可以把定义该状态中拥有的内容

 defineStore返回值描述：
 返回的是一个函数，将来可以调用该函数，得到第二个参数中返回的内容
 */
export const useTokenStore = defineStore('token', () => {
        //1.定义描述token
        const token = ref('')

        //2.定义修改token的方法
        const setToken = (newToken) => {
            token.value = newToken
        }

        //3.定义移除token的方法
        const removeToken = () => {
            token.value = ''
        }
        return {
            token, setToken, removeToken
        }
    },
    {
        persist: true        // 持久化存储
    }
)
  4. src/utils/request.js
    import axios from 'axios';

import {ElMessage} from 'element-plus'

//定义一个变量,记录公共的前缀  ,  baseURL
// const baseURL = 'http://localhost:8080';
const baseURL = '/api';
const timeout = 50000;
const instance = axios.create({baseURL, timeout})

//导入token状态
import {useTokenStore} from '@/stores/token.js';
//添加请求拦截器
instance.interceptors.request.use(
    (config) => {
        //在发送请求之前做什么
        let tokenStore = useTokenStore()
        //如果token中有值，在携带
        if (tokenStore.token) {
            config.headers.Authorization = tokenStore.token
        }
        return config
    },
    (err) => {
        //如果请求错误做什么
        return Promise.reject(err)
    }
)

import router from "@/router/index.js";

//添加响应拦截器
instance.interceptors.response.use(
    result => {
        // 判断业务状态码
        if (result.data.code === 0) {
            return result.data;
        }

        // 操作失败
        ElMessage.error(result.data.msg ? result.data.msg : '服务异常')
        return Promise.reject(result.data);
    },
    err => {
        //如果响应状态码时401，代表未登录，给出对应的提示，并跳转到登录页
        if (err.response.status === 401) {
            router.push('/login').then(r => {
                ElMessage.error('请先登录！')
            })
        } else {
            ElMessage.error('服务异常');
        }
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;
创建第一个 Vue 3 项目
weixin_42066070的博客
05-26 1287
本教程将通过一个简单的文章搜索系统，一步步帮你构建一个自己的 Vue 3 项目。 以下是我们最后的成果。 如果你目前正在学习 Vue 3 项目开发，相信你一定兴奋起来了，现在让我们开始吧。 入门 将 Vue 3 添加到现有项目或自己创建 Vue 3 项目有若干不同的选项。 本教程将介绍我个人最喜欢的两个选项： Vue CLI Vite Vue CLI 如果你以前搞过 Vue 开发，那么你一定用过 Vue CLI来设置项目。 Vue CLI 是 Vue 开发的命令行界面，
Vue3入门 - 项目搭建和配置
觉醒法师的专栏
08-30 3568
Vue3和Vue2相比，在多个方面展现出了其独特的优势，也存在一些缺点。Vue3在性能、TypeScript支持、组件化和模块化等方面具有显著优势，但也存在学习曲线陡峭、迁移成本高等缺点。在选择使用Vue3还是Vue2时，需要根据项目的具体需求、团队的技术栈以及项目的稳定性要求等因素进行综合考虑。
创建vue3项目及基本常用配置
活宝小娜的博客
04-03 1171
vue3项目的流程以及基本配置
二、Vue 3 项目的基本配置
最新发布
JLULLM的博客
04-16 1625
在创建好的基础上进行简单的项目配置，完成别名以及路由的配置
vue3项目创建+配置
LiLei233的博客
04-09 2159
一. 创建项目,二. 配置eslint,三. husky 代码检查工作流（非必要）,四. 路由配置，五. 配置element-plus，六. axios配置
【Vue】3.0 项目创建 自定义配置
weixin_52418790的博客
04-21 8623
1、进入项目路径 2、创建vue3项目 vue create +项目名称 注意：项目名称要避开特殊名字如echarts、vue等 3、项目配置 等待后弹出选项窗口，询问用户以什么模板方式进行安装 Default ([Vue 3] babel, eslint)：默认预设配置，会快速创建一个Vue2.0项目，提供了babel和eslint支持 Default ([Vue 2] babel, eslint)：默认预设配置，会快速创建一个Vue3.0项目，提供了babel和eslint支持 Manu
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
10-17
使用vue-cli3创建Vue项目及配置VS Code自动代码格式化和Vue语法高亮问题涉及了多个知识点和步骤，主要包括vue-cli3的基本使用、VS Code的插件安装和配置、ESLint和Prettier的安装和配置以及VS Code用户设置的修改。...
Vue项目创建及配置
L14173233的博客
08-07 1980
Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM（Model-View-ViewModel）的架构模式。MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。Model（模型）：表示应用程序的数据和业务逻辑。在Vue中，模型通常是一个JavaScript对象。View（视图）：表示用户界面。在Vue中，视图通常是使用HTML模板构建的。ViewModel（视图模型）：充当模型和视图之间的中间层。
Vue Cli3 创建项目的方法步骤
10-17
使用Vue CLI 3创建一个新的项目，可以使用默认配置或自定义配置。默认配置是： ``` vue create project-name ``` 如果想要自定义功能，可以选择： ``` vue create project-name --default 或 vue ui ``` ...
一文教你学会vue前端项目创建与开发
任聪聪的博客
09-07 1612
说明：自定义的项目结构对于我们后期的开发工作有着至关的作用，一个好的目录结构及配置能够在后续的工作中起到事半功倍的效果。timeout: 5000,//超时时间headers: {},});// 请求拦截器});},error => {// 响应拦截器},error => {},npm run dev 运行开发环境npm run b:prod 构建生产环境的代码。npm run b:stage 构建阶段环境的代码。
Vue3项目创建及相关配置
qq_63161848的博客
08-07 2300
Vue是一种用于构建用户界面的JavaScript框架，核心思想是通过数据驱动视图，使得界面的渲染和更新更加简单高效。Vue通过内置的Vue Router插件提供了路由功能来实现单页面应用程序的页面切换。
vue3项目搭建
weixin_51349592的博客
03-26 1638
使用vue、vite、axios、vue-router、pinia搭建vue3项目
Vue3项目配置
weixin_63169162的博客
03-16 2143
vue项目开发中会用到的各种项目配置，以及引导、代码规范等等
创建一个vue3项目
dreams_dream的博客
07-27 1万+
创建一个vue3项目
Vue3项目创建及基本配置
m0_62659797的博客
04-14 2053
本文章提供Vue3项目创建，项目基本配置的流程，以便快速开发。环境准备：pnpm ^8。
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 12万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
新建vue3项目
qq_40981804的博客
12-17 1915
src文件夹是核心源代码的所在目录，展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的），正常开发的时候一般只修改​ src​ 文件夹下的文件。│　　　├──　​​router 目录 ​：用来存放 ​index.js​，用来配置路由，定义各个页面对应的URL。│　　　├── main.js​：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。│　　　├──​ app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值