1、1全局安装 vuecli ，在命令提示窗口执行2安装vuecli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vuecli工程项目的命令通过vuecli搭建一个vue项目，会自动生成一系列文件，而这些文。

2、在终端输入以下命令检测cnpm是否安装成功 vuecli是vue脚手架工具，方便打包，部署，测试等进入你的项目目录，创建一个基于 webpack 模板的新项目 vue init webpack 项目名 进入项目 安装依赖 此时项目中会多了一个nod。

3、脚手架安装成功之后，就可以通过脚手架创建vue项目了通过上面脚手架创建的Vue项目，使用 npm run serve 命令之后，打印如下使用 npm run serve 命令并不会自动打开浏览器，下面我们修改端口号，并且让执行命令之后自。

4、vuecli脚手架安装命令安装之后 执行 vue V#160，如果出现相应的版本号就是安装成功 4用vuecli创建一个基于webpack的新项目并运行 首先可以在桌面新建一个文件夹，如Vue 然后执行cd Vue 进入文件夹，然后输入。

5、这里说下 vuecli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便启动 vuecli 图形界面 然后。

6、需要配置以下的所有命令例如需要用到vue文件需要先安装vueloadervuestyleloader等加载器并做配置要使用es6语法，需要安装babel和babelloader等加载器注意一条都不能配置漏，不然出现报错可能影响往后的运行与配置。

7、第一种 使用vuecli快速搭建脚手架 第二种 vueinit初始化项目 先聊一下第一种方式全局安装 vuecli 如图安装成功后开始初始化项目，执行 vue init webpack myblog，点击enter键，直至新建项目完成myblog为项目。

8、输入 命令 vue 查看一下 ，有东西说明成功了如果没有成功忽略安装webpack模板 敲黑板出现如下图成功后cd 到自己的工程名字 敲黑板可以来解析css 注意安装用来解析css文件的。

9、目前在市面上存在很多脚手架，如createreactappvuecli我们可以通过一行简单的命令，就能创建一个基本的项目工程，大大地提高了开发效率但是我们会面临一个问题，除了脚手架帮我们创建好的项目框架，我们的项目总有。

10、2全局安装 npm install g @vuecli 或 yarn global add @vuecli 3全局安装了vuecli3 但是还想用vuecli2 ，添加一个桥接工具 命令npm install g @vuecliinit 4可以进行创建项目了 vuecli2 命令。

11、注意该命令需要在联网状态下执行才能成功这样一个简单的 vue 项目就建立完成项目文件结构如下图按照提示，打开浏览器输入地址。

12、脚手架3移除了一系列的配置文件，默认项目端口是8080，但是当我们需要指定其他的端口启动项目的时候就需要我们手动添加配置文件在项目根目录下创建 切换命令行到项目根目录下，运行命令 npm run serve。

13、使用cli3创建项目此时会根据这个名称创建一个文件夹存放之后项目的内容该名称也会做为默认的项目名称，但是不包含大些字母 使用脚手架创建项目CLI2。

14、在执行 npm init 时，也会出现 REPL 收集创建 npm 包时所需的信息 再比如我们在使用 @vuecli 脚手架创建项目时，敲下 vue create myapp 命令后，会弹出配置选择交互菜单这种便捷友好的 REPL 拓展工具。

15、可能会导致创建新项目按钮不亮您可以尝试更改项目名称，并且确保项目名称符合规则如果以上方法仍无法解决问题，请尝试通过其他方式创建Vue项目，例如使用Vue官方提供的脚手架工具或者手动创建项目。