vue-cli3.0脚手架的学习

vue-cli的简单介绍：

通过 @vue/cli 快速生成零配置的项目脚手架：

• 1.可以灵活的配置文件进行配置；
• 2.可以通过插件进行拓展
• 3.可以进行图形界面画进行项目配置

安装

安装的注意点：

• 1.nodejs的版本要求（8.9 或更高版本-->推荐8.11.0+）可以使用nvm-windows来管理node版本；
• 2.如果电脑中以前有全局安装过vue-cli（1.x或者2.x）你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

安装命令

• 1.npm install -g @vue/cli(或者)
• 2.yarn global add @vue/cli
• 3.可以通过 vue --version 命令来看看是否安装成功

创建项目

命令：vue create vue-cli3.0-demo(这个是项目的名字)

通过键盘的上下按键可以选择默认的配置还是手动配置，默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。可以通过上下按键来选择你需要的配置，然后在通过空格键确定你所选择的配置

以下是随便选的几个配置进入下一步之后会有一个选择css预处理语言的选项，一般我们用scss所以就选了scss

下面的选则项是询问哪个自动化代码格式化检测，配合vscode编辑器的就选择了Prettier这个代码格式化的选项

这里第一个选项是问你是否保存刚才的配置，选择确定后你下次再创建新项目 就有你以前选择的配置了，不用重新再配置一遍了

下边这俩意思问你像，babel,postcss,eslint这些配置文件放哪？ 第一个是：放独立文件放置 第二个是：放package.json里 这里推荐放单独配置文件，选第一个

最后就是问下是否将以上配置保存为默认配置和项目的描述，之后就是初始化项目了

项目创建完成之后

• 1.如果想去掉eslint配置的话，找到.eslintrc文件去掉extends: ["plugin:vue/essential", "@vue/prettier"],中的"@vue/prettier"
• 2.如果想在本地放一些模拟测试数据必须放在public文件夹下面，vue-cli3.x的public文件相当于2.x的static文件只有这个文件夹是对外暴露的（必须注意）；
• 3.项目的目录相比于2.x版本精简了很多了，以下是对各个目录的介绍

a:2.x版本中的build，config的文件夹怎么没有了，那我怎么配置webpack的功能，以及一些其他的配置？

q:3.x的版本要想修改项目的默认配置，可以在根目录下新建vue.config.js,可以配置自己先要的配置，在webpackbuild或者在开发运行时，都会加载此文件下的配置。具体详细的配置点这里配置文档一下介绍下简单的配置请看下图