Vue项目结构预览

清疚 2022-06-09 12:12 198阅读 0赞

部分文件夹及文件作用如下：

Build: 存放项目最终生成的文件

Config: 存放项目配置文件

node\_modules: npm install 生成的项目依赖包

src: 项目源文件目录，此目录下又分assets，components，router三个目录和main.js, App.vue两个文件，各自作用如下:

assets:存放项目中使用到的图片，如本例则是项目启动后的首页logo

components:存放Vue单文件组件，一个.vue后缀文件即一个Vue组件

router:顾名思义，项目路由设置，所有的项目访问路径都经过此路由，再分发至相应的组件

打开index.js文件，如图：

import Vue from 'vue'
    import Router from 'vue-router'
    import Hello from '@/components/Hello'
    import login from '@/components/login'

第一行导入vue组件，第二行导入vue路由组件，第三行导入components目录下的Hello.vue组件，第四行导入components目录下的login.vue组件，

Vue.use(Router)

这句代码表示使用路由，

**export defaultnew** Router(\{  
  routes:\[  
    \{  
      path: '/',  
      name: 'Hello',  
      component:Hello  
    \},  
    \{  
      path: '/login',  // 单文件组件访问路径  
      name: 'login',  // vue组件名字  
      component:login  // Vue单文件组件名称  
    \}  
  \]  
\})

此部分则是路由配置，配置单文件组件的访问路径，如/login，则通过[http://localhost:8080/\#/login][http_localhost_8080_login]访问，即在项目路径后加上配置的路径

main.js:此文件是vue项目的主文件，即入口处，内容如下：

// 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' // 导入vue组件
    import App from './App' //导入App.vue组件
    import router from './router' // 导入路由组件
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app', // 对应index.html中的<div id="app"></div>
      router, // 路由设置，使用导入的路由组件
      template: '<App/>', // 模板名称
      components: { App } // 使用的单文件组件名称
    })

App.vue组件的分布是一个标准的vue单文件组件，内容如下：

<template> 
      <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view> // 此处配置路由元素
      </div>
    </template>
    
    <script>
    export default {
      name: 'app'
    }
    </script>
    
    <style> 
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

.babelrc文件作用： 转换ES6的语法为浏览器识别的ES5.1语法，内容如下:

{
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] // 支持浏览器版本
          }
        }],
        "stage-2"
      ],
      "plugins": ["transform-runtime"], // 在运行时转换
      "env": { // 环境配置
        "test": { // 此处只有一个环境，测试环境
          "presets": ["env", "stage-2"],
          "plugins": ["istanbul"]
        }
      }
    }

[http_localhost_8080_login]: http://localhost:8080/#/login