分析vue脚手架
执行流程：
执行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>
分析vue脚手架的更多相关文章
- 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用
Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...
- 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- Vue脚手架（vue-cli）安装总结
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...
- vue脚手架搭建流程
搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...
- npm安装使用及vue脚手架安装
公司在前端用vue开发项目,那就学习下啦,第一步,在安装vue-devtools过程中,npm作为官方manual installtion方式,肯定必不可少. NPM是随同NodeJS一起安装的包管理 ...
- vue - Vue脚手架
今天的内容vue脚手架,越来越有内味了,也慢慢地开始有点难度了哈哈,但是没有关系,慢慢学慢慢琢磨,我倒是感觉有点越来越像node了,不知道怎么回事,这是要向后端发展的节奏啊 一.初始化Vue脚手架 1 ...
- 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
随机推荐
- 物理CPU，物理核，逻辑CPU，虚拟CPU（vCPU）区别 （转）
在做虚拟化时候,遇到划分CPU的问题,因此考虑到CPU不知道具体怎么划分,查询一些资料后就写成本文. a. 物理CPU:物理CPU是相对于虚拟CPU而言的概念,指实际存在的处理器,就是我们可以看的见, ...
- Spring与Struts2整合时action自动注入的问题
当Struts和Spring框架进行整合时,原本由action实例化对象的过程移交给spring来做(这个过程依赖一个叫struts2-spring-plugin的jar包,这个包主要的功能就是实现刚 ...
- 高德地图定位api以及导航和定位 位置的偏差
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=37 ...
- pytest(4)-测试用例执行顺序
前言 上一篇文章我们讲了在pytest中测试用例的命名规则,那么在pytest中又是以怎样的顺序执行测试用例的呢? 在unittest框架中,默认按照ACSII码的顺序加载测试用例并执行,顺序为:09 ...
- selenium连接浏览器方式
支持HtmlUnitDriver无头浏览器自动化 定位元素的方式:是可嵌套的 WebElement cheese = driver.findElement(By.id("cheese&q ...
- HTTP缓存小结
介绍 提到页面优化,浏览器缓存必定是一个绕不过的话题,判断一个网站的性能最直观的就是看网页打开的速度,而提高网页反应速度的一个方式就是使用缓存.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟, ...
- Python语法进阶（1）- 进程与线程编程
1.进程与多进程 1.1.什么是进程 进程就是程序执行的载体 什么叫多任务? 多任务就是操作系统可以同时运行多个任务.比如你一边在用浏览器学习,还一边在听音乐,,这就是多任务,至少同时有3个任务正在运 ...
- Solution -「多校联训」光影交错
\(\mathcal{Description}\) Link. 一个游戏包含若干次卡牌抽取,每次以 \(p_l\) 的概率得到 \(+1\),\(p_d\) 的概率得到 \(-1\),否则得到 ...
- Back to Basics: RAII and The Rule of Zero
本文整理了Arthur O'Dwyer在CppCon 2019上关于RAII的演讲,演讲的slides可以在此链接进行下载. 在C++程序中,我们往往需要管理各种各样的资源.资源通常包括以下几种: A ...
- INTERSPEECH 2014 | 1-Bit Stochastic Gradient Descent and its Application to Data-Parallel Distributed Training of Speech DNNs
这篇文章之前也读过,不过读的不太仔细,论文中的一些细节并没有注意到.最近为了写开题报告,又把这篇论文细读了一遍.据笔者了解,这篇论文应该是梯度量化领域的开山之作,首次使用了梯度量化技术来降低分布式神经 ...