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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
微信小程序反编译的实现
Dec 10 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
加强版phplib的DB类
2008/03/31 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php的dl函数用法实例
2014/11/06 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
xml和web特殊字符
2009/04/28 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
微信小程序 如何保持登录状态
2019/08/16 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
2019年.net常见面试问题
2012/02/12 面试题
师范毕业生自荐信
2013/10/17 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
办护照工作证明范本
2014/01/14 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
参加招聘会后的感想
2015/08/10 职场文书