安装vue-cli3的环境准备

1.如果已经安装了vue-cli2，请先删除当前脚手架，否则vue-cli3无法成功安装。

npm卸载vue-cli -g

2.请检查node.js Vue-cli3的版本是否需要大于8.9的节点版本。在cmd中输入node -v以查看版本。如果版本太低，请先去节点官网下载高版本。

安装脚手架

vue-cli3的包名由vue-cli改为@vue/cli。使用npm在全球范围内安装vue-cli3。

npm install @vue/cli -g

然后用vue -V v。

使用vue-cli3创建项目

vue-cli3和2.x在创建项目的方式上有些不同。首先，在创建项目时，给我们更多可配置的选项。选择手动选择功能时，可以选择是否安装vue-router、vuex等。其次，它的目录结构也可以通过2.x来区分，这将在下面详细描述。然后，我们可以将这个安装配置保存为一个预置，以后可以重用，这样在以后创建项目的时候会更快。

1.输入vue create vue_cli3_test，上下键可以选择默认安装或手动安装。这次我选择了手动安装。

2.点击回车键进入配置界面。在要安装的配置前勾选*。空格键可以勾选和不勾选。可以根据个人需求进行配置。

成功安装后，按照提示输入目录并运行项目。

CD vue _ cli3 _ test纱发球

3.vue-cli3提供了一个图形界面来创建项目，并且可以直接在网页上配置项目。

vue ui

4.当您打开目录时，您会发现配置文件都在那里。别慌。vue.config.js文件可以在与package.json文件相同的目录下创建。文件的格式应该是

//vue . config . js module . exports={//options.}以下是我的基本配置：

module . exports={ output dir : ' dist '，//构建输出目录assetsDir: ' assets '，///静态资源目录(js，CSS，img) lintonsave : false，//打开eslit devserver : { open : true，//自动弹出浏览器页面host3360' localhost '，port3360' 8081 '，https : false，//是否使用https协议hotOnly:}}官网提供了丰富全面的配置，更多配置请参考https://cli.vuejs.org/zh/conf.

跨域处理

前端和后端分开开发时，就要面对跨域的问题。处理跨域有两种方法。

1.安装nginx，并将后端和前端代理带到nginx。

2.在vue-cli中配置代理，并将API请求代理到API服务器。设置devServer.proxy

Devserver3360 {open: true，//是否自动弹出浏览器页面host:' localhost '，port3360' 8081 '，https : false，hotonly : false，proxy 3360 { '/API ' : { target : ' http://localhost 33605000 '，//API服务器的地址ws: true，//代理web套接字更改来源：

摘要

以上是边肖介绍的vue-cli3配置和跨域处理方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你