vue脚手架通过ui界面创建项目

我们vue脚手架提供了图形界面操作项目,比之前通过命令操作的形式更加简单,下面我就来总结一下图形界面创建项目的基本步骤

1、首先保证全局安装@vue/cli工具 ,没有自行下载

cnpm i @vue/cli -g
1
2、推荐下载yarn包管理器

cnpm i yarn -g
1
3、接下来我们就可以在自己的电脑里创建项目,找到电脑某个位置,在此文件夹按住shift同时右键,在此处打开cmd命令窗口或者在此处打开powershell窗口

4、打开窗口之后运行vue ui命令,此时就会打开ui图形界面
在这里插入图片描述
5、我们选择创建之后就会进入创建页面
在这里插入图片描述
6、点击在此处创建新项目,就会进入项目详情,详情里面,首先填写项目的名字,然后包管理器选择yarn,在填写初始会git默认注释
在这里插入图片描述
7、上面填写完毕后,点击下一步,会进入到选择默认配置还是手动配置,以及选择之前的预设,我们选择手动配置
在这里插入图片描述
8、选择完后继续点击下一步,选择功能,以下是所有功能介绍,我们可以先选择babel、router、Linter、使用配置文件,开发的时候一般css预处理、vuex也肯定要安装的

babel (js高级转低级)

TypeScript (js超级)

Progressive Web App (PWA) Support (渐进式web应用)

Router(路由)

Vuex(状态管理工具)

CSS Pre-processors(css预处理)

Linter / Formatter(语法规范检查)

Unit Testing、E2E Testing(测试方式)

使用配置文件(配置项是存在单独配置文件)

在这里插入图片描述
9、上面选择完后,继续点击下一步会进入到配置选项,此处第一个是 是否开启路由的history模式,我们不开启采用hash模式,eslint采用 ESLint + Standard config ,Pick additional lint features选择默认开启
在这里插入图片描述
10、选择完后,点击创建项目,会弹出是否存为预设,下一次直接使用,可以存个预设的名字,然后点击 保存预设并创建项目 即创建完毕
在这里插入图片描述
11、创建完毕后会进入到项目操作界面

插件(项目用到的插件可以在这里安装)

依赖(项目的依赖工具)

配置(那就是配置了)

任务(可以运行项目、打包项目等)
在这里插入图片描述
12、我们选择任务》server》运行,即可将项目运行起来
在这里插入图片描述
13、最后点击启动app即可看见我们自己创建的项目
在这里插入图片描述
ok,完美收官,学会的点个小赞吧

发布了2 篇原创文章 · 获赞 0 · 访问量 23
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览