Vue脚手架结构解析

---

1. 创建项目时（vue create 项目名）

–弹出选择vue版本配置,vue2,3和自定义配置

babel：用来将ES6语法转换为ES5

eslint：对代码语法检查，属于webpack内容。{

​ let a

​ a = ??

} js中不允许创建let字符修饰的没有被使用的变量

启动项目：npm run serve （如果是cnpm可以替换，注意是serve不是server）

---

2. vue脚手架基本结构（图片为默认的vue2）

3. gitignore

==> git - ignore === git忽略

这里存放着git的忽略文件，哪些文件和文件夹不接受git管理，在这配置

4. babel.config.js

这里有babel将我们写入的ES6语法转换为ES5语法，这里不需要改动，可参考babel官网

5. package.json && package-lock.json

只要是由npm构建的项目，都有这两个文件。这里存放着项目所使用的包的名字，版本，依赖，库和常用的命令等等。。。

5.1 scripts一些常用的命令

serve 运行服务

build 构建项目（打包）

lint 运行语法检查，囊括（.html .css .js .vue）

​ 告诉你哪里写的不对哪里写的不太好，一般打包项目前检查

5.2 package-lock.json 包版本控制软件

涉及node.js知识，为包版本管理，方便下载版本的时候，下载的版本与实际开发版本不一致，🔒死

6. README.md

这里写vue相关的笔记

接下来从npm run serve之后，按流程开始分析

---

1. main.js

项目执行的入口文件

2. App.vue

由template，script，style三部分组成

构建所有组件的父组件

3. assets文件夹

存放所有的静态资源，包括logo，图片，音频等，方便公共的调用

4. componens文件夹

放所有的子组件

5. public > index.html

构建html基本的信息

6.vue.config.js

配置参考 | Vue CLI (vuejs.org)

（只要是修改了该文件，都需要停止程序，重新运行才会执行npm run…）

可选配置文件，用于自定义个性化定制

初始时：

---

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

---

关于不同版本的Vue

1. vue.js与vue.runtime.xxx.js的区别：
   1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
   2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

---

一些途中遇到的报错

1.Component name “School“ should always be multi-word vue/multi-word-component

vue不建议你直接使用School作为组件名，想让你换一个词。

解决办法，在vue.config.js文件中添加 关闭语法检查： lintOnSave: false

***本教程参考了尚硅谷vue2+vue3课程讲解***

以下内容来源于科大讯飞，星火认知模型对vue脚手架结构的讲解

Vue的脚手架是一个基于Vue.js的快速搭建项目的开发工具，它可以帮助开发者快速创建一个符合规范的项目结构。下面是对Vue脚手架的结构进行解析：

  1. 配置文件(`vue.config.js`):用于自定义项目的配置选项，如代理服务器、输出目录等。
  2. 入口文件(`src/main.js`):Vue实例的入口文件，用于引入其他模块和组件。
  3. 组件库(`src/components`):存放项目中使用的第三方组件库。
  4. 视图层(`src/views`):存放项目中的页面文件，每个页面对应一个`.vue`文件。页面之间可以通过路由进行切换。
  5. API层(`src/api`):存放项目中的API接口文件，如请求数据等。可以使用axios等库来发送HTTP请求。
  6. 样式文件(`src/assets/styles`):存放项目的CSS样式文件。
  7. 静态资源(`public`):存放项目的静态资源，如图片、字体等。可以将这些资源放在该文件夹下，以便在开发过程中直接引用。

接下来，我们详细解析一下这些部分的具体内容：

  * `vue.config.js`:用于配置项目的输出目录、代理服务器等信息。例如，可以通过设置`outputDir`属性来指定输出目录，通过设置`devServer`属性来配置开发服务器。
  * `src/main.js`:Vue实例的入口文件，通常包含以下内容：
    1. 引入Vue构造函数和其他依赖模块；
    2. 创建Vue实例；
    3. 将Vue实例挂载到DOM上；
    4. 在根元素上添加事件监听器；
    5. 在开发环境下，使用`webpack-dev-server`启动开发服务器。
  * `src/components`:存放项目中使用的第三方组件库，可以按需引入所需的组件。
  * `src/views`:存放项目中的页面文件，每个页面对应一个`.vue`文件。页面之间可以通过路由进行切换。
  * `src/api`:存放项目中的API接口文件，如请求数据等。可以使用axios等库来发送HTTP请求。
  * `src/assets/styles`:存放项目的CSS样式文件，可以按需引入所需的样式。
  * `public`:存放项目的静态资源，如图片、字体等。可以将这些资源放在该文件夹下，以便在开发过程中直接引用。