vue起步

最近有点空闲，听说vue火的一塌糊涂，本着技多不压身的想法，就开始了以下的学习之旅。

自学，有兴趣的同学可以一起学习,群号：1083724915，暂时没啥人哦

1.使用HbuilderX创建一个vue项目，点击创建，等待创建完成即可（大概1分钟）。

2.创建完成后的项目目录

大概解释一下项目的原始目录，由于我也是初次接触，只想通过这种方式记录一下学习历程，勿喷。

node_modules目录：依赖包目录，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。

在两种情况下我们会自己去安装依赖：

（1）项目运行缺少某个依赖包：（安装方法示例：npm install 名称）

（2）安装插件需要的插件

注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4

public目录：这是官方的解释，https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9

何时使用 public 文件夹

• 你需要在构建输出中指定一个文件的名字。
• 你有上千个图片，需要动态引用它们的路径。
• 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的 <script> 标签引入没有别的选择。

根据官方的说法，貌似目前我们还用不到。

src目录：使我们编辑最多的目录，也是我们将来要掌握的目录

babel.config.js 查了一顿也不了解是做什么用的，先跳过了

package.json 里面主要存放第三方插件依赖配置

package-lock.json 从字面意思看起锁定作用，就是锁定依赖模块和子模块的版本号。
ta是新版本node支持的文件，在执行npm install时，先读取package.json中的依赖，再读取package-lock.json中的版本号，从而来决定安装和更新

postcss.config.js 一个利用JS插件来对CSS进行转换的工具

这就是新项目目录的一些基本知识了，我们先来把项目启动起来吧

cmd进入项目的根目录，运行 npm run serve命令即可

出现下面的消息就代表启动起来了

在浏览器打开上面两个地址的任意一个都行。