Vue 工程化项目

【21】Vue工程化

（1）创建vue项目

vue create 项目名

选择最后一个选项Manually select features(手动选择功能)

选择我们需要的功能
- Babel：是JavaScript编译器，可以将ES6+的JavaScript代码转换为向后兼容的JavaScript版本（如ES5），以便在旧版浏览器或环境中运行。
- Router：是Vue官方的路由管理器。
- Vuex：是一个专为Vue应用程序开发的状态管理模式和库。

选择vue版本和路由历史记录模式
- history 模式利用了 HTML5 History API 来实现 URL 的变化，而不需要重新加载页面。
- 这与 Vue Router 的默认 hash 模式不同，hash 模式会利用 URL 的 hash来模拟一个完整的 URL，而不需要服务器的任何特殊配置。
选择将配置文件放在packagez.json中
可以为保存刚才的所有操作，起个名字就可以，也可以不保存，下次仍是自定义

创建成功

（2）启动项目

方式一：命令行

首先切换到项目中cd 项目名
然后执行npm run serve

方式二：webstorm

首先使用webstorm打开项目根目录
编辑配置
选择npm配置
在script中添加serve
点击apply应用后点ok
点击运行就可以了

【22】Vue项目介绍

（1）项目目录结构

vue_test # 项目名

-node_modules # 等同于python的venv虚拟环境

-public # 不会被webpack处理的文件夹

-favicon.ico # 小图标

-index.html # 单页面应用，整个vue项目，就只有这一个html

-src # 核心代码文件夹

-assets # 静态资源文件夹

-components # 可以重用的Vue组件

-views # 页面组件，模仿页面跳转

-store # 存放Vuex store的目录，状态管理库

-router # vue-router路由配置文件，包含Vue Router的路由定义

-App.vue # 根组件，大多数Vue应用都会从这里开始渲染。

-main.js # Vue应用的入口文件

-.gitignore # 这是一个Git配置文件，用于指定哪些文件或文件夹不应被Git跟踪。

-babel.config.js # Babel的配置文件，把高版本es语法转成es5

-jsconfig.json # 用于配置JavaScript项目的各种设置，如编译器选项、文件包含/排除等。

-package.json # 项目的元数据文件，包含项目的名称、版本、描述、依赖、脚本等信息。install--》根据他装

-package-lock.json # 所有依赖的精确版本信息

-README.md # 项目的说明文件

-vue.config.js # Vue CLI项目的配置文件，用于修改webpack的默认配置。

（2）vue项目运行机制

入口文件
- Vue 项目的入口文件通常是 main.js（或 ts）。
- 在这个文件中，你通常会引入 Vue 库、Vue Router（如果你使用了路由）、Vuex（如果你使用了状态管理）以及其他必要的库或插件。
- 你还会创建一个 Vue 实例，并挂载它到 HTML 页面中的某个元素上。
HTML 模板 (index.html)：
- 这是 Vue 项目中唯一的 HTML 文件（通常），它作为应用的模板。
- 你会在 HTML 文件中定义一个容器元素（通常是一个 div），用于挂载 Vue 实例。这个元素的 id 通常与你在 main.js 中指定的元素 id 相匹配。
Vue 实例挂载 ：
- 在 main.js 文件中，你会使用 new Vue({...}) 来创建一个 Vue 实例。
- 这个实例的配置对象中包含了很多选项，如 el（指定要挂载的元素）、data（定义响应式数据）、components（注册组件）、router（如果你使用了 Vue Router）等。
- 你通常会将 el 设置为 '#app'（或其他与 HTML 文件中定义的容器元素 id 相匹配的字符串），这样 Vue 实例就会被挂载到这个元素上。
根组件 (App.vue)：
- App.vue 是 Vue 项目的根组件。
- 在 main.js 中，你可以通过 import App from './App.vue' 来引入这个组件，并在 Vue 实例的配置对象中使用 render: h => h(App) 或 components: { App }, template: '<App/>' 来注册和渲染这个组件。
- App.vue 组件本身可以包含模板、脚本和样式，用于定义应用的布局、行为和外观。
- 你可以在 App.vue 中使用其他子组件来构建更复杂的应用界面。