vue-cli

单页面应用程序

单页面应用程序（Single Page Application）一个web网站只有唯一一个HTMl页面，所有功能&交互都在唯一一个页面完成

vue-cli

vue-cli是vue.js开发的标准工具，简化了基于webpack创建工程化的Vue项目的过程。

创建项目

基于vue-cli快速生成工程化的Vue项目：

vue create 名称

Manually select fewtures/选择手动配置

Babel（默认）：使用 Babel 可以将最新的 JavaScript 语法转换为浏览器兼容的旧版本语法，以确保在各种浏览器上的兼容性。
TypeScript：TypeScript 是一种类型检查的 JavaScript 超集，它可以帮助你在开发过程中捕获潜在的错误，并提供更好的代码智能感知和文档化。
Progressive Web App (PWA) Support选择此选项可以启用 Progressive Web App（渐进式 Web 应用）支持，这使你的应用可以像原生应用一样具有离线访问、推送通知等功能。
Router：Vue Router 是 Vue.js 的官方路由管理器，它允许你在应用中实现页面之间的导航和路由。
Vuex：Vuex 是 Vue.js 的官方状态管理库，用于在大型应用程序中管理应用的状态和数据。
CSS Pre-processors：选择此选项可以启用使用 CSS 预处理器，如 Sass、Less 或 Stylus，来扩展和改进 CSS 的编写体验。
Linter / Formatter：选择此选项可以启用代码风格检查和格式化工具，如 ESLint 和 Prettier，以帮助你在开发过程中保持一致的代码风格和更好的代码质量。
Unit Testing：选择此选项可以启用单元测试框架，如 Jest 或 Mocha，用于编写和运行针对代码单元的测试。
E2E Testing：选择此选项可以启用端到端（End-to-End）测试框架，如 Cypress 或 Nightwatch，用于模拟和测试应用的完整流程和用户交互。

npm run serve尝试运行

作用

启动开发服务器：它会创建一个本地开发服务器，监听指定的端口（默认为 8080），并提供了一个 Web 界面用于实时预览你的应用程序。
实时构建和热重载：在开发模式下，当你进行代码修改时，Vue CLI 会实时重新构建你的应用程序，并通过热重载将更新后的内容实时显示在浏览器中，无需手动刷新页面。
错误检测和警告提示：开发服务器会监听你的代码变动并进行实时检测，如果存在错误或潜在问题，它会在控制台中给出相应的错误消息或警告提示，帮助你及时发现和修复问题。

通过使用 npm run serve，你可以在开发过程中更加高效地进行代码调试、样式修改和功能开发，同时获得实时的反馈和预览效果。

值得注意的是，npm run serve 只用于开发环境，并不适用于生产环境。在部署应用程序时，你需要使用其他命令（如 npm run build）来构建生产版本的应用程序。

通常运行在http://localhost:8080上。当你在浏览器中访问http://localhost:8080时，实际上是通过服务器加载和呈现你的Vue应用程序。

运行

terminal：npm run serve

> vue-cli-service serve

INFO  Starting development server...


DONE  Compiled successfully in 3552ms                                                                                      15:34:13


App running at:
- Local:   http://localhost:8080/ 
- Network: http://192.168.100.168:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

Local&Network分别是本机和局域网的访问地址。可以尝试在浏览器中打开。

npm run build

{
  "name": "a",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

打开 package.json, scripts里有serve&build

项目开发完了需要上线可以：npm run build

项目的目录结构

node_modules | 所有的第三方包存储在这里
public目录 | 包含项目图标和单页面应用程序的首页
src目录 | 项目的源代码

index.html 中 built files will be auto injected

当你构建生成的文件（例如打包后的 JavaScript 和 CSS 文件）时，这些文件会自动被注入到 HTML 文件中。

这意味着在构建过程中，Vue CLI 会自动将生成的文件链接添加到 HTML 文件的适当位置，以便在浏览器中正确加载所需的资源。
.broswerslistrc | 用于配置项目所需的目标浏览器的文件。
.gitignore | git的忽略文件
babel.config.js | babel的配置文件，

在创造项目配置文件时选择In dedicated config files（把Babel，Eslint等插件的配置项，放到自己独立的配置文件中。）
Jsconfig.json | 是一个用于配置 JavaScript 项目的文件，在 Vue 2 项目中通常不会使用到它。不过，如果你在 Vue 2 项目中使用了 TypeScript，那么它可能会起到一些作用。
package-lock.json |
package.json | 包管理配置文件
vue.config.js | 是一个用于配置 Vue 项目的文件，它允许你对构建过程进行自定义配置和扩展。该文件需要位于 Vue 项目的根目录下。

src目录

assets目录：存放第三方静态资源：图片资源，css样式表。。。
components：存放封装好的，可复用的组件
App.vue：项目的根组件，定义整个应用程序的结构和布局（UI结构）。
main.js：项目的入口文件，整个项目的运行，要先执行main.js

在一个 Vue 项目中，App.vue 通常位于 src 目录下，作为项目的入口组件。它由三个部分组成：<template>、<script> 和 <style>。

<template> 部分定义了应用程序的布局和内容。你可以在这里使用 Vue 的模板语法来构建页面结构，并绑定数据和事件。

<script>部分是组件的 JavaScript 部分。你可以在这里定义组件的逻辑、数据和方法等。name 属性用于指定组件的名称，这个名称将在组件之间的通信和引用中使用。

<style>部分用于定义组件的样式。你可以在这里编写 CSS 规则，对组件进行样式设置

App.vue 作为根组件，通常会包含其他子组件，并通过组件之间的嵌套和通信来构建整个应用程序的界面和功能。

在 Vue CLI 创建的项目中，App.vue 是默认的根组件，并在 main.js 中引入和渲染

项目的运行过程

在工程化的项目中，vue做的事很单纯：通过main.js把App.vue渲染到Index.html的指定区域中。

将App.vue里的UI结构替换掉index.html的#App-div盒子。

render函数指定的结构替换掉el所在的结构。

App.vue用来编写待渲染的模版结构。
index.html中需要预留一个el区域。
main.js把App.vue渲染到了index.html所预留的区域中。

main.js

//导入vue这个包，得到Vue构造函数。 
//导入了 Vue.js 库，并将其赋值给变量 Vue。这样可以在代码中使用 Vue.js 的功能和特性。
import Vue from 'vue'
//导入App.vue这个根组件，将来要把App.vue的模版结构渲染到HTML结构中。
//这行代码导入了一个名为 App 的 Vue 组件。
import App from './App.vue'//此行与App.vue相关

//这行代码设置 Vue.js 的生产提示为 false，表示在生产环境中禁用一些开发模式下的提示信息。
Vue.config.productionTip = false

//创建Vue的实例对象
new Vue({
  //el:'#app',
  //把render函数指定的组件渲染到HTML页面中
  render: h => h(App), //这里指定了要渲染App，将App.vue里的UI结构替换掉index.html的#App-div盒子。
}).$mount('#app')//将实例挂载到具有 id 属性为 app 的 DOM 元素上。