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----文件操作
Jan 18 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
从原生JavaScript到React深入理解
Jul 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
PHP中的加密功能
2006/10/09 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php函数与传递参数实例分析
2014/11/15 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP自定义错误用法示例
2016/09/28 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python将string转换到float的实例方法
2019/07/29 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python如何将装饰器定义为类
2020/07/30 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
毕业自我鉴定范文
2013/11/06 职场文书
大课间活动实施方案
2014/03/06 职场文书
前台文员职责范本
2014/03/07 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技