我们vue脚手架提供了图形界面操作项目,比之前通过命令操作的形式更加简单,下面我就来总结一下图形界面创建项目的基本步骤
1、首先保证全局安装@vue/cli工具 ,没有自行下载
cnpm i @vue/cli -g
2、推荐下载yarn包管理器
cnpm i yarn -g
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,完美收官,学会的点个小赞吧