vue php项目目录结构,vue的项目结构须知
这次给大家带来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的容器当中,也可以在行为属性里设置对应的属性。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
vue php项目目录结构,vue的项目结构须知相关推荐
- vue项目ide(vue项目环境搭建)
一.先介绍一下我接下来要做的项目 项目:ide可视化工具 技术应用: Vue2.0(js框架):Vue.js - 渐进式 JavaScript 框架 | Vue.js ElementUi(饿了吗ui框 ...
- [vue] 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢?
[vue] 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢? views目录存放一级路由的组件,即视图组件 Components目录存放组件 Store存放vuex相关文件 ...
- Vue 学习笔记(4)Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署
VueCLI 脚手架 Vue CLI 介绍 Vue CLI 安装 Node.js 环境准备 安装 Vue 脚手架 第一个 Vue 脚手架项目 命令创建项目 图形化界面创建项目 vue-cli4 目录结 ...
- 【Vue前端开发学习】第2章,Vue项目目录结构
文章目录 前言 一.新增router文件夹及其配置方法 二.新增store文件夹及其配置方法 三.index.html.App.vue.main.js三者之间的联系 前言 上一章节,通过Pycha ...
- Vue项目目录结构介绍(三)
前言 本章我们会对一个 Vue 项目的目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等. 1.基础目录和文件介绍 在上一章,我们通过 vue-cli 创建了一个新的 ...
- VUE项目目录结构说明
最近做一些Vue后端开发的简单项目,,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助 ...
- vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
- vue项目目录结构分析、过滤器、vue文件中基础template、script、style
项目目录结构: 1.在一个项目中一般的目录结构为:my_project------------项目文件夹|____src--------------------------------存放人可以看懂的 ...
- vue assets图片_Vue实战—如何细化Vue项目目录设计(2)
通过上一篇文章我们了解了Vue项目核心文件(src)以及在内的各个文件的职能. 接下来我们进一步细化Vue项目的目录设计: 在开发项目的时候前端避免不了请求后端接口.为了同时开发,我们知道的通常会用到 ...
最新文章
- 在CentOS 6.3 64bit上安装ActiveMQ 5.15.9实录
- 前馈pid系数_SPMSM控制——基于模型的电流前馈控制及思考
- 文件权限与目录配置——笔记
- Spring autowire 自动装配简介
- Oracle创建表,并添加默认值和备注
- DistCp迁移Hive数据过程中源集群增加删除文件等场景测试
- 古风一棵桃花树简笔画_为什么,很多农村家庭的院子里,会喜欢种一棵樱桃树呢?...
- c语言pta判断字符或数字的昵称,c/c++开发分享『ACM C++』PTA浙大 | 基础题 – 打印沙漏...
- 如何用excle制作黑人拉馆_小编教你如何用装机吧制作u盘启动盘
- JavaScript学习(四十三)—构造方法创建对象的图解和注意事项
- sql学习指南_SQL格式功能的全面指南
- surface simplification using quadratic error metrics
- 4.熟悉App Inventor 2编程界面
- Miniflter中 NPInstanceSetup调查
- 字母c语言ascii码,c语言ascii码对照表
- 老男孩Python高级全栈开发工程师【高清全套完整】
- HC32F4 CRC32校验(附软件CRC32校验)
- 阵列天线方向图乘积定理的Python实现
- HCIE大师之路(四)——OSPF双塔奇兵综合实验
- 游戏里的攻防-检测与反检测