可视化面板搭建vue项目3.0

可视化面板搭建vue项目3.0

1. 安装 node.js

在你的平台上下载 Node.js 源码或预编译安装包网址如下：链接: 直达node.js下载.

输入node -v，可得 node.js 的版本号，如下，表示安装成功同时测试 node.js 自带的npm的版本，
输入npm -v ，如下

2. 安装 vue-cli 3.0

已安装vue-cli 的使用命令 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载

完成上面后使用命令npm install -g @vue/cli 或者 yarn global add @vue/cli 完成安装

备注：卸载命令是 npm uninstall -g @vue/cli 或者是 yarn global remove @vue/cli 

如下图表示安装成功

输入 vue ui 之后，会自动弹出可视化面板，然后搭建vue项目

选择项目存放路径，并在此创建项目。

下一步：输入项目名，打开 git 按钮（默认打开），在输入框下输入 init project,点击下一步

根据自己的情况，配置项目，展示手动

选择合适的功能模块,不建议选择linter/Formatter,语法格式校验，挺烦的。

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一
代码的风格,初学者不建议配置。

ESlint with error prevention: 具有错误预防功能的ESlint;
ESlint + airbnb config: ESlint + Airbnb 配置;
ESlint + Standard config: ESlint + 标准配置;
ESlint + prettier: ESlint + 漂亮 ;
翻译有限

点击创建项目后，弹出如下图，按自己需求来，然后完成项目创建。

接着跳到项目主页，按照自己项目要求选择插件和依赖。

点击任务，然后看到旁边菜单，点击 serve , 然后点击 运行，最后启动app。
注意：在其他编辑器运行项目代码是 npm run serve (注意最后一个 e 后面没有r)

以上。