一、vue项目的目录结构
二、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>myvue
</title>
-
</head>
-
<body>
-
<div id="app">
</div>
-
<!-- built files will be auto injected -->
-
</body>
-
</html>
2. main.js（核心文件）
-
// 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'
-
import App
from
'./App'
-
import router
from
'./router'
-
//引入IVIEW组件
-
import iView
from
'iview';
-
import
'iview/dist/styles/iview.css';
-
Vue.use(iView);
-
//引入vue-easytable
-
import
'vue-easytable/libs/themes-base/index.css'
-
import {VTable,VPagination}
from
'vue-easytable'
-
Vue.component(VTable.name, VTable)
-
Vue.component(VPagination.name, VPagination)
-
//引入axios
-
import axios
from
'axios'
-
Vue.prototype.$ajax = axios
-
Vue.config.productionTip =
false
-
-
-
/* eslint-disable no-new */
-
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（路由组件）
vue-router
vue-router是vue的核心插件，使用vue-router，我们可以将组件映射到路由，然后告诉vue-router在哪里渲染它们。
-
import Vue
from
'vue'
-
import Router
from
'vue-router'
-
import HelloWorld
from
'@/components/HelloWorld'
-
import TableMain
from
'@/components/TableMain'
-
-
Vue.use(Router)
-
-
export
default
new Router({
-
routes: [
-
{
-
path:
'/',
-
name:
'Table',
-
component: TableMain
-
}
-
]
-
})
转载：https://blog.csdn.net/sherazade/article/details/105427176
查看评论