Vue2.0 脚手架代码详解
参考作者:https://www.jianshu.com/p/2b661d01eaf8
只是为了方便个人学习。
来看一下脚手架创建后的项目目录
说明:在*.vue文件,template标签里写html代码,且template直接子级只能有一个标签。style标签里写样式,script里面写js代码
1. main.js
这个js文件是主页面配置的主入口。主要是利用es6的模块化引入模块
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' /* 这里是引入vue文件 */ 4 import App from './App'/* 这里是引入同目录下的App.vue模块 */ 5 import router from './router'/* 这里是引入vue的路由 */ 6 7 Vue.config.productionTip = false 8 9 /* eslint-disable no-new */ 10 new Vue({ 11 el: '#app',/* 定义作用范围就是index.html里的id为app的范围内 */ 12 router,/* 引入路由 */ 13 components: { App },/* 给Vue实例初始一个App组件作为template 相当于默认组件 */ 14 template: '<App/>'/* 注册引入的组件App.vue */ 15 })
2. 文件:App.vue
1 <template> 2 <div id="app"> 3 <img src="./assets/logo.png"> 4 <router-view/> <!-- 这里是用来展示路由页面内容的,如果想用跳转就用<router-link to='xxx'></router-link> --> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'App' 11 } 12 </script> 13 14 <style> 15 #app {16 font-family: 'Avenir', Helvetica, Arial, sans-serif; 17 -webkit-font-smoothing: antialiased; 18 -moz-osx-font-smoothing: grayscale; 19 text-align: center; 20 color: #2c3e50; 21 margin-top: 60px; 22 } 23 </style>
3.Hello.vue页面
1 <template> 2 <div class="hello"> 3 <h1>{{ msg }}</h1><!-- 这里是展示数据中的 --> 4 <h2>Essential Links</h2> 5 <ul> 6 <li> 7 <a 8 href="https://vuejs.org" 9 target="_blank" 10 > 11 Core Docs 12 </a> 13 </li> 14 <li> 15 <a 16 href="https://forum.vuejs.org" 17 target="_blank" 18 > 19 Forum 20 </a> 21 </li> 22 <li> 23 <a 24 href="https://chat.vuejs.org" 25 target="_blank" 26 > 27 Community Chat 28 </a> 29 </li> 30 <li> 31 <a 32 href="https://twitter.com/vuejs" 33 target="_blank" 34 > 35 Twitter 36 </a> 37 </li> 38 <br> 39 <li> 40 <a 41 href="http://vuejs-templates.github.io/webpack/" 42 target="_blank" 43 > 44 Docs for This Template 45 </a> 46 </li> 47 </ul> 48 <h2>Ecosystem</h2> 49 <ul> 50 <li> 51 <a 52 href="http://router.vuejs.org/" 53 target="_blank" 54 > 55 vue-router 56 </a> 57 </li> 58 <li> 59 <a 60 href="http://vuex.vuejs.org/" 61 target="_blank" 62 > 63 vuex 64 </a> 65 </li> 66 <li> 67 <a 68 href="http://vue-loader.vuejs.org/" 69 target="_blank" 70 > 71 vue-loader 72 </a> 73 </li> 74 <li> 75 <a 76 href="https://github.com/vuejs/awesome-vue" 77 target="_blank" 78 > 79 awesome-vue 80 </a> 81 </li> 82 </ul> 83 </div> 84 </template> 85 86 <script> 87 export default { 88 name: 'HelloWorld', 89 data () { 90 /* 这里是数据,一定记住数据一定要放data中然后用return返回 */ 91 return { 92 msg: 'Welcome to Your Vue.js App' 93 } 94 } 95 } 96 </script> 97 98 <!-- Add "scoped" attribute to limit CSS to this component only --> 99 <style scoped> 100 /* scoped的意思是这里的样式只对当前页面有效不会影响其他页面, 101 还有可以设置lang="scss"就是支持css预编译,也就是支持sass或者less */ 102 h1, h2 {103 font-weight: normal; 104 } 105 ul {106 list-style-type: none; 107 padding: 0; 108 } 109 li {110 display: inline-block; 111 margin: 0 10px; 112 } 113 a {114 color: #42b983; 115 } 116 </style>
4. router文件下的index.js是路由配置
这个是配置路由的页面
1 import Vue from 'vue' //这里是引用vue文件 2 import Router from 'vue-router' //这里是引入vu路由模块,并赋值给Router 3 import HelloWorld from '@/components/HelloWorld'///* 英文Hello.vue模版,并赋值给变量Hello,这里是“@”相当于“../” */ 4 5 Vue.use(Router)/* 使用路由 */ 6 7 export default new Router({ 8 routes: [/* 进行路由配置,规定“/”引入到Hello组件 */ 9 { 10 path: '/', 11 name: 'HelloWorld', 12 component: HelloWorld/* 注册Hello组件 */ 13 } 14 ] 15 })
如果需要增加组件那就在components文件下定义xx.vue文件并编写代码即可,如果需要配置路由就要进行在index.js进行路由“路径”配置,
注意:import from和export defalut的使用
转载于:https://www.cnblogs.com/wanqingcui/p/9747068.html
Vue2.0 脚手架代码详解相关推荐
- yolov5-5.0版本代码详解----augmentations.py的augment_hsv函数
yolov5-5.0版本代码详解----augmentations.py的augment_hsv函数 1.用途 图片的hsv色域增强模块 2.调用位置 在datasets.py的LoadImagesA ...
- Vue2.0史上最全入坑教程(中)—— 脚手架代码详解
2019独角兽企业重金招聘Python工程师标准>>> 书接上文我们说道,如何利用脚手架(vue-cli)构建一个vue项目,本回书我们一起来学习分析下代码. 回顾下创建后的项目目录 ...
- Kaggle泰坦尼克号-决策树Top 3%-0基础代码详解
Titanic Disaster Kaggle,里的经典入门题目,因为在学决策树所以找了一个实例学习了一下,完全萌新零基础,所以基本每一句都做了注释. 原文链接:Titanic: Simple Dec ...
- Vue2.0 Component的详解(重点)
1.0 全局的component&局部的component <div id="app"><lhq></lhq> </div> ...
- 【C语言】练手游戏项目:天天酷跑1.0代码详解,包括源码,素材,第三方文件。
C语言手写天天酷跑代码详解 项目总览: 一.项目开发日志 二.引入库与宏编译 三.全局变量与结构体的定义 四.主函数中的内容 五.逐个自定义函数拆解分析 1.初始化init()函数 2.处理用户按键输 ...
- 基于spring security实现vue2前后端分离的双token刷新机制(完整代码详解,含金量拉满!)
目录 一.前言: 核心功能概要: 通过加密算法创建一个用户: 二.后端 代码详解: 1.代码整体结构: 2.所需依赖: 3.UserDetailServiceImpl拦截用户登陆: 4.所需工具类 4 ...
- 【CV】Pytorch一小时入门教程-代码详解
目录 一.关键部分代码分解 1.定义网络 2.损失函数(代价函数) 3.更新权值 二.训练完整的分类器 1.数据处理 2. 训练模型(代码详解) CPU训练 GPU训练 CPU版本与GPU版本代码区别 ...
- js php base64,JavaScript实现Base64编码与解码的代码详解
本篇文章给大家分享的是jJavaScript实现Base64编码与解码的代码详解,内容挺不错的,希望可以帮助到有需要的朋友 一.加密解密方法使用//1.加密 var str = '124中文内容'; ...
- yii mysql 事务处理_Yii2中事务的使用实例代码详解
前言 一般我们做业务逻辑,都不会仅仅关联一个数据表,所以,会面临事务问题. 数据库事务(Database Transaction) ,是指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全 ...
最新文章
- boost::python::converter::as_to_python_function相关的测试程序
- HTML5协议的,HTML5新增协议:WebSocket协议的实例
- Linux网络编程服务器模型选择之并发服务器(下)
- 用鼠标去控制物体移动的方法
- 使用Microsoft EnterpriseLibrary(微软企业库)日志组件把系统日志写入数据库和xml文件...
- leetcode —— 877. 石子游戏
- 一文理清散乱的物联网里开发者必须关注的技术!
- dll文件用什么语言编写_为什么Unix不用功能更强大的C++而是用C编写
- [转]IDE之zend studio: zend studio8使用感受
- spark job stage task概念与区分
- MySQL中IN子查询会导致无法使用索引
- Nokia最新PC套件下载 Nokia PC Suite 6.86.9.0 手机型号和PC套件对应表最新7.1
- 微信小程序-自定义导航栏-错位
- ElasticSearch安装
- QC的七大手法和八大原则
- 七种应刻意训练的顶级思维方法
- 独家 | GAN大盘点,聊聊这些年的生成对抗网络 : LSGAN, WGAN, CGAN, infoGAN, EBGAN, BEGAN, VAE
- 最常被遗忘的 Web 性能优化:浏览器缓存
- iOS App “去评分” 功能的几种实现总结
- 【推荐】推荐一个听音乐越,放松的小网站 音乐视频都不错
热门文章
- 模拟天天酷跑游戏java_cocos2d 简单高仿天天酷跑游戏
- 鸿蒙和宙斯谁厉害,漫威宇宙宙斯vs奥丁,到底谁更强
- Java常用设计模式————桥接模式
- Spring Boot————BeanCreationNotAllowedException异常分析
- C语言存储编码输出,C语言怎么输出一个菱形
- esp8266单片机透传_基于WeMos D1(ESP8266)的校园卡门禁系统
- php手机电子相册,免费电子相册制作软件 手机电子相册制作软件
- python 通过pip安装库 pycharm里面使用第三方库
- 深入jvm虚拟机第三版源码_深入JVM虚拟机,阿里架构师直言,这份文档真的是JVM最深解读...
- java队列_java集合入门和深入学习(详解),看这篇就差不多了