vue-cli3学习第一节之构建一个vue-cli3项目空壳

vue-cli3已经出来很久了，查了下官方的github，最早的是3.0.0-alpha.1 (2018-01-25)，我写这篇文章的时间是2019.05.27，经过时间的沉淀，一些坑也都填的差不多了，而且我所接触的前端开发有用vue-cli基本上也都上3.x版本了，乘着项目刚做完，我也学习下3.x版本的。这是一套笔记，用于记录我在学习中的坑以及不明白的地方，也是给我一些还没入手vue-cli3.x的朋友的一个简单的教程吧。此学习教程只教如何快速上手，具体原理还需看文档或者查资料。本人使用的npm安装，yarn的请自己查命令。

首先，用vue-cli3.x搭建个壳子，按官网上的走即可。

先卸载旧版的vue-cli2.x，运行下面命令：

npm uninstall vue-cli -g

然后安装新版的vue-cli3.x，运行下面命令：

npm install -g @vue/cli

安装好后运行下面命令看下是否3.x版本：

vue -V

好了，安装好vue-cli3.x了，然后开始搭建空壳项目，运行下面命令：

vue create vue3-demo

出现以下选择：

选择手动配置后出现以下画面，空格为选中，回车为配置完成：vuex看你项目情况，如果是状态多的大项目的话就用，不是的话就不用。

下面是将配置统一放到package.json文件中和分成多个文件单独保存的配置结果（其实个人建议还是统一放到package.json中，毕竟vue-cli3就是为了简化那么多文件配置才做的）：

统一放到package.json图：

分成多个单独文件保存图（多了.browserslistrc,.eslintrc.js,postcss.config.js三个文件，其实就是把package.json中的配置拆分成好几个文件，写道这里感觉统一放也比较不错，以后考虑换成统一放吧)：

配置完了，开始下载安装，完成下载安装后，运行下面命令：

cd vue3-demo

npm run serve

完成了，打开 http://localhost:8080/#/  即可

感觉写的还是麻烦了些，等写完所有的，就再整理一波精简以下吧。