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初尝试--项目结构的更多相关文章
- vue初尝试--新建项目
这是一篇技术贴--如何新建一个基于vue的项目 1.下载对应版本的nodejs安装,下载的nodejs都集成了npm,所以nodejs安装完成之后npm也对应安装完成了. 安装完成之后可以在cmd命令 ...
- vue初尝试--组件
github代码同步网址 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...
- VScode开发Vue初尝试（一）
由于公司近期有新的H5项目开发,而前端的同事也离职了,所以就临时顶缸,研究学习一下Vue框架开发. 本人也是初学,在学习过程中,把一些学习所得分享出来,可能会有很多问题和疏漏,希望大家能够多多指正,共 ...
- Vue+Iview+Node 项目结构和配置
1.项目调整后的目录 api:数据接口定义 assets:静态文件 components:组件 config:项目相关配置 driective:指令 router:路由 store:状态管 ...
- vue系列之项目结构
参考地址:链接 build webpack配置相关 config webpack配置相关 node_modules npm install 安装的依赖代码库 src 存放项目源码 static 存 ...
- vue学习记录①（vue-cli脚手架构建项目结构）
我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...
- vue的项目结构记录
vue的项目结构 不知道大家有没这样的情况,面对刚配置好的脚手架,创建的文件不知道该放哪个文件下,导致后面开发一些文件不好找,不利于维护. 接下来我说说我项目中的一些文件: 首先是components ...
- 【vue】vue前端项目结构
[一]项目结构 [二]项目结构释意 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm ...
- Vue.js系列之项目结构说明
转:https://www.jb51.net/article/111658.htm 前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli ...
随机推荐
- UNDO及MVCC、崩溃恢复
UNDO特性:避免脏读.事务回滚.非阻塞读.MVCC.崩溃恢复 事务工作流程(图2) MVCC原理机制 崩溃恢复:redo前滚.undo回滚 长事务.大事务:危害.判断.处理 UNDO优化:实现und ...
- MSIL实用指南-IL版hello world
我们学习编程开始时,一般用输出"hello world"的一段程序. C#版的"hello world"是 using System; namespace L0 ...
- 对html进行截图并保存为本地图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- TypeScript入门知识三（函数新特性）
一,Rest and Spread操作符: 用来声明任意数量的方法参数也就是"..."操作符 输出结果: 18 jajj 89 function test (a, b, c) { ...
- button 和input 的区别及在表单form中的用法
先说一下button 和input的定义: <button> 标签定义的是一个按钮 1.在 <button> 元素内部,您可以放置任何内容,比如文本或图像.这是该元素与使用 & ...
- win10环境下利用pyinstaller把python代码(.py)打包成可执行文件(.exe)
前言 最近写了一个小小的检测程序,python写起来只需要短短一百行,可是打包起来就没有C那么容易了.下面记录一下我艰难的"打包"过程. 方法一:py2exe py2exe是一种经 ...
- Unity3D判断角色对敌人是否可见
在编写敌人AI的状态机时 经常需要判断角色对敌人来说是不是可见的 如果是可见的,则做出追击或者攻击动作 如果是不可见的,则保持idle或者巡逻状态 判断是否可见 包括两个步骤 1.地方角色的视见向量和 ...
- WordCount程序代码解
package com.bigdata.hadoop.wordcount; import java.io.IOException; import org.apache.hadoop.conf.Conf ...
- Proxy和Reflect
原因 最近在写 unar.js(一个技术超越react angular vue)的mvvm库.通过研究proxy的可行性.故作以下研究 Proxy代理一个函数 var fn=function(){ c ...
- nodejs文件操作模块FS（File System）常用函数简明总结（转）
件系统操作相关的函数挺多的.首先可以分为两大类. 一类是异步+回调的. 一类是同步的. 在这里只对异步的进行整理,同步的只需要在函数名称后面加上Sync即可 1. 首先是一类最常规的读写函数,函数名称 ...