02 - 上手使用

时间 2019-11-19

标签上手使用繁體版

原文原文链接

前言html

接下来咱们看看如何定制本身的页面以及逻辑。vue

咱们开发环境中的工做地点在src目录下，下面就来解析这个目录下的一些文件。webpack

项目启动流程es6

我简单用一两句话带过，由于我还没研究。web

项目根目录下的index.html会先被加载，而后加载src/main.js。app

知道这一点就能够上手操做了。ui

index.htmlspa

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>ttt</title>
 7   </head>
 8   <body>
 9     <div id="app"></div>
10     <!-- built files will be auto injected -->
11   </body>
12 </html>

这个文件就是vue项目的主页，内容也很简单，就是一个id为"app"的div，eslint

以后加载main.js的时候，会把这个div当作vue实例的挂载元素。code

src/main.js

咱们打开这个文件：

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'　　// 导入当前目录下的App.vue文件
 5 
 6 Vue.config.productionTip = false
 7 
 8 /* eslint-disable no-new */
 9 new Vue({
10   el: '#app',　　　　　　　　// 找到vue实例的挂载元素
11   components: { App },　　 // 注册子组件
12   template: '<App/>'　　　　// 使用该模板字符串替换挂载元素
13 })

对于只看过vue教程的小白来讲，这串代码仍是让人懵逼的。

首先是import App from './App'这条指令，意思是导入"./App"这个组件，

这涉及到vue单文件组件的内容，建议先去vue官网看一看。

而后是component: { App }，这个写法是啥意思？

其实这是es6的特殊语法，其等同于 component: { App: App }，

学过vue组件的就知道了，咱们能够在挂载元素中使用<App/>这个组件了。

最后是template: '<App/>'，其实就是在用'<App/>'来替换挂载的元素。

src/App.vue 和 src/components/HelloWorld.vue

诶，那么App.vue里面究竟是什么内容呢？

若是你已经知道vue文件是如何使用的，那么接下来也就好理解了。

打开src/App.vue，能够看到它导入了HelloWorld.vue，并做为本身的子组件，其中还加了一张vue的log。

打开src/components/HelloWorld.vue，能够看到它就是咱们看到的欢迎页面的主体。

结束

会使用vue单文件组件后，照着main.js就能够开发vue项目了，

接下来就是把你在vue教程里学到的东西应用进去就好了。

1. cypress 上手使用
2. SeaweedFS上手使用指南
3. 2015RMBP 初次使用上手
4. 树莓派上手使用
5. 上手使用 Room Kotlin API
6. 随手记02
7. Spring Boot 使用RestTemplate-02-使用OkHttp
8. Rasa使用指南02
9. GCD基本使用-02-GCD
10. RabbitMQ 02 使用场景
更多相关文章...
• TortoiseSVN 使用教程 - SVN 教程
• Docker 容器使用 - Docker教程
• Composer 安装与使用
• 使用Rxjava计算圆周率