简介

Vue官方提供给开发者一个开发Vue单页应用必备工具

什么是Vue脚手架（Vue-cli）？

是一个基于node的工具应用，用于快速生成Vue单页应用的架构，其中包括项目组织结构、所需依赖第三方库和文件、基础配置等

为何要使用Vue脚手架

减低开发难度，因为Vue脚手架已经把第三方工具库（webpack等）最优配置默认内置好并隐藏起来，无需开发者再去操心

安装与使用

第一步：全局安装（仅操作一次）

npm install -g @vue/cli

第二步：创建项目

vue create xxxx

第三步：启动项目

npm run serve

注意

1、Vue脚手架已经隐藏所有webpack相关的配置，为了不让开发者碰坏，若想查看webpack相关配置，请执行：vue inspect > output.js
2、npm安装第三方包速度慢，需要设置：
npm config set registry https://registry.npm.taobao.org

修改默认配置

Vue脚手架已经把构建工具默认配置内置并隐藏了，但考虑到扩展性，Vue脚手架提供了一种可修改的方法：vue.config.js文件。（可修改的配置项是有限的，并非所有默认配置都可修改 ）

关闭lint

lint是语法检查，开发阶段一般都会关闭，在vue.config.js中关闭lint

module.exports = {
    lintOnSave: false
}

开启代理服务器

前端ajax请求后端API经常出现跨域问题，解决跨域问题有3种方式：

1、后端设置响应头CORS （遇到复杂请求时，会增加一次"预检"请求）
2、jsonp （通过巧方法来实现的，不常用）
3、代理服务器（完美解决方案，推荐）

何为跨域？

这是浏览器的一种安全策略，只要协议、域名、端口这3者中，有其中一种不同，浏览器都认为是跨域

简单开启

在vue.config.js中配置开启

module.exports = {
    devServer: {
        proxy: "http://localhost:8080"
    }
}

注意
1、无法配置多个代理
2、无法指定哪些请求需要代理，哪些请求不需要代理

复杂开启（推荐）

在vue.config.js中配置开启

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:5110',  // 代理目标的基础路径
                pathRewrite: {   // 路径重写
                    '^/api': ''
                },
                ws: true,  // 是否使用websocket
                changeOrigin: true   // 是否改变来源
            },
            '/demo': {}
        }
    }
}

changeOrigin设为true时，请求服务器的请求头host将和服务器端口一样
changeOrigin设为false时，请求服务器的请求头host将保持不变

前端学习日记 # Vue脚手架

简介