vue2创建项目

目录

1、检查环境，是否安装node

2、是否安装脚手架，查询脚手架vue-cli版本

3、创建项目vue2-admin

4、配置项目：

        4.1、vue.config.js配置

        4.2、修改package.json文件

        4.3、创建环境变量文件（.env.dev、.env.prod、.env.test）

---

1、检查环境，是否安装node：

node -v

 2、是否安装脚手架，查询脚手架vue-cli版本

vue -V或vue --version

 如果之前版本是2.x或者1.x，需要先卸载

//卸载脚手架命令
npm uninstall vue-cli -g

//安装脚手架命令
npm install -g @vue/cli

3、创建项目vue2-admin

vue create vue2-admin

可以按▽键选择第二个Default默认配置按enter键，生成项目

可以自定义配置，按▽键选择第三个选项：Manually select features 按enter键

 

按▽键，按空格键选中

按enter键

选择2.x版本

按enter键

 路由采用history模式，直接输入y

 css编译器选择sass

Eslient选择标准模式 

代码检查，选择保存的时候

 配置文件存放地选择In package.json

 将此保存为未来项目的预设?输入n

按enter 键

 自定义配置可以按个人实际需求配置

4、配置项目：

4.1、vue.config.js配置

//添加基本配置信息以及跨域配置 
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
} 
module.exports = {
  publicPath: process.env.VUE_APP_BASE_URL, // 根地址，默认/
  outputDir: "dist", // 打包目录
  assetsDir: "assets", // 静态资源目录
  lintOnSave: true,
  productionSourceMap: false, // 建议生产关闭
  devServer: {
    proxy: {
      "/test": {
        target: "http://10.10.10:8887",
        changeOrigin: true,
        pathRewrite: {
          "^/test": "/test",
        },
      },
    },
  },
  // 别名
  chainWebpack: (config) => {
    config.resolve.alias.set("@", resolve("src"));
  },
};

4.2、修改package.json文件

  "scripts": {
    "serve": "vue-cli-service serve",
    "serve:test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  }

4.3、创建环境变量文件（.env.development、.env.production、.env.test）

# 开发环境
NODE_ENV = 'development'

# 开发环境，默认BASEURL
VUE_APP_BASE_URL = ''

# 开发环境，API前缀
VUE_APP_BASE_API = ''

#开发环境，Url地址
VUE_APP_BASE_TARGET = 'http://127.0.0.1:9000/'




# 正式环境
NODE_ENV = 'production'

# 生产环境，默认BASEURL
VUE_APP_BASE_URL = ''

# 生产环境，API前缀
VUE_APP_BASE_API = ''

#生产环境，Url地址
VUE_APP_BASE_TARGET = 'https://xxxx.xxxxx.com/'




# 测试环境
NODE_ENV = 'test'

# 测试环境，默认BASEURL
VUE_APP_BASE_URL = ''

# 测试环境，API前缀
VUE_APP_BASE_API = ''

# 测试环境，Url地址
VUE_APP_BASE_TARGET = 'https://xxxxx.xxxxxx.com/'