vue视频教程系列第五节-实例化vue对象

vue视频教程系列第五节-实例化vue对象

上一节主要讲了用npm包安装vue的过程。这一节就带领大家认识一下vue项目里的各个文件。

首先介绍一下根目录下的文件，这些文件是我们当初初建vue项目时预设的配置文件。如果想修改某个预设的属性等可以找到相应的配置文件进行修改（我们当初选择的是将各种预设的配置文件创建成单个文件）

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

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

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

assets => 存放的是一些静态资源：比如图片，css文件，js文件；

components => 存放组件

views => 存放所有的页面

App.vue => 根组件

main.js => 入口文件

router.js => 路由文件

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

以上就是各个文件夹的作用，接下来介绍一下如何实例化一个vue对象：

首先打开入口文件main.js

main.js作用：

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

例如：import Vue from 'vue'

2.创建一个实例对象，并挂载到某个节点上

实例化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。也就是说，我们对Appp这个组件进行渲染后插入到这个节点里并显示出来。

这个实例还可以这样写：

new Vue({

el: "#app",

router,

store,

render: h => h(App)

})

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

以上。

附：我们在index.html里看到了noscript这个标签。

起初产生的原因是，在不支持js的浏览器中，显示替代的内容。不过，到了现在，浏览器不支持js的情况已经不出现了，但是用户也可能因为各种原因而禁用了js。如为了节省流量，延长电池使用时间，或者是不希望自己的隐私被各类统计/追踪脚本泄露。所以，noscript标签中的元素的内容，只有在下列情况下才会显示出来：

1.浏览器不支持js脚本。（已经不太可能）

2.浏览器支持脚本，但脚本被禁用

微信公众号：duzhan99