使用HBuilderX-普通项目之vue-cli默认项目开发前端（一）

第一步：新建一个vue-cli-demo项目

一、vue-cli-demo项目目录简介

1、node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件。

2、public这个目录也许可以顾名思义？

3、src 这个目录下存放项目的源码，即开发者写的代码放在这里。

4、assets 目录用来存放属于该项目的资源文件，里面的文件会被webpack打包。推荐阅读《vue assets和static文件夹的作用》

5、components 目录用来存放组件（一些可复用，非独立的页面）。

6、index.html是主页，项目的入口文件，即浏览器访问项目，最先访问的是index.html文件。

7、App.vue 是根组件，项目的第一个Vue组件，会通过main.js中的实例挂载到index.html文件中，在项目运行时显示出来。

8、main.js相当于Java中的main方法，是整个项目的入口js，会创建一个Vue实例，将App.vue组件挂载到index.html文件中。可以阅读《关于Vue中main.js，App.vue，index.html之间关系进行总结》来了解三者关系。

9、babel.config.js中配置了babel，babel是一个编译器，用来将javascript语法（主要是ES6）编译并生成浏览器兼容的语法（默认是ES5）。简单了解可以阅读《什么是babel，以及各个插件的区别》。

10、package.json 描述模块信息包括对项目的描述，并定义了项目的所有依赖。

11、package-lock.json描述 node_modules 文件中所有模块的版本信息，模块来源及依赖的小版本信息等。简单了解可以阅读《package.json 与 package-lock.json 的区别》

12、postcss.config.js中配置了PostCSS的autoprefixer插件，用来解析CSS文件并且添加浏览器前缀到CSS规则里，使之兼容所有浏览器。

二、运行vue-cli-demo项目

选中vue-cli-demo项目，点击菜单运行->运行到终端->，可以builde项目和serve项目。

1、点击npm run build，会打开终端运行该命令，运行结束后，会生成dist文件夹。

dist文件夹是经过压缩优化后的vue-cli-demo项目，最终放到服务器上的发布版本。

vue-cli本身封装了webpack，所以我们可以使用build命令来压缩vue-cli-demo项目。

2、点击npm run serve,运行命令，运行成功后，我们会获取到项目运行的网址。

3、复制网址到浏览器打开，就能看到vue-cli-demo项目了。

PS:vue-cli官网提供了创建一个默认的hello-word项目的方法，项目目录如下：看起来和HbuilderX的默认项目没多大差别