Vue cli4构建的Vue项目结构

在windows系统搭建VUE环境(安装vue-cli4)中我们使用默认配置创建一个项目hello-world，这次我们首先用图形化界面来创建一个项目。

vue ui

来创建一个项目hello-word2,在预设中选择手动配置项目，在功能中做如下选择

在配置中我选择了less做css预编译器，点击创建项目并保存为预设方案方便下次使用，然后等待即可。

Vue cli4构建的Vue项目结构

自动生成的Vue项目结构见下图（我的vue/cli版本是4.1.2）

结构解析

Vue实例与组件入门
1、public/index.html
我们注意到整个项目中只有一个html文件，这个文件就是讲Vue基础时提到了单页 Web 应用（SPA）中的唯一的Web页面，在页面中包括一个挂载点，如id=“app”,在页面中的视图无论怎么变化，都是在其中切换组件，只有刷新页面时才会从新加载。
2、src/App.vue
用vue-cli 脚手架搭建的项目中，一个vue文件是一个vue组件，其中App.vue就是根组件
3、src/main.js
是vue项目的入口文件，加载了各种公共组件，并在其中实现vue的实例化。
下面的代码将router、store、render作为参数（选项）新建了一个vue实例,没有设置挂载点el选项，而是手动挂载$mount("#app")

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