本文共 1853 字，大约阅读时间需要 6 分钟。

Visual Studio Code使用Vue3

Visual Studio Code是微软推出的开源代码编辑器，支持多种编程语言和扩展插件，特别适合前端开发。以下是使用Vue3的步骤和注意事项。

一、Mac安装Visual Studio Code

安装Visual Studio Code的步骤如下：

二、安装node.js

安装node.js有两种方式：

方式一：下载软件包安装

方式二：使用brew安装

brew install node

2. 输入以下命令以验证安装：

node -v
npm -v

三、安装淘宝npm镜像和vue脚手架

安装npm镜像和脚手架：

3. 安装npm镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装vue脚手架：

npm install -g vue-cli

3. 查看安装版本：

vue -V

四、Vue CLI和Vue的区别

Vue CLI和Vue的主要区别在于：

4. Vue CLI是一个基于Vue.js的快速开发脚手架
5. Vue版本可根据项目需求灵活选择
6. 查看Vue CLI版本：

vue -V

五、使用脚手架创建vue3项目

创建vue3项目：

7. 在终端输入以下命令：

vue create vue3-app

2. 选择项目结构和配置
3. 进入项目目录，运行：

npm run serve

六、VUE3目录结构说明

VUE3项目目录结构如下：

4. node_modules：依赖文件
5. public：静态资源
6. src：业务目录
   • components：组件
   • App.vue：根模块
   • views：页面
   • router：路由
7. package.json：项目依赖

七、引入Element-plus

引入Element-plus：

8. 方法一：安装包：

npm install element-plus --save

2. 查看安装状态：

npm ls

方法二：使用vue add插件：

vue add element-plus

八、安装axios

安装axios：

3. 进入项目目录，运行：

npm install axios --save

九、封装axios

封装axios：

4. 在src目录下创建request文件夹，新建index.ts：

import axios from 'axios'
const service = axios.create({
  baseURL: '/api',
  timeout: 60000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    'token': 'your token',
    'X-Requested-With': 'XMLHttpRequest'
  }
})
service.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    console.log(error)
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  (response) => {
    const dataAxios = response.data
    const code = dataAxios.reset
    return dataAxios
  },
  (error) => {
    console.log(error)
    return Promise.reject(error)
  }
)
export default service

至此，完成准备工作，可以开发前后端项目了。

转载地址：http://plqfk.baihongyu.com/