在Vue 3项目中使用Vue-cli搭建基础架构的笔记

2024-01-17 08:54:50

前言

随着Vue 3的正式发布，越来越多的开发者开始使用Vue 3来构建Web应用程序。Vue-cli是一个官方推荐的Vue项目脚手架工具，可以帮助开发者快速搭建Vue项目。本文将介绍如何使用Vue-cli在Vue 3项目中搭建基础架构，包括安装Vue-cli、创建项目、引入Vuex、Vue-router、Axios、Element-plus等基本插件，并在根目录下创建vue.config.js文件进行配置。

安装Vue-cli

首先，需要在计算机上安装Vue-cli。可以通过以下命令安装Vue-cli：

npm install -g @vue/cli

创建项目

安装Vue-cli后，就可以使用Vue-cli创建Vue 3项目。可以通过以下命令创建项目：

vue create 项目名称

其中，“项目名称”是你想要创建的Vue 3项目的名字。

引入基本插件

创建项目后，需要引入一些基本插件，这些插件可以帮助你快速开发Vue 3应用程序。这些插件包括：

Vuex：状态管理库，可以帮助你管理应用程序的状态。
Vue-router：路由库，可以帮助你管理应用程序的路由。
Axios：一个用于发送HTTP请求的库。
Element-plus：一个UI库，可以帮助你快速构建应用程序的UI界面。

可以通过以下命令安装这些插件：

npm install vuex vue-router axios element-plus

配置根目录下的vue.config.js文件

在根目录下创建一个名为vue.config.js的文件，并添加以下配置：

module.exports = {
  // 配置别名
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
        '@components': resolve('src/components'),
        '@views': resolve('src/views'),
        '@assets': resolve('src/assets'),
        '@utils': resolve('src/utils')
      }
    }
  },
  // 设置生产环境的公共路径，用于引用静态资源
  publicPath: './',
  // 生产环境去除console
  productionSourceMap: false
}