我们先要有node.js,npm,vue这些环境。

之后我们就可以去操作了：

我们先要去下载这个vue-cli的全局依赖。

 

我们在我们创建的一个文件夹的位置去打开cmd，这个文件夹就是用来存放我们以后创建的vue项目的。

 

我们先这样去创建一个内置的利用webpack生成的Vue项目，webpack后面的是我们给项目起的名称。这个命令我们要记下来。

我们加载完之后，会让我们填写一系列的信息，首先是让我们去填写项目的名称。

 

接下来是要我们去写一个项目描述。

 

接下来要我们去写作者。

 

接下来会给我们两个选项：

第二个是只有开发和运行时起作用，所以我们还是一般会去选择第一个。

 

接下来它会问你要不要使用路由，这个毫无疑问我们是必须要使用的。

 

除了路由其它的一些测试的配置啊之类的，我们都可以暂时先不去选择。

 

接下来它会问我们要以什么样的方式去安装。

我们选第一个npm的方式就可以了。

这一步，我们会经历一个漫长的过程。

 

 出现了这个页面。它告诉我们，如果我们进入这个文件位置，去执行下面的npm的run命令，就可以去执行了，那我们就没法去拓展了。所以我们就不去执行这两个命令，到这步，我们就直接把这个cmd窗口关闭就可以了。我们的项目已经建好存在了。

我们现在看到，我们的这个项目已经在目录中可以找到了。

 

我们直接把它拽进我们的Hbuilderx中就可以了，我们可以看到很多代码包括路由都是被写好的了。

 

我们去点击预览的时候它是用run dev的方式和我们普通的在hbuilder中创建出来的run server是不一样的。

 

我们可以点击链接在外部浏览器中去打开。

 

这样我们这种方式去创建vue项目就结束了。

这种方式相比于直接在hbuilderx中创建vue项目，它给我们的东西更多了：

 

比如我们可以直接去改我们的端口号。

这种结构是更加常见的。这种项目最好不要用hbuilder去打开，推荐使用的是vscode虽然我还没有用过。但是在hbuilder中改代码还是不是特别方便的。