>[success] # VueCli -- 3.0 UI配置篇 ~~~ 1.一种可视化配置vue项目的官方提供的一种方式 ~~~ >[danger] ##### 安装 ~~~ 1.npm install -g @vue/cli ~~~ >[danger] ##### 查看版本 ~~~ 1.Vue -v ~~~ >[danger] ##### VueCli -- UI 配置启动 ~~~ 1.输入指令 -- vue ui,但输入指令的根目录最好是你要创建的项目的磁盘: 举个例子: 'F:\VueCliTest>vue ui' 2.输入后 会自动运行一个vue ui的图形化界面(如图) 3.选择第一张图的创建模块 创建一个新项目 4.第二张图创建文件名称和使用的包管理工具 5.第三张图选择配置方式(这里选的手动) 6.第四张图,在功能上这里我配置了' Babel' 将高级语法转换成低级语 法,'Router '路由配置, 'Vuex' ,'CSS Pre-processors' css处理 ,没有选择 推荐Linter/ Formatter 代码检查,最后一定要选择了使用配置文件选项 7.第五张图选择'css' 编辑方式 这里选的less,router这里没有开始history模 式。 8.点击 床架你项目后第六张图,弹出让你选择是否保存这次的配置信息 我选择的是不保存 9.第七张图 是等待生成后显示的所有配置信息 ~~~ * 自动生成的图形化界面 ![](https://box.kancloud.cn/f5b1face4dabfffc33450400472f5479_735x356.png) * 创建文件名称和使用的包管理工具 ![](https://box.kancloud.cn/3ba98eff66ddd06b3e51afa82c210647_597x728.png) * 选择配置方式 ![](https://box.kancloud.cn/b4f579f8f93c3ce79b22dae3334bdeea_1055x465.png) * 配置处理依赖项目 ![](https://box.kancloud.cn/a88bc855c2f452b5d0a83785007e6aed_1255x629.png) * 选着使用哪种css 编辑方式 ![](https://box.kancloud.cn/f3fb1abd5cbbacc687d4254070a89022_1174x411.png) * 选着是否保存这次配置信息 ![](https://box.kancloud.cn/b2e6c107eab5ec4ec39fb0236c6cf277_747x338.png) * 显示最后的配置信息 ![](https://box.kancloud.cn/974962041d6865a8c0084700497db0cd_1435x670.png)