Vue-cli3.x环境搭建

1、Vue-cli3.x环境搭建

使用Vue-cli3.x搭建环境，建议提前升级Node版本，博主Node版本为10.13.0

老规矩，yarn安装 (不懂的小伙伴，请先敲npm install yarn这个命令来安装yarn)

yarn add vue-cli -g //安装Cli

已有安装过vue-cli的小伙伴，可以使用yarn add vue-cli@指定版本 来安装，本案例vue-cli版本为3.1.3

使用指令vue -V查看版本，确认可以有正确的版本号输出

vue create vue-project //创建名为vue-project的项目

接下来，cmd命令行就会出现一些选项提供我们选择性的进行安装

由于我之前就安装过vue-cli3.x，所以这里会有个update的提示，请忽略....

default:默认配置

Manually select features:手动选择配置

方向键上下进行选择，按回车确认，这里，我们选择性的配置，按回车，就会出现下面的界面，选择配置项

方向键上下进行选择，空格键为确认/取消安装项

Babel：不解释

TypeScript：支持使用 TypeScript 书写源码

Progressive Web App (PWA) Support：PWA 支持

Router：支持 vue-router

Vuex：支持 vuex

CSS Pre-processors：支持 CSS 预处理器

Linter / Formatter：支持代码风格检查和格式化

Unit Testing：支持单元测试

E2E Testing：支持 E2E 测试

我这里选择了一些常用的：Babel，Router，Vuex，CSS Pre-processors

回车，开始安装

安装完成 我们cd到vue-project目录

yarn serve启动项目

打开浏览器，输入localhost:8080，就可以看到Vue启动界面了

2、Vue-cli3.x之webpack配置方式

打开代码，我们会看到目录结构和Vue-cli2.x的不同，里面只有node_modules、public和src三个目录了，2.x版本我们熟悉的build，config目录都不见了，这可怎么破？

慌鸡毛，亮哥带你走向人生巅峰！！！

在根目录下创建个名为vue.config.js的文件就可以了

我们在创建的新文件vue.config.js文件来写个devServer尝试一下

//vue.config.js
module.exports = {
   devServer: {
      port:8081,//修改端口号为8081
      open:true //启动项目时，主动打开浏览器
   }
}

cmd界面重新启动项目，我们就会发现，启动成功时，浏览器就会主动打开一个地址为localhost:8081的项目地址，也就是我们设置的项目新端口了