软件开发架构师

三 vue学习三 从读懂一个Vue项目开始

前端 110 2019-03-22 23:10

源码地址:     https://github.com/liufeiSAP/vue2-manage

我们的目录结构:

目录/文件 说明
build 项目构建(webpack)相关代码.
config 配置目录,包括端口号默认配置.
node_modules npm 加载的项目依赖模块
  src

我们的开发目录,基本上绝大多数工作都是在这里开展的

  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
  • main.js: 项目的核心文件。
  static 资源目录,我们可以把一些图片啊,字体啊,放在这里。
  test 初始测试目录,没用,删除即可
  .xxxx文件 这些是一些配置文件,包括语法配置,git配置等。基本不用管,放着就是了
  index.html 首页入口文件,如果是开发移动端项目,可以在head区域加上你合适的meta
  package.json 项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。
  README.md 不用管

如上,基本上就是这么个情况。重要的,还是src文件夹。

Index.html

项目的首页入口文件,如下:body的app关联SRC/App.vue.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>back-manage</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

SRC:

     Aapp.vue

      App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。

.  将html、js、css写到一个后缀名.vue的文件中,区分这三种类型用<template>、<script>、<style>这个.vue文件在打包的过程中会被转换成浏览器能识别的传统html、js、css

<template>
    <div id="app" class="fillcontain">
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
    }
</script>

<style lang="less">
    @import './style/common';
</style>
fillcontain是在 ./style/common 中定义的样式。

export default {}: 导出模块,提供给其他模块使用。 其他模块import的东西一定是要export的才能用
<router-view></router-view>: 这块是渲染路由组件,看下面的解释。

   关于router : 

    (1) 定义route,  两个部分组成: path和component。  path 指路径,component 指的是组件

      const routes = [
        { path: '/home', component: Home },
        { path: '/about', component: About }
      ]
   (2) 创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。
        const router = new VueRouter({
           routes // routes: routes 的简写
      })
(3) 把router 实例注入到 vue 根实例中,就可以使用路由了
        const app = new Vue({
            router
        }).$mount('#app')
(4) 当用户点击 router-link 标签或超链接时,会去寻找它的 to 属性, 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} 
       path 一一对应,从而找到了匹配的组件, 最后把组件渲染到 <router-view> 标签所在的地方;
            <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>

       main.js:    主要作用是初始化vue实例(new VUE)并使用需要的插件

      vue 构造传入的参数有: 数据(data),模板(tamplate),挂载元素(el),方法(methods), 路由, store等

/*引入Vue框架*/
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.config.productionTip = false;

/*使用ElementUI(一个桌面端组件库)*/
Vue.use(ElementUI);

new Vue({
    el: '#app',             // 表示这个vue实例和DOM中ID是app的关联el是vue实例化的选项(index.xml),提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
                       可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
    router,                 //   路由信息
    store,                  //   存储相关
    template: '<App/>',    //   <App />他就是App.vue,template就是选择vue实例要加载哪个模板。最新的vue-cli脚手架模板现在是这个形式。 // App.vue是主程序,其他所有的.vue都是放在App.vue中,所以只需要加载App.vue就完全可以把其他的东西加载出来。
    components: { App } })  //   这个App表示的就是App.vue, 表示使用App.vue作为组件

 

总结: App.vue就是一个组件,里面有template的定义(其实就是HTML),script脚本行为,以及样式等;

      main.js 是实例化组件的地方,el指明了这个实例Vue挂载到什么dom元素下; template指明了显示什么;component指明了绑定哪个组件。

              

      

 

 

 
文章评论