vue核心文件 · FA+Ecloud互联网应用开发平台综合技术入门指南(READ)

## 一、概述 vue项目，典型的会包括几个核心要素：index.html、App.vue和main.js； ## 二、index.html 项目主页文件，默认放在工程的public根目录下；典型内容如下： ``` html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body> </html> ``` 打包发布的时候，这个文件会保留，作为web应用的入口文件； ## 三、App.vue 整个项目的根组件，默认放在src的根目录下； ![](https://img.kancloud.cn/79/81/7981e42a2579729ae12f4ebe563a1193_359x457.png) 典型： ```javascript <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </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> ``` ## 四、main.js 整个项目的入口文件，默认放在src的根目录下； ![](https://img.kancloud.cn/8d/23/8d232589137f3a53726a7762a8c8e14a_352x404.png) 典型内容： ```javascript import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` ## 五、基本流程访问index.html后，main.js会调用app.vue组件显示；