ui vue 创建项目教程 并关闭语法_使用vue-cli 4的ui界面创建初始化项目

为什么使用vue-cli？

1)、在传统的vue项目开发中，基本上都是将组件、模板、以及css样式和html标签都写在一个html页面中，一个功能开发完成后，html的代码很庞大、臃肿，代码不易区分、不美观。

2)、如果body标签中的有包含html标签还有组件标签、事件函数等，是先要编译、看看里面是什么内容，然后在接着生成对应的组件和事件函数。从解析body标签里的内容、到生成dom对象，再将dom对象渲染到body标签对应的内容中。这是需要很长的时间，如果服务器处理过程比较长，会出现白屏的情况。

vue-cli完美的解决了这些问题，它帮助我们自动化构建项目，将传统的html开发代码解耦(组件归属于components目录、视图标签归属于views目录，js归属于store目录)；还有自动帮我们预编译、生成指定对象，然后再解析的时候，自动为这些标签赋值对应的对象。

什么是新版的vue-cli？

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；

基于 webpack 构建，并带有合理的默认配置；

可以通过项目内的配置文件进行配置；

可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。

一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

使用新版vue-cli的前期准备

要想使用新版的vue脚手架去构建项目，那么需要保证开发环境：

保证已经安装了node.js开发环境，并且其版本要在8.9.x+。

如果之前安装了旧版本的脚手架，需要先卸载再安装新版本的脚手架，卸载命令为:npm uninstall -g  vue-cli；

安装新版本vue-cli

使用命令：

npm install -g @vue/cli

# OR

yarn global add @vue/cli

通过ui界面创建项目(非ui界面创建：在cmd中直接输入vue create 项目名)

1)、cmd命令窗口输入vue ui

如果输入vue ui，出现“vue不是内部命令或外部命令，也不是可执行文件或批处理文件”，这个问题，需要在环境变量的path路径中添加配置的node全局目录的路径。若没有这个问题，就可以正常进入到vue项目管理器界面了。

2)、点击创建、设置项目保存路径

3)、填写创建新项目详情后点击下一步

4)、选择预设

5)、选择功能(也就是构建项目的插件依赖)

点击下一步即可。

6)、配置设置

用心对待，相信美好东西会如期归来。ღ( ´･ᴗ･` )比