Vue2创建项目、认识项目结构

前置步骤

需阅读 Vue2脚手架安装
并已经安装好上述脚手架

创建项目

来到脚手架vue-cli的官网: Vue CLI

1. 点击“起步”，查看左侧菜单栏
2. 找到“基础”并点击“创建一个项目”，按照文档操作完成即可
3. 可以知道cli安装命令是： vue create hello-world 安装了一个vue2项目，并给这个项目起名为hello-word
4. 这个名字可以更改为自己项目的名字，并不是固定的
5. 需要注意的是，得切换到想要的盘符路径才开始安装，不然会找不到安装后位置在哪...
6. 也可以往下查看找到 vue ui 使用图形化界面来安装Vue2
7. 由于此时2023年11月29日，vue3已经发布，所以执行上述安装命令后，会出现这样的界面

Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)

解释一下babel和eslint

• babel：把es6的新特性语法转成浏览器能正确识别并编译的语法，例如将vue代码中我们写的箭头函数自动转为普通函数（es6是js的一种语法规范
• eslint：一个js的代码检查工具，用来检查你的代码是否符合指定的规范，一定程度上避免开发者写出不符合规范的代码

8. 这是让我们选择安装vue3项目还是vue2项目，通过键盘的↑键和↓键进行选择即可
9. 这里使用↓键选择vue2项目，并敲回车键enter确认

10. 安装完成后cli会有如下提示

🎉 Successfully created project hello-world.
👉 Get started with the following commands:
cd hello-world
npm run serve

11. 这是告知已成功创建 hello-world 项目，需要我们使用cd 切进hello-word所处项目路径，并使用 npm run serve 运行该项目
12. 完成上述两部后，将出现

App running at:
Local: http://localhost:8080/
Network: http://192.168.112.216:8080/

13. 选择 Local 的 http://localhost:8080/ 地址，进行复制，然后在浏览器打开该地址即可正常查看Vue2的hello-world项目跑起来了

认识项目结构

使用VSCode将vue_pro项目打开：

package.json：包的说明书（包的名字，包的版本，依赖哪些库）。
该文件里有webpack的短命令：

点击查看代码

"scripts": {
    "serve": "vue-cli-service serve",  //启动内置服务器
    "build": "vue-cli-service build",  //最后一次的编译，生成html css js，给后端人员
    "lint": "vue-cli-service lint"     //做语法检查的
}

组件加载顺序：

1. index.html (public下
   2. main.js (src下
2. App.vue (src下