vue-cli运行流程及文件作用

分手后的思念是犯贱 2022-02-23 15:28 258阅读 0赞

## index.html ##

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>my-project</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

个人理解：一个界面body中开一个入口，使用vue更新界面，将不同的样式渲染在同一个界面上，达到各种页面跳转的效果。而页面的跳转利用了vue-router。一种页面处理对应一种路由，所以访问不同的路由界面渲染的样式就不相同，所以做到了一个html页面多个html页面的效果

## src文件夹 ##

### 程序入口App.vue ###

<template>
      <div id="app">
        <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: 0px;
    }
    </style>

### assets ###

主要用来放置一些静态文件，用于网页的加载

### components ###

用来编写vue脚本

<template>
      <div class="hello">
    		{
       {msg}}
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

注：

*  template：该标签中的内容被渲染在index.html中，即一个.vue文件对应一个渲染后的界面
 *  script:该标签使用vue格式的js语言
 *  style scoped：该标签是css样式

### router ###

注：该文件夹下的index.js负责路由控制

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'   -->导入组件中的HelloWorld.vue
    import Login from '@/components/Login'
    
    Vue.use(Router)
    
    export default new Router({
    	mode:'history',                                -->取消路由路径中的#
      routes: [
        {
          path: '/',
          name: 'HelloWord',
          component: HelloWorld
        },
    		{
    		  path: '/login',
    		  name: 'Login',
    		  component: Login
    		}
      ]
    })