vue创建项目、初始化项目

vue创建项目、初始化项目、vue请求代理

条件：

@vue/cli 5.0.4
node /v14.0.0

一、安装脚手架工具 @vue/cli

npm install -g @vue/cli
npm install -g @vue/cli@5.x.x //后面跟着版本号
//如果****慢，可以重新配置registry路径，使用淘宝地址
npm config set registry https://registre.npm.taobao.org/

注：已经安装过低版本，不能安装高版本问题：

找到@vue安装目录，通常在C:\Users\25617\AppData\Roaming\npm\node_modules目录下，删除@vue文件夹
删除C:\Users\25617\AppData\Roaming\npm目录下的vue、vue.cmd两个文件
删除npm下载时生成的缓存文件C:\Users\25617\AppData\Roaming下的npm-cache
重新安装

二、创建项目

在命令行输入vue create 项目名称
选择手动创建项目，选择第三项
基本配置：babel、eslint、Router、Vuex、css，空格是选择

具体配置按需求操作。

- css -> stylus
- eslint -> pretty -> on save（保存时做检测）
- router -> 模式是 history

创建成功后通过cd进去项目
启动项目 npm run serve

三、配置vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //忽略lint检测
  //请求代理
  devServer: {
    proxy: {
      //http://localhost:7001/api/name -> http://39.102.89.187:7001/name
      '^/api': {
        target: 'http://39.102.89.187:7001',
        pathRewrite: {
          '/api': ''
        }
      },
    }
  }
});