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）启动项目

• 方式一：命令行

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

• 方式二：webstorm

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

【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项目运行机制

1. 入口文件
   • Vue 项目的入口文件通常是 main.js（或 ts）。
   • 在这个文件中，你通常会引入 Vue 库、Vue Router（如果你使用了路由）、Vuex（如果你使用了状态管理）以及其他必要的库或插件。
   • 你还会创建一个 Vue 实例，并挂载它到 HTML 页面中的某个元素上。
2. HTML 模板 (index.html)：
   • 这是 Vue 项目中唯一的 HTML 文件（通常），它作为应用的模板。
   • 你会在 HTML 文件中定义一个容器元素（通常是一个 div），用于挂载 Vue 实例。这个元素的 id 通常与你在 main.js 中指定的元素 id 相匹配。
3. Vue 实例挂载 ：
   • 在 main.js 文件中，你会使用 new Vue({...}) 来创建一个 Vue 实例。
   • 这个实例的配置对象中包含了很多选项，如 el（指定要挂载的元素）、data（定义响应式数据）、components（注册组件）、router（如果你使用了 Vue Router）等。
   • 你通常会将 el 设置为 '#app'（或其他与 HTML 文件中定义的容器元素 id 相匹配的字符串），这样 Vue 实例就会被挂载到这个元素上。
4. 根组件 (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 中使用其他子组件来构建更复杂的应用界面。