Vue3 项目搭建完整配置指南：从基础到高级

以下是搭建好的 Vue3 项目需要的配置大全及具体操作：

安装 Vue CLI

在命令行中输入以下代码来安装 Vue CLI：

npm install -g @vue/cli

创建 Vue 项目

在命令行中输入以下代码来创建 Vue 项目：

vue create my-project

其中，my-project 是项目名称。根据提示选择需要的配置项，如使用 Babel、CSS 预处理器等。

安装 Vue Router

在命令行中输入以下代码来安装 Vue Router：

npm install vue-router@4.0.0-beta.13

配置 Vue Router

在 src 目录下创建 router 目录，并在其中创建 index.js 文件，代码如下：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

其中，路由配置在 routes 数组中，history 配置使用 createWebHistory，最后导出 router 对象。

在 main.js 文件中引入并使用 router，代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

安装 Vuex

在命令行中输入以下代码来安装 Vuex：

npm install vuex@4.0.0-beta.4

配置 Vuex

在 src 目录下创建 store 目录，并在其中创建 index.js 文件，代码如下：

import { createStore } from 'vuex'

const store = createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

export default store

其中，state、mutations、actions、modules 均为 Vuex 的配置项，根据需要进行配置即可。

在 main.js 文件中引入并使用 store，代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

配置 axios

在命令行中输入以下代码来安装 axios：

npm install axios

在 src 目录下创建 api 目录，并在其中创建 index.js 文件，代码如下：

import axios from 'axios'

const service = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 5000
})

export default service

其中，baseURL 配置为接口地址的前缀，timeout 配置为接口请求的超时时间。

配置 sass

在命令行中输入以下代码来安装 sass：

npm install sass

在 vue.config.js 文件中进行配置，代码如下：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import '@/assets/styles/_variables.scss';'
      }
    }
  }
}

其中，prependData 配置为 sass 文件中需要导入的变量文件的路径。

配置 babel

在 vue.config.js 文件中进行配置，代码如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: []
}

配置 eslint

在命令行中输入以下代码来安装 eslint：

npm install eslint

在 vue.config.js 文件中进行配置，代码如下：

module.exports = {
  lintOnSave: true
}

其中，lintOnSave 配置为保存文件时进行 eslint 检查。

以上就是搭建好的 Vue3 项目需要的配置大全及具体操作。根据需要进行配置即可。