Vue | 项目结构项目结构node_modules存放安装的依赖，从github上下载的Vue项目里面没有node_m

项目结构

> node_modules
> public
> src
    > assets
    > components
    > router
    > store
    App.vue
    main.js
.browserslistrc
.gitgnore
babel.config.js
pacjage-lock.json
package.json
README.md

node_modules存放安装的依赖，从github上下载的Vue项目里面没有node_modules，需要执行npm install命令安装需要的依赖（依据package.json的配置）才能正常运行

public存放静态文件（资源），项目任何地方都可以访问该文件夹

src存放源码。其中的assets也用来存放资源；components存放组件；router路由；store数据状态管理；views存放视图组件（能在浏览器中看到的组件）；App.vue入口组件；main.js决定了程序从哪里开始执行

package.json包管理，指定了本项目的名称、运行命令、需要的依赖。"scripts"第一项是"serve"，因此开发环境下运行命令是npm run serve

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

运行流程

public/index.html是我们的入口，将来项目的所有内容都要渲染到<div id="app"></div>这个DOM元素上

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js里#app是一个id选择器，render: h =>h(App)指定App组件，也就是App.vue。这样，App.vue将会挂载到id为app的DOM元素上，然后对其进行完全控制。public/index.html是我们的入口，但其余都会发生在Vue实例内部。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Vue文件组成

Vue文件由template模板、script脚本、style样式三部分组成，脚本和样式可以省略

template中有许多标签，其中<router-link to="/">Home</router-link>标签是路由标签，在src/router/index.js中可以找到/路径对应的组件