app vue 真机运行_Javascript基础入门(二)-Vue简要

声明：此文章只作为本人学习记录，鉴于本人水平极其有限，其中不免包含许多错误，不宜作为教程参考。

1.确保开发环境

Visual Studio 2019能够自动检测Vue项目的开发环境是否正常。

使用Visual Studio 2019创建空Vue.js项目后尝试运行后，Visual Studio 2019将自动下载安装开发环境。

2.项目目录结构分析

Visual Studio 2019创建空Vue.js项目后，初始项目目录结构如下

2.1先从main.js分析

如图

render: h => h(App) 是下面内容的缩写：

render: function (createElement) {
return createElement(App);
}

进一步缩写为(ES6 语法)：

render (createElement) {
return createElement(App);
}

再进一步缩写为：

render (h){
return h(App);
}

按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);

createElement 函数是用来生成 HTML DOM 元素的,Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

$mount()：将组件手动挂载至根节点

2.2 进一步分析App.vue

如图

逐步分析

<template>
<div id="app">
<Home msg="Hello world!" />
</div>
</template>

其中的<template>标签表示为组件模板

export default {
name: 'app',
components: {
Home //自定义组件Home//
}
};

export default能够导出组件，其中name只有作为组件选项起作用，类型为string,允许组件模板递归调用自身。组件在全局使用Vue.component()注册时，全局ID自动作为组件的name。name选项能够便于调试。

其中components 自定义了组件Home,Home来源于1.<template>标签 2.import Home from './components/Home.vue'。

2.3 进一步分析Home.vue

如图

<template>
<div class="home">
<h1>{{ msg }}</h1>
<p>Welcome to your new single-page application, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p>
</div>
</template>

其中的<template>同样为组件模板。

export default {
name: 'Home',
props: { //子组件//
msg: String
}
};

name: 'Home' 同上

props创建了子组件。表明数据msg类型为String,表现为Welcome to your new single-page application, built with Vue.js.</p>

2.4 分析package.json

如图

可以看到文件中包含的都为项目的相关版本描述和开发者信息与其他背景，这些内容解释为：

"name": 包名 "version": 包的版本号 main: 入口文件，一般都是 index.js scripts：支持的脚本，默认是一个空的 test keywords：关键字，有助于在人们使用 npm search 搜索时发现你的项目 "description": 包的描述 "author": 包的作者 repository: 包代码的repo信息，包括type和URL，type可以是git或者svn，url则是包的repo地址。 license：默认是 [MIT],项目许可证，让使用者知道是如何被允许使用此项目。 "dependencies": 生产环境依赖包列表 "devDependencies": 开发环境、测试环境依赖包列表 engines: 声明项目需要的node或npm版本范围

package.json方便对Vue项目管理。

2.5 index.html的分析

如图

浏览器访问项目，最先访问的是index.html文件。而文件其中有一行<div id="app"></div>。浏览器执行至此会转而执行挂载在id为app的Vue实例，这点在main.js中的

new Vue({
render: h => h(App)
}).$mount('#app');

已经得到体现。

3.总结与演示运行

在Vue项目在浏览器上运行时，index.html作为浏览器执行入口,main作为项目执行入口。

而index.html中的title等信息会被正常运行，与常规Web项目保持一致。