vue初尝试--项目结构(推荐)


Posted in Javascript onJanuary 30, 2018

新建一个项目之后,我们来看一下项目的目录结构

vue初尝试--项目结构(推荐)

几个主要文件的内容

index.html文件(入口文件,系统进入之后先进入index.html)

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>blog</title>
 </head>
 <body>
<div id="app"></div>
<!-- built files will be auto injected -->
 </body>
</html>

main.js文件(导入相应的模块)

improt Vue from 'vue'    //可以将脚手架中下载的模块拿出来,可以直接使用new来实例化vue对象
improt App from './App'   
Vue.config.productionTip = false
 new Vue({
  el:'#app',       //当前的vue要控制的容器是谁,要获取的这个容器元素是谁,#app是index.thml里的id=“app”
  template:'<App/>',   //模板,可以写对应的div,也可以写组件调用的标签,只要有一个根标签即可
components:{ App }   //想要调用组件,必须在component里注册这个组件,这里的APP来源于引入的./App文件,即:App.vue文件
 })

App.vue文件(根组件)

<!--1模板:html结构 -->
<template>
 <div id="app">
<img src="./assets/logo.png">
<!--路由入口,对应进入router下面的index.js文件-->
<router-view/>
 </div>
</template>
<!--2行为:处理逻辑 -->
<script>
export default {
 name: 'App'
}
</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>

router文件夹下面的index.js文件(前端路由)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'  //导入模板文件
Vue.use(Router) 
export default new Router({
 routes: [  //定义对应模板的路径,url对应进入的模板
{
 path: '/',
 name: 'HelloWorld',
 component: HelloWorld
}
 ]
})

模板:

template可以用它去包括一些内容,它本身并不会真正的渲染到dom里面去,可以直接使用template标签包括起来,注意:template里有且只能有一个根标签。

行为:

通过import来跟别的组件进行关联,然后通过

export default {
  name: 'App',
  components: {
  HelloWorld
 }

注册一下就可以调用了。

样式:

跟普通css样式一样。可以使用sass语法,但是要在项目中安装一下sass,安装成功之后可以在package.json里面看到对应的信息

项目加载过程

项目开始:index.html ----> main.js ----> App.vue

由index.html入口文件,他会执行main.js文件,main.js会实例化我们的Vue对象,接下来会执行App.vue组件,到了App.vue以后,如果模板有内容的话,他会将模板中的内容插入到index.html的容器当中,也可以在行为属性里设置对应的属性。

总结

以上所述是小编给大家介绍的vue初尝试--项目结构,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 #Javascript
JS实现的抛物线运动效果示例
Jan 30 #Javascript
express如何使用session与cookie的方法
Jan 30 #Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 #Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 #Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 #Javascript
微信小程序数据存储与取值详解
Jan 30 #Javascript
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
php实现的SESSION类
2014/12/02 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
领班岗位职责范文
2014/02/06 职场文书
食品安全标语
2014/06/07 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
MySQL为id选择合适的数据类型
2021/06/07 MySQL