有關vue文件記錄：
index.html
在html中運用組件
<body> <app></app> <!-- 此處app的組件為入口js main.js中定義的組件名 --> <script src="build.js"></script> <!-- 此處引用的js為webpack打包生成的js文件 --> </body>
main.js
在這個文件中定義js，引入vue和App.vue
import Vue from 'vue' //引入之后就可以直接new Vue({ })使用了
import App from './App.vue' //引入主組件 new Vue({ el:'body', components:{ app:App //App是上面import引入的App；app是自定義的名字，返給html中運用的組件標簽 } });
App.vue（官方規范，一般組件文件的首字母大寫）
在這個文件中定義html、js、css，格式為：
<template> <h1>welcome Vue</h1> <h2 @click="change">{{msg}}</h2> <my-menu></my-menu> <!-- 引用的其他組件，然后在html中運用 --> </template> <script> import Menu from './components/Menu.vue' //在此引入其他子組件 export default{ // 這個導出的模塊和vue中的component的方式一模一樣，這里面可以直接給數據data，定義方法methods等等 data(){ return { msg:'welcome Vue ^_^' } }, methods:{ change(){ this.msg='wahaha' } }, components:{ 'my-menu':Menu //引入其他子組件，在此定義賦值 } } </script> <style> body{ background: #ccc } </style>
Menu.vue
在當前目錄的components文件夾下面有一個Menu.vue組件
<template> <ul> <li>111</li> <li>111</li> <li>111</li> </ul> </template> <script> </script>
最終的展示效果：
個人總結：
1、html文件中基本不寫什么東西，只是寫一個組件標簽。
2、入口的main.js文件引入vue框架 和 App.vue主組件，然后實例化vue對象，在components屬性中定義組件名（把引入App.vue主組件定義一個名字，返給html文件運用）
3、App.vue主組件，里面集合了html、js、css語法，在此主組件文件中，也可以引用其他子組件，引用時在script標簽所在的js中，用import引入，然后在實例化vue對象中的components中定義名字，然后在template所在的html中運用。
4、子組件在components文件中，一般此文件夾中放置的都是子組件，被App.vue主組件引用。