Vue新建项目GUI方式

Vue3新建项目

启动UI街面创建项目

vue ui

执行完成后会自动在浏览器打开一个界面

Babel

babel是一个工具链，主要用于将ES6及以上版本的代码转换为向后兼容的 JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。（ES即ECMAScript，是JavaScript中的语法规范。ES6即ECMAScript 6标准语法。）

Router

由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
  有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？因为我们一般用Vue做的都是单页应用，只有一个主页面index.html，所以你写的标签是不起作用的，要使用vue-router来进行管理。

Vuex

具体请移步

vuex是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。

vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。

Linter / Formatter

Linter / Formatter(代码格式校验)、使用配置文件

Unit Testing

选择Unit测试方式

EsLint

lint 工具一方面可以帮助维护团队成员保持统一，良好的代码风格，另一面可以帮助我们检测出代码的坏味道，降低 bug 的产生的可能性，提高代码质量。需要指出的是：lint 工具有一定的格式化能力，但是主要功能不是负责格式化代码，格式化代码应该交给专门的格式化工具。

第一项，选择3.X版本,如果你要选择2.x的话就是vue2的版本，看自己的需求

第二项，选中ESLint + Standard config标准配置文件

第三项，Link on save只要保存，就对所写代码进行格式校验

安装插件 vue-cli-plugin-element

element官网上有很多的组件，比如说按钮、输入框等等等等，我们可以直接从官网复制到我们的代码里，稍加定制化就使用。

配置依赖 axios

axios是ajax请求工具，用来向服务器发送ajax请求。

vue3启动

cd 项目目录
npm run serve

千万注意是serve不是server