根目录下的文件,这些是创建vue项目时生成的配置文件

node_modules=> 里面的文件是项目开发过种中的各种依赖,我们暂且不用去深入了解;

public=> 主要放的是一些公用的文件,比如一些icon(即我们在收藏网址,网址前面的图标识别)

src=> 这是我们整个项目的核心部分。我们所写的代码会全部放在这个文件夹下。

assets=> 存放的是一些静态资源:比如图片,css文件,js文件;

components=> 存放组件

views=> 存放所有的页面

App.vue=> 根组件

main.js=> 入口文件

router.js=> 路由文件

store=> 根实例状态存储文件

首先打开入口文件main.js:

main.js作用:

在项目开发中,公共的组件,依靠等从此文件中导入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false

接下来实例化vue对象

new Vue({
router, //路由
store, //状态存储
render: h => h(App) //渲染组件
}).$mount('#app')

Vue=> 全局构造函数,new Vue里面的内容则是构造参数。router, store,render则是参数选项。

用到的参数选项需要在本文件顶部进行引入,否则会报错。

$mount('#app') => 将实例化的对象挂载到#app这个节点上。

#app 是publick文件夹下的index.html入口文件里的一个id。也就是说,我们对App这个组件进行渲染后插入到这个节点里并显示出来。

这是实例化另一个写法

new Vue({
el: "#app",
router,
store,
render: h => h(App)
})

在实例化vue时,el和$mount基本相同。

原文链接:https://mp.weixin.qq.com/s/U18ICZAz7TwAs9ck8zulag

vue--实例化对象的更多相关文章

  1. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  2. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  3. Vue实例对象的数据选项(火柴)

    前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...

  4. [转]ThinkPHP中实例化对象M()和D()的区别,select和find的区别

    1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...

  5. java实例化对象的方式

    一.Java中创建(实例化)对象的五种方式  1.用new语句直接创建对象,这是最常见的创建对象的方法. 2.通过工厂方法返回对象,如:String str = String.valueOf(23); ...

  6. PHP动态实例化对象并向构造函数传递参数

    在框架开发,模块化开发等场合,我们可能有一种需求,那就是在PHP运行时动态实例化对象. 什么是动态实例化对象呢?我们先来看一下PHP有一种变量函数(可变函数)的概念,例如如下代码: function ...

  7. 【PHP面向对象(OOP)编程入门教程】5.如何实例化对象?

    我们上面说过面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,既然我们类会声明了,下一步就是实例化对象了. 当定义好类后,我们使用new关键字来生成一个对象. $对象名称 = new 类名称 ...

  8. PHP面向对象(OOP)编程入门教程————如何实例化对象?

    我们上面说过面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,既然我们类会声明了,下一步就是实例化对象了. 当定义好类后,我们使用new关键字来生成一个对象. $对象名称 = new 类名称 ...

  9. c++实例化对象

    今天看到c++实例化对象,有点懵了.Activity_Log the_log (theLogPtr, Tree->GetBranch());这是那一段小代码,开始没看懂.java看习惯了总喜欢n ...

  10. 1、c#中可以有静态构造方法,而java中没有,例如在单例模式中c#可以直接在静态构造中实例化对象,而java不可以

    1.c#中可以有静态构造方法,而java中没有,例如在单例模式中c#可以直接在静态构造中实例化对象,而java不可以

随机推荐

  1. python学习之旅(六)

    Python基础知识(5):基本数据类型之字符串(Ⅱ) 字符串方法 17.join:对字符串进行拼接 x="can" y="li" y.join(x) 结果: ...

  2. LeetCode 12 - 整数转罗马数字 - [简单模拟]

    题目链接:https://leetcode-cn.com/problems/integer-to-roman/ 题解: 把 $1,4,5,9,10,40,50, \cdots, 900, 1000$ ...

  3. (四)juc线程高级特性——线程池 / 线程调度 / ForkJoinPool

    13. 线程池 第四种获取线程的方法:线程池,一个 ExecutorService,它使用可能的几个池线程之一执行每个提交的任务,通常使用 Executors 工厂方法配置. 线程池可以解决两个不同问 ...

  4. MongoDB分片集群原理、搭建及测试详解

    随着技术的发展,目前数据库系统对于海量数据的存储和高效访问海量数据要求越来越高,MongoDB分片机制就是为了解决海量数据的存储和高效海量数据访问而生. MongoDB分片集群由mongos路由进程( ...

  5. 最全的MonkeyRunner自动化测试从入门到精通(9)

    最基本脚本功能开始编写(1)Monkeyrunner和Monkey的区别 1)Monkeyrunner工具在工作站上通过API定义的特定命令和事件控制设备或模拟器(可控) 2)精确控制事件之间的事件 ...

  6. 【托业】【新东方托业全真模拟】TEST05~06-----P5~6

    credit A with B 把A归功于B present A with B 给A赠送B proofread thoroughly 彻底地校对:exclusively 专门地:独占地:apparen ...

  7. bugfree3.0.1-修改“优先级”为中文引起的PHP Error

    博主在搭建好bugfree后,修改了系统中“优先级”字段,将原先系统定义的优先级“1.2.3.4”修改为符合博主自己项目要求的优先级“高.中.低”.修改成功后,系统确实将原先提交的BUG优先级从“1. ...

  8. MongoDB $关键字 关系比较符号 $lt $lte $gt $gte $ne

    关系比较符: 小于:$lt 小于或等于:$lte 大于:$gt 大于或等于:$gte 不等于:$ne 属于:$in 查询中常见的 等于 大于 小于 大于等于 小于等于 等于 : 在MongoDB中什么 ...

  9. [py]使用字典get方法做数据统计

    s = "aabbccc" d = {} for i in s: if i in d: d[i] += 1 else: d[i] = 0 for i in s: d[i] = d. ...

  10. (玩起来)DAX/PowerBI系列 - 参数表(Parameter Table) - 多时间段数值对比

    盆友们,边看文章边玩,请耐心等待PowerBI load出来~~~~ (7.8秒钟) DAX/PowerBI系列 - 参数表(Parameter Table) - 多时间段数值对比 难度: ★☆☆☆☆ ...