如何创建一个vue项目（详细步骤）

目录

• 一、环境准备
• 二、搭建vue环境
• • [1、 全局安装@vue/cli](#1、 全局安装@vue/cli)
  • 2、命令行输入
  • 3、检测环境安装
• 三、创建vue项目
• • 1、创建项目
  • 2、运行vue项目
• 四、创建vue项目（二）
• 五、vue项目结构
• 六、使用vscode启动vue项目
• 七、vue项目跨域配置

一、环境准备

检测电脑环境中是否安装了node.js。

通过win+r配合cmd窗口，node -v进行查看。

node和npm是一一对应的，每个版本的node对应每一个版本的npm。

如果没有安装node.js，则需要去查看这篇文档。
使用nvm管理node多版本

二、搭建vue环境

1、 全局安装@vue/cli

安装地址：https://cn.vuejs.org/

2、命令行输入

npm install -g @vue/cli

3、检测环境安装

三、创建vue项目

1、创建项目

（1）以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹，输入

vue create demoname

（2）做一些配置：

（3）按住空格选中想要添加的配置：

（4）选择vue版本，我选的是3.x

（5）是否要保存为这个项目作为一个模板保存？

一路enter键就可以创建好了。

（6）切换到vue工作目录

2、运行vue项目

cd 工作目录
npm run serve

看到下面的页面说明，vue项目创建成功并且启动成功。

四、创建vue项目（二）

1、打开终端，进入要创建项目的目录（如 cd ~/projects），执行创建命令：

npm create vite@latest

create vite@latest 会拉取最新版 Vite 创建器，无需全局安装 Vite。

2、按交互式提示逐步配置：

✔ Project name: ... vue-vite-demo

✔ Select a framework: › Vue

✔ Select a variant: › JavaScript

访问路径：http://localhost:5173/

五、vue项目结构

六、使用vscode启动vue项目

使用vite创建的vue项目包含vite.config.js

使用vue/cli创建的vue项目

两种方式创建出来的vue项目结构相同，但是管理者不同。

七、vue项目跨域配置

使用下面的形式可以进行跨域配置。

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }

  },

  devServer: {
    port: 5173, // 设置开发服务器端口
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      'apiFlask': {
        target: 'http://localhost:5000',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          '^/apiFlask': ''
        }
      }
    }
  }
})