Vue 框架 学习--2、vue cli脚手架各个文件的逻辑详解

前言:此文已经默认配置了node.js开发环境等必要条件,关于vue cli的安装教程这里不多赘述,但是其他博客都没有为vue cli安装之后项目开发后的关键文件,app.vue、main.js、router文件夹做详细的解答,导致部分初学者在安装之后无法熟练的使用,本文就是为了帮助初学者,快速、熟练并且理解的使用vue cli。

vue cli是项目开发的几乎必要的开发工具

1、安装完之后都会有src这个文件夹,文件夹中有以下文件

Vue 框架 学习--2、vue cli脚手架各个文件的逻辑详解_第1张图片

这里主要介绍components文件夹、router文件夹和app.vue以及main.js。

这两个文件夹分别是用来存放组件以及路由文件,以为规范的项目开发一般是通main.js引入router文件中的路由文件,再由路由文件中的路径引导组件。

我们直接看经过我修改之后的代码,更加直观的看到这个项目是如何运作的

main.js

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

main.js的作用大致为整合路径创建实例,因为单个组件只是注册了并没有实例化,就像java中创建了类却没有声明对象。

该文件将app.vue引入了进来通过new Vue实例化。可能是因为版本的问题,本人的index.html在src包外,内容如下:



  
    
    
    vueex
  
  
    

这下一目了然了,但是他的main.js的写法比较奇怪:

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

他在实例化对象时却用了template标签,如果将这一行注释掉,页面上什么都没有了~,

我们对他进行一些改动main.js改动如下(将template注释):

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App:App},
/*  template: ''*/
})

在index.html中改动如下:



  
    
    
    vueex
  
  
    
/*改动的地方*/

达到的效果是一样的。

总结一下:大致的逻辑是这样的。index.html是我们这个项目开发的主页面,我们localhost:8080端口展示的就是这个文件,main.js绑定到了index.html,就相当于index.html的

我么通过标签为App.vue组件创造了路由,在通过router文件夹下的index.js去配置路由。最后页面通过8080端口展示的时候,main.js实例化了对象,同时路由也被实例化了。当然你也可以使用一下方式去替换main.js实例化router的方法

import router from '/router/index.js'   /*注意这里的router只是一个形参用来接收index.js中的参数*/
var router = new VueRouter()

最后我们对本文进行最后的总结:

        本文理清了整个项目开发的思路,localhost:8080端口展示的是src文件夹 外 的index.html,main.js相当于index.html的

你可能感兴趣的:(Vue 框架 学习--2、vue cli脚手架各个文件的逻辑详解)