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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
微信小程序实现滑动操作代码
Apr 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动态创建Web站点的方法
2011/08/14 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
Javascript 对象的解释
2008/11/24 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
出国留学自荐信
2013/10/25 职场文书
十佳教师事迹材料
2014/01/11 职场文书
高中班主任评语大全
2014/04/25 职场文书
老干部工作先进事迹
2014/08/17 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
DE1103使用报告
2022/04/05 无线电
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技
table不让td文字溢出操作方法
2022/12/24 HTML / CSS