Vue学习笔记一：Vue-cli3搭建Vue项目

1. 搭建一个vue-cli3项目

npm install -g @vue/cli
vue create study-vue​.

2.vue-cli3全局环境变量的使用

（1）根目录下新建.env，添加环境变量

VUE_APP_URL=https://mp.yc.info/api

（2）使用环境变量

data () {
    return {
      url: process.env.VUE_APP_URL
    }
}

• 注意：
  1.修改了环境变量后，要重启服务才好用
  2.VUE_APP_URL，前面必须是VUE_APP_*

（3）开发环境变量，新建.env.development，当前启动的是开发环境，使用时自动获取此文件下的变量。

（4）生产环境变量，新建.env.production，当npm run build时，使用时自动获取此文件下的变量，如果不写这个，会使用.env里的。

3.vue-cli3全局配置

根目录下，新建vue.config.js

module.exports = {
  publicPath: '/', // 根路径
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
  lintOnSave: false, // 是否开启ESLint保存检测，有效值 true || false || 'error'
  devServer: {
    open: false, // dev启动是否自动开启浏览器页面
    host: '127.0.0.1', // 0.0.0.0真机测试时候用
    port: 8081,
    https: false,
    hotOnly: false,//热更新（webpack已实现了，这里false即可）
    // 配置跨域
    proxy: {
      'api': {
        target: 'http://localhost:5000/api/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^api': ''
        }
      }
    }
  }
}