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 元素上。
el:'#app'与$mount('#app')作用完全相同，二选一。