vue 项目文件结构

 用 webpack npm 的方式安装vue项目后，初始文件夹如下

目录/文件	说明
build	这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。
config	配置目录，默认配置没有问题，所以我们也不用管
node_modules	这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，不过高兴的是，我们也不用管
src	我们的开发目录，基本上绝大多数工作都是在这里开展的
static	资源目录，我们可以把一些图片啊，字体啊，放在这里。
test	初始测试目录，没用，删除即可
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了
index.html	首页入口文件，基本不用管，如果是开发移动端项目，可以在head区域加上你合适的meta头
package.json	项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。
README.md	不用管

 重要的，还是src文件夹。

commponents：放置公共组件

App.vue：项目入口文件，设置根实例 app 的模板内容

main.js: 这是项目的核心文件。各种需要使用的文件都需要在 main.js 导入 （比如：Vue，根实例App.vue 文件，路由文件router，状态管理文件store）

rounter: 放置路由文件

store (文件夹名称自定义，另外创建): vuex 状态管理文件 

 项目主要以下几个文件：

index.html ：网页文件 --引入 vue.js、

main.js：项目入口文件。最主要的文件。引入各种文件；创建根实例、设置根实例的模板内容（根实例的模板内容）

App.vue：（组件也是实例）vue文件，1. 设置根实例内容，然后可以像组件一样在main.js 中引入；2. 也可以直接在main.js 创建根实例后设置。

总结：

在 npm 安装 vue 初始项目里，App.vue 文件本来放置在根目录。为了试验 App.vue 这个文件是否和其他组件一样的使用功能，我把App.vue 从根目录移入到 components 文件件中了。事实证明，App.vue 和其他组件文件功能一样。

最主要是 main.js 文件：

1、引入各类文件：组件、路由、状态管理文件都需要在 main.js 中（头部）

2、main.js 中创建根实例（new Vue）  

     ** 可设置根实例的模板 template。也可以不设置模板。如果在实例设置了模板，模板内容优先级>html 文件根元素中内容，模板内容会覆盖 html 文件根元素中内容

3、在根实例中注册要用的文件：路由、状态管理文件；组件，要在根实例中的 components 属性注册

//引入vue文件
import Vue from 'vue'

//引入组件
import App from './components/App' //从当前目录下，引入组件 App
import Hello from './components/Hello'
import Todolist from './components/Todolist'

//引入路由
//引入vuex 状态管理文件
import router from "./router/router.js"
import store from "./store/store.js"

//关闭vue 的生产提示
Vue.config.productionTip = false 

//创建根实例
//设置根实例template模板内容（优先级最高，会覆盖在html文件内根元素写好的内容）
  //实例中注册路由、状态管理 vuex
  //实例中注册组件
new Vue({
  el: '#app',
  router,
  store,
  template:
    '<div style="border: solid 1px black;padding: 5px 20px 5px"><h1>这里设置根实例的模板内容</h1>' +
    '<Todolist></Todolist>' +
    '</br>'+
    '<h2 style="color: red;border: solid 1px red;padding: 20px">状态管理数据，返回{{message}}</h2>'+
    '</div>',
  components: { App:App,hello:Hello,Todolist:Todolist } ,
  data () {
      return {
        message: this.$store.state.showFooter   //使用状态管理储存数据
    }
  }
})

 

 编辑器截图 main.js

 

index.html 文件

渲染效果：（因为main.js 里面的根实例设置了模板，所以 index.html 文件里面的内容被覆盖 了）