vue-cli-3.0脚手架的一个初体验。新出的东西当然是去体验一下啦。哈哈，跑一圈看看效果 

项目创建：

1. 采用了vue最新的脚手架 vue-cli 3.0 做为项目的基本框架

Vue-cli的安装命令 npm i @vue-cli -g(如果之前有安装vue-cli2.0版本的建议卸载了吧，哈哈)

Tip:安装后 可以输入 vue -V检查是否安装成功

2. [endif]安装完成之后就需要创建项目，vue-cli 3.0创建项目比之前版本 简单了一点

创建命令vue create‘项目名称’（这里就建一个基础的项目）

运行项目后有两个选项，第一个是默认，第二个是手动添加。（这里选择手动添加）

选完手动添加

空格是中的意思。这里我就选择了路由。Vuex状态管理（想加上这个，父子子传值真头疼了），css

下面这个是否开启路由的历史模式：（详见vue-router官网，需要后台配合，我这里就不开了）

下面是选择css预处理器。 旧项目用的好像是less.那就继续选less吧

下面是大家最爱的ESlint(为了项目的代码规范，还是用吧，我真的恨爱恨爱！！)这里选择只是警告模式吧，不然报错报的心疼自己

下面是否保存配置，下一次直接用。

下面询问babel,postcss,eslint这些配置文件放哪？单独还是package.json里面（我选单独）

下面是表示用yarn还是npm 进行包的管理（tip:npm 是自带的，yarn还需要去安装，个人喜欢）

图忘截图（脑补）

在这里就选择yarn（为啥？安装依赖速度快，版本一致性，在文档结尾附带一张npm和yarn的对比操作）选择完后，就会进行模板的下载

上面就是项目创建完成，这里对比之前的vue-cli的npm模式，这里会自动下载好依赖

我们运行命令yarn serve先尝试把项目跑起来

可以看到项目跑起来了。只需要打开网页输入上面的地址就可以访问了

项目基本结构：

build哪里去了？config哪里去了？配置都消失了？

vue-cli3.0默认项目目录与2.0的相比:1.移除的配置文件根目录下的，build和config等目录，2.移除了static文件夹，新增了public文件夹，并且index.html移动到public中。3.在src文件夹中新增了views文件夹，用于分类试图组件和公共组件。4.大部分配置 都集成到 vue.config.js这里,在项目根目录下

对比之前的项目结构简洁了很多，也少了几个config配置文件，那没有些怎么办？慢慢配呗，反正比之前的配置也简单清晰很多了

主要分析下src里面的内容

1.Assets -->静态文件的存放地址，icon字体、图标、一些第三方的样式

2.Component -->公共组件的存放目录（不要再把不是公用的组件放到这个文件夹里面）

3.Filters -->公共的转换js.例如日期，金额之类

4.Public -->公共js文件

5.Router -->前端路由存放地址

5-1:Modules-->模块路由

5-2:Index.js -->主要路由。里面可以通过导入module目录下的各个模块路由拓展路由

6:views -->主要开发页面地址存放

6-1:Layout -->页面结构文件

6-2:sysManger -->系统管理模块

6-3:index.vue首页vue

6-4：可以在每个模块下面放置一些页面组件（即只能该模块使用的组件，另外新建一个文件夹Component存放）

图中这两个文件是配置开发环境和生产环境的一些变量，主要是配置接口地址

变量一定要以VUE_APP_开头，不然是检查不到的（哈，公司的接口地址挡一下）

最后就简单说一下vue-config-js这个配置文件。

再最后说一下pack.json

这里多出来的lint是用来检测代码- -就是跑一边就知道这个项目有多不规范的东西（没眼看，太多了改不过来）

最最最后，这次我们的请求插件换成了axios（通过生成一个实例，然后导出这个实例）

yarn 和 npm的操作区别

哈，最后觉得这个对你有用的话，给我点个赞，当做支持吧，谢谢