安装步骤
主要核心部分
一般一个初步的Vue项目创建好之后都会有这三个文件:index.html 、main.js 、App.vue;
index.html解释
index.html :众做周知,Vue是单页面形式开发,而这个index.html文件在其中起着特别重要的作用。所有组件(后缀名为.vue都被视为组件)都会通过此文件进行渲染加载。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>firstvue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js解释
这个文件,在我看来,它相当于一个C/Java中的入口函数。控制着初次启动Vue项目要加载的组件。
下面是main.js的代码截图,我会对每行代码进行逐一分析
import Vue from 'vue'
/* 引入element */
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
(1)import A from ‘B’
这类语句相当于引入B(这一般是路径)然后给它起个名字叫做A;
(2)Vue.user©
这个意思是 全局方法定义 C。也就是说,定义以后,你可以在这个Vue项目的任意地方使用该组件(当然,你不能乱写)。
(3)
这个和index.html中的相挂钩。
APP.vue解释
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>
总结
我们来总结一下,vue项目的启动,在表层可视为main.js–>App.vue(组件)–>index.html