vue项目结构php写哪里,vue项目结构(详细教程)
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下
新建一个项目之后,我们来看一下项目的目录结构
几个主要文件的内容
index.html文件(入口文件,系统进入之后先进入index.html)
blog
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:'', //模板,可以写对应的p,也可以写组件调用的标签,只要有一个根标签即可
components:{ App } //想要调用组件,必须在component里注册这个组件,这里的APP来源于引入的./App文件,即:App.vue文件
})
App.vue文件(根组件)
export default {
name: 'App'
}
#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;
}
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项目结构php写哪里,vue项目结构(详细教程)相关推荐
- vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
- vue在html中写style,vue开发之style(六)(CSS页面布局之样式、背景、文字)
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法 还有vue的使用,重点就在webpack这个: vue开发之webpa ...
- python爬虫项目描述怎么写_爬虫项目咋写,爬取什么样的数据可以作为项目写在简历上?...
看样子,主要目的是上简历 如果你想要爬虫的offer,那么你的项目应该有这么几个特征: 能用常用的框架,必要时有能力修改框架甚至自己写一个 熟悉多线程多进程分布式等,对爬虫任务调度有很好的解决办法 采 ...
- 【软件测试】面试老约不到?软件测试简历项目经验怎么写?论项目经验的重要性......
目录:导读 前言 一.Python编程入门到精通 二.接口自动化项目实战 三.Web自动化项目实战 四.App自动化项目实战 五.一线大厂简历 六.测试开发DevOps体系 七.常用自动化测试工具 八 ...
- java项目总监_写给我们项目总监的一些话
好久没跟你好好聊聊天了,不知为何今天突然想跟你聊两句.首先,对于今天项目商务上的延误,实在抱歉,也确实在原本紧迫的项目中雪上加霜,这是我的失误.对于这个项目,我是这么考虑的:我不希望放过一些看似简单和 ...
- steam搬砖项目基础分析,月入8000+(详细教程)
大家好,我是阿阳 steam搬砖项目:最稳定的副业,一单收益几十上百 steam平台,对于大多数游戏玩家应该再清楚不过了,玩过pubg,也就所谓的"吃鸡"游戏 ,还有csgo反恐精 ...
- vue项目结构php写哪里,vuex项目结构目录与配置使用详解
这次给大家带来vuex项目结构目录与配置使用详解,使用vuex项目结构目录与配置的注意事项有哪些,下面就是实战案例,一起来看一下. 首先先正经的来一段官网的"忠告": vuex需要 ...
- vue项目实现G6双向树状图最详细教程
在项目中使用 NPM 包引入 npm install --save @antv/g6 AntV G6 示例图 初始化数据 点击节点动态加入数据 上代码(vue 文件) <template> ...
- 【金三银四】软件测试简历项目经验怎么写,没有项目经验?
一.简历重要性以及编写原则 能力,经验,技能和工作态度的提现.对自身的说明书. 主要是提现你的价值. 包装简历的原则︰(不失真的包装) 1.合适原则∶需要的是合适,能够为企业带来价值的人. ⒉.营销原 ...
最新文章
- Swift 4.1增强了泛型、编译器和包管理器
- linux删除旧网卡,如何删除旧网卡驱动
- 【Tools】python环境操作笔记
- android error: undefined reference to 的错误分析
- python 金融可视化_用 Python 进行金融数据可视化
- FreeRTOS内核实现05:支持多优先级
- 进入阿里做测试员遥不可及?这里或许有你想要的答案
- 拓端tecdat|R语言生态学模拟对广义线性混合模型GLMM进行功率(功效、效能、效力)分析power analysis环境监测数据
- 米勒-拉宾素性检验(MillerRabbin)算法详解
- js ajax异步提交,jquery ajax异步提交表单数据的方法
- 数组是逻辑结构还是存储结构_逻辑结构?存储结构?傻傻分不清……
- Python入门:数据结构之字典(dict)(1)
- innodb引擎的三大特性,插入缓冲(change buffer),两次写(doule write),自适应哈希索引(AHI)
- 示波器基础知识100问汇总
- 《程序员》2012年12期精彩内容:2012这一年
- [青少年CTF]弱口令实验室招新赛部分WriteUp
- Fast and Accurate Extrinsic Calibration for Multiple LiDARs and Cameras
- skywalking
- html转码问题 htmlEncode
- C#对接天翼物联网平台,一些坑
热门文章
- 可转债配资公司是干什么的
- 使用游戏盾就可以保证游戏不被攻击吗?
- 三防加固平板电脑能在恶劣的工业环境中依然正常运作
- 【手把手带你Godot游戏开发 第一弹】零基础入门案例:FlappyBird(教程目录及源代码)
- Vue的MVVM模型和双向数据绑定原理
- 一个屌丝程序员的青春(三九五)
- 用caffe对自己的图片进行分类,包含详细代码
- realmeq可以用鸿蒙系统吗,价格战惨烈,买手机送电视?OPPOK9、RealmeQ3Pro和IQOOZ3,咋选...
- 学界 !李飞飞高徒Andrej Karpathy提醒你,小心搭建神经网络的六个坑
- Katalon-参数化