Vue-cli3简单使用(图文步骤)

2020-06-16 05:59:14易采站长站整理

可选自己之前创建过的或选择官方默认配置或者手动选择)

选择Manually select features 将出现以下内容

方向键 控制上下 空格选择 A 全选 I反转选择

选择好大体的功能/插件之后 回车 接着会让你选择细分的特性

比如 Linter/Formatter 下:

在保存时进行代码检测

Babel、PostCSS、ESLint等配置文件存放位置,选择单独保存在各自的配置文件中

Pick a CSS pre-processor(css预处理语言)下 有SCSS/SASS、LASS、Stylus

还有TS、PWA、Roter(vue 路由管理;SPA必带)、Vuex(vue状态管理)、测试(Unit Testing、E2E Testing)等等,均可按需选择

最后会询问你 是否保存为未来项目的预设配置 如果保存需要输入名称

等待项目创建…

项目创建好后按提示进入项目,并启动项目

cd learn
进入后
npm run serve

这两个地址均可访问,第二个地址也并不能对外访问,应该是没做好端口映射,那这个地址用来干嘛的?

二、通过GUI创建

在下载好vue-cli3.x后,进入项目存储位置后 输入

vue ui
,会在浏览器内打开vue项目仪表盘(非初次使用界面)

在使用过GUI创建过项目后,再次打开就会直接进入旧项目管理界面,如上

如果需要再新建一个项目,可在 左上角下拉菜单内选择 ”Vue项目管理器“返回首页