分析vue脚手架
2024-10-19 22:11:29
执行流程：
执行npm run serve。找到了main.js文件，之后引入Vue、App等等。后来找到App组件，发现里面用到了组件School，于是执行School组件，最终汇总到App组件。通过main.js的render函数将App组件放入容器。然后找到index.html就放到里面创建的容器app
main.js
1 <!--该文件是整个项目的入口文件-->
2 <!--引入Vue-->
3 import Vue from 'vue'
4
5 <!--引入App组件，它是所有组件的父组件-->
6 import App from './App.vue'
7
8 <!--关闭vue的生产提示-->
9 Vue.config.productionTip = false
10
11 <!--创建Vue实例对象-------vm-->
12 new Vue({
13 <!--将App组件放入容器【引入的Vue并非完整的，缺少模板解析器。所以用render】-->
14 <!--.$mount('#app')相当于el:'#app'-->
15 render: h => h(App),
16 }).$mount('#app')
App.vue
1 <!--App组件结构-->
2 <template>
3 <div>
4 <!--静态资源放assets文件夹-->
5 <img alt="Vue logo" scr="./assets/logo.png">
6 <School></School>
7 </div>
8 </template>
9 <!--App组件交互-->
10 <script>
11 <!--引入School组件，新建的组件放components文件夹-->
12 import School from './components/School.vue'
13
14 export default{
15 name:'App',
16 components:{
17 School
18 }
19 }
20 </script>
21
22 /*App组件样式。根据需求写或不写样式
23 <style>
24 </style>
25 */
School.vue
1 <!--template导入之后就没了，所以需要div包住里面的-->
2 <template>
3 <div class="demo">
4 <h2>学校名称：{{schoolName}}</h2>
5 <h2>学校地址：{{address}}</h2>
6 <button @click="showName">点我提示学校名</button>
7 </div>
8 </template>
9
10 <!-- name:'School'命名组件名为School。<script>中包含可以交互的。比如data、methods、watch、computed-->
11 <script>
12 <!--暴露结构以便导入-->
13 export default{
14 name:'School',
15 data(){
16 return{
17 schoolName:'尚硅谷',
18 address:'北京'
19 }
20 }
21 }，
22 methods:{
23 showName(){
24 alert(this.schoolName)
25 }
26 }
27 }
28 </script>
29
30 <!--可以没有style。如果不需要样式-->
31 <style>
32 .demo{
33 background-color:orange;}
index.html
1 < !DOCTYPE html>
2 <htmL Lang="en">
3 <head>
4 <meta charset="utf-8">
5 <!--针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面-->
6 <meta http- equiv= "X -UA- Compatible" content="IE=edge">
7 <!--开启移动端的理想视口-->
8 <meta name="viewport" content= "width=dev ice-width, initial-scale=1.0">
9 <!--配置页签图标-->
10 <link rel="icon" href="<%= BASE_ URL %> favicon. ico">
11 <!--配置网页标题。不用过分关注-->
12 <title> <%= htmLWebpackPlugin. options.title %></title>
13
14 </head>
15 <body>
16 <!--当浏览器不支持js时noscript中的元素就会被渲染-->
17 <noscript>
18 <strong>We're sorry but <%= htmLWebpackPlugin.options.title %> doesn't work.................</strong>
19 </noscript>
20 <!--容器-->
21 <div id="app"></div>
22 <!-- built fi les will be auto injected -->
23 </body>
24 </html>
最新文章
- java访问修饰符
- DrawCall
- Report launcher to run SSRS report subscriptions on demand
- mysql 中文字段排序( 按拼音首字母排序) 的查询语句
- ajax提交后台自动反序列化成对象
- B树叶子节点split
- java 利用java运行时的方法得到当前屏幕截图的方法（转）
- Tomcat 7优化
- (Release Candidate)Candidate
- 打造MacOS版“XShell”
- libevent库简单使用
- python安装第三方库的最简单方式
- 连接postgres特别消耗cpu资源而引发的PostgreSQL性能优化考虑
- 【PAT】B1063 计算谱半径（20 分）
- nmap扫描出现tcpwrapped
- 使用sqoop从mysql导入数据到hive
- Android开发教程 - 使用Data Binding（五）数据绑定
- 【2018CCPC秦皇岛】
- Eclipse里如何配制项目在tomcat中启动
- Apollo2.5 CANBUS调试笔记(测试版)