Vue 介绍目录

关闭服务，ctrl +c

使用vscode打开cli创建的项目，使用ctrl+c 快捷键，打开控制台，或者点击底部的x

在控制台处，输入命令启动项目 npm run serve 

一、README.md，里面有给我们项目启动的一些提示，

例如

npm install  就是安装我们项目的依赖包，

npm run serve 启动项目， 
npm run build 对我们项目的一个打包，打包成一个静态文件例如 html，css ，js，、

二、package.json 重要文件，在脚手架用到的，

“scripts”:{
    "serve":"vue-cli-service serve",
    "build":"vue-cli-service build"
    }

 启动方式 这个是以什么方式启动的，

“scripts”:{
    "start":"vue-cli-service  serve",
    "build":"vue-cli-service build"
    }

如果serve修改成start，可以直接 npm  start 直接启动， 只有start这个可以直接 用npm start启动
如果改成 dev，

“scripts”:{
    "dev":"vue-cli-service  serve",
    "build":"vue-cli-service build"
    }

就需要使用 npm run dev
修改package.json里的东西都要关掉后再重启，

项目用到的东西， 然后使用到的插件

三、public 文件 有两个文件

一个是favicon.ico，是浏览器顶部的那个图标
一个是html这个是主入口文件， 

  <div id="app"></div>

这个就是最外层的容器，跟cdn里面的唯一的那个容器一个道理<div></div>，后面所写的代码都会动态的插入这里面来。

四、node_modules如果把项目上传的git上的时候，不会传它，但是如果没有这个是启动不起来的，当项目运行的时候首先找到是package.json里 "vue-cli-service serve",这个命令，找到这个后，找node-modules，当我们把node-modules文件删除掉，启动项目就会找不到，报错。

使用命令cnpm install 就会自动把

 "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  },

里面的依赖包进行下载，类似java里的mvn clean package

五、src 重要，

1、assets主要放的是静态文件、css、js
2、components 组件里面有一个HelloWorld.vue

<template>
  <!-- html接口，只能有一个根标签 -->
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
//js 部分 逻辑部分
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* css样式部分 */
</style>

下面还有一个App.vue 这个是父组件，是最顶级的组件，同样包括html  、js、css

<template>
  <!-- 包括html -->
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>

<script>
// js部分，逻辑部分
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
/* css部分 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

再往下是main.js是逻辑入口文件，运行项目的时候，首先执行index.html 文件，然后再自动执行main.js文件

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

放到 createApp(App).mount('#app') 这个#app就是index.html里的id=app

index.html -> main.js-> App.vue->router下面的路由index.js->找到各个单文件组件，

npm run build 打包后生成dist 文件，这个文件上传的nginx中，进行部署

dist文件中包括，index.html 和static文件。上传到nginx中使用location，指定根路径，访问首页文件index.html。