vue的目录结构、项目流程、vue-router

****************************************

此时vue的脚手架、创建项目已经完成。

vue的目录结构

目录/文件	说明
build	最终发布的代码存放位置。构建脚本目录
config	配置目录，包括端口号等。我们初学可以使用默认的。项目配置。
node_modules	npm 加载的项目依赖模块。感觉有点像java中的jar包。就是项目需要。
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。这里的资源会被wabpack构建。 commponents: 公共组件目录。 App.vue: 根组件，项目入口文件，我们也可以直接将组建写这里，而不使用 commponents 目录。 main.js: 项目的核心文件。
static	纯静态资源目录，如图片、字体等。不会被wabpack构建。
index.html	首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。入口页面
package.json	项目配置文件。npm包配置文件，里面定义了项目的npm脚本，依赖包等信息。
README.md	项目的说明文档，markdown 格式。项目介绍

vue的运行流程

index.html-->main.js-->App.vue-->router/index.js

1.index.html （项目页面入口）

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

2.main.js（核心文件）

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

Vue.config.productionTip = false

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

3.App.vue（项目入口文件）

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <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>

4.router--index.js（路由组件）

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

vue-router

vue-router是vue的核心插件，使用vue-router，我们可以将组件映射到路由，然后告诉vue-router在哪里渲染它们

****************************************

vue的目录结构、项目流程、vue-router

猜你喜欢