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

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>
    <!-- built files will be auto injected -->
  </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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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
		}
  ]
})

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

index.html

src文件夹

程序入口App.vue

assets

components

router

猜你喜欢